TIL-1BTI 미니 프로젝트 담당 부분 정리

Posted Apr 15, 2024 Updated Nov 13, 2024

views 9 min read

2024-04-16

1. 미니 프로젝트 정리

프로젝트명 : 1BTI
- MBTI를 활용한 팀원 소개 및 웹 페이지 제작
1. 처음 페이지를 들어올 때 2개의 선택지가 총 4개의 질문으로 주어짐.
2. 상단에 궁합이 잘 맞는 MBTI의 팀원의 카드를 보여줌.
2-1. 궁합이 잘 맞는 팀원의 카드를 누를 시에 개인 정보를 볼 수 있음.
2-2. 그 팀원한테 댓글을 달 수 있음. (나(user)랑 궁합이 맞는)
1. 하단에는 2가지의 버튼이 존재함
3-1. 좌측 버튼 : 모든 팀원의 카드를 스와이프 기능으로 보여줌. (팀원들의 카드를 슬라이드쇼처럼) → 해당 페이지로 이동
3-2. 우측 버튼 : 해당 팀원들의 보기 선택지에 대한 이유를 공개. 사용자 즉, 유저는 그 이유에 대한 코멘트를 달 수 있음.
내가 맡은 역할
1. 카드 클릭 시 해당 user의 자기소개 페이지 제작
2. 홈 화면 버튼 클릭 시 팀 페이지 제작
작성 코드 설명

댓글 기능

  
// Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";
        import { getFirestore, collection, addDoc, getDocs, setDoc, doc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-database.js";

        // Firebase 구성 정보 설정
        const firebaseConfig = {
            apiKey: 
            authDomain: 
            projectId: 
            storageBucket: 
            messagingSenderId:
            appId: 
            web:
            measurementId: 
        };

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);
        const db = getFirestore(app);
        const database = getDatabase(app);

-> firestore DB를 사용하기 때문에 Firebase SDK 라이브러리를 가져오고 구성 정보 설정 및 인스턴스 초기화를 진행

  
const  commentsRef = ref(database, 'support');

ref() 함수를 사용하여 support 컬렉션에 대한 참조를 가져옴

상기의 사진은 firestore DB를 보여줌. 하단에 support 컬렉션을 확인할 수 있음.

  
document.getElementById('support-form').addEventListener('submit', async (e) => {

	e.preventDefault();// 기본 제출 동작을 막음

	const  nameInput = document.getElementById('name-input');
	const  commentInput = document.getElementById('support-input');
	const  name = nameInput.value.trim();// 입력된 이름을 얻어와서 공백을 제거
	const  message = commentInput.value.trim(); // 입력된 댓글을 얻어와서 공백을 제거

//이름, 댓글이 입력되어 있을 경우에만 수행

	if (name !== '' && message !== '') {
		try {
		// Firestore에 새로운 댓글을 추가, 컬렉션 : support
			await  addDoc(collection(db, 'support'), {
				name:  name,
				message:  message
				});

			//입력 필드 비우기
			nameInput.value = '';
			commentInput.value = '';
			alert('댓글 저장 성공!');

		/// 댓글이 추가되면 테이블에 새로운 댓글을 표시하는 함수 호출
			getDocs(collection(db, 'support')).then((querySnapshot) => {
				const  support = {};
				querySnapshot.forEach((doc) => {
					support[doc.id] = doc.data();
				});
				displayCommentsInTable(support);
			});
		} catch (error) {
				console.error('Error addingsupport: ', error);	
		}
	}
});

‘support-form’이라는 ID를 가진 요소에 대한 submit 이벤트 핸들러 등록
user가 폼을 제출하면 ‘submit’ 이벤트 핸들러 실행, preventDefault() 함수로 기본 제출 동작을 막고 user가 입력한 이름, 댓글을 가져와 공백을 제거하고 댓글과 이름이 비어있지 않은지 확인
- 기본 제출 동작을 막는 이유 : 폼이 제출되면 브라우저는 기본적으로 페이지를 새로고침 하는데 이로인해 모든 데이터가 날아갈 수 있기에 페이지 새로고침을 방지 하는 것.
- 여기서 공백을 제거하는 이유는 user가 이름, 댓글을 입력할 때 공백만 입력하거나 아무 내용도 입력하지 않을 수 있기 때문에 이를 방지하고자 공백을 제거하는 데이터 유효성 검사를 하는 것.
addDoc() 함수를 사용해 Firestore의 ‘support’ 컬렉션에 새로운 댓글을 추가
추가 후에는 다음 작성자를 위해 입력 필드를 비우고 성공 메세지 출력
새로운 댓글이 추가되면 getDoc() 함수를 사용하여 support 컬렉션의 데이터를 가져옴.
해당 데이터를 반복하여 displayCommentsInTable 함수 호출함.
displayCommentsInTable 함수 설명
- support라는 객체를 매개변수로 받고 이 객체에는 댓글 정보가 들어 있음.
- support-table-body 라는 ID를 가진 요소를 commentTabelBody 변수에 할당.
- 초기화를 하고 for문을 통해 support 객체의 각 속성(댓글)에 대해 반복.
- 현재 반복 중인 키에 해당하는 댓글을 가져와 comment 변수에 할당
- 요소를 생성해서 새로운 행을 나타내는 row 변수에 할당
해당 함수는 댓글 데이터를 사용하여 HTML 테이블에 각 댓글을 추가
페이지가 로드될 때 초기 댓글을 로드하기 위해 Firestore의 support 컬렉션의 데이터를 가져와 displayCommentsInTable 함수 호출

2. Git

pwd : 현재 내가 작업하는 폴더를 보여달라는 뜻
ls(list) : 내 폴더 안에 있는 폴더 & 파일 내역을 보여줌
ls -a (list all) : 숨겨진 파일(보통 .으로 시작)도 모두 볼 수 있음
mkdir : 현재 경로에서 폴더를 생성하는 명령어
touch : 현재 경로에서 파일을 생성하는 명령어
cd : Desktop 안에 있는 다른 폴더로 이동 가능
Git : 코드 변경점 기록
Github : 백업과 공유가 가능한 코드 저장소
git status : 현재 git 상태를 확인
git init
- initialize(초기화 함, 초기 세팅하다)의 준말
- 프로젝트 시작 전 딱 한번만 입력하면 됨
- 정확한 프로젝트 폴더(경로) 에서 입력해야 함
- .git 이라는 폴더가 생김. 이때부터 코드 변경을 git에서 추적 가능
- 코드를 저장하는 명령어
  - git add(지정) & git commit(저장)
- 저장 내역을 확인하는 명령어 : git log
Github 사용 이유 : 백업, 공유, 협업
git pull : 다른 사람이 변경한 코드를 내 로컬 컴퓨터로 가져오기
git push : 내 코드를 공유하기(올리기)
git push 전에 git pull을 먼저 해야 함. 이유: 다른 누군가 코드를 push 해서 코드가 변경된 상태인데 내가 그 코드를 받기도 전에 내 코드를 push 하면 그 코드가 날라감. 따라서 pull(다른 사람 코드를 받고) -> push(내 코드를 올림)을 진행함
pull request 충돌 발생 시 어떻게 해결?

3. 정리

pull requests 즉, pr에 대한 정확한 학습이 필요하다고 느낌. 오늘 충돌로 인해 여러번 식은땀을,, 😓

TIL

This post is licensed under CC BY 4.0 by the author.

1. 미니 프로젝트 정리

2. Git

3. 정리

Trending Tags