TIL 2 : 깃허브&파이어베이스와 가까워지기

Timeline

09:00 ~ 12:00 : 회의(역할 분담 및 튜터님 피드백 확인) 및 팀 프로젝트 작업 

12:00 ~ 13:00 : 공지 확인(수료기간 변경 안내)

13:00 ~ 14:00 : 점심 시간

14:00 ~ 16:00 : 팀 프로젝트 작업 1차 완료 후 깃 허브 푸시 경험

16:00 ~ 17:30 : 푸시 과정에서 충돌 문제 발생 > 튜터님에게 도움 요청(5조 전부 가서 경청)

17:30 ~ 18:00 : 튜터님 피드백 기반 1차 충돌 해결

18:00 ~ 19:00 : 저녁시간 

19:00 ~ 21:00 : 팀 프로젝트 작업 및 2차 충돌 푸시 논의

 

오늘 깃으로 팀원들이랑 공동 작업을 시도해봤다.

선빵필승이라고, 먼저 올리면 뒤에 올린 사람이 알아서 코드를 파악해서 문제없게 머지해서 올려야 한다고 한다.

그래서 보통 같은 한 파일을 작업하지 않고 파일을 나눠서 작업하거나, 브랜치를 나눠서 작업한다고 한다.

(그러나 지금은 1주일 간단한 팀프로젝트라 크게 문제될 것 같지 않음.......)

 

오늘은 역할 분담을 했다. 

팀원 1 : 메인 홈페이지 (메인 팀원 프로필 화면, 팀 약속 & 규칙 화면) html, css 작업

팀원 2 : 팀원 프로필 모달 작업

팀원 3 : 작업물 코드 검토 및 피드백, 깃허브 관리 

나 : 방명록 작업 (파이어베이스에 저장하고 읽어오고 삭제하는 기능 간접체험)

 

회의하는게 은근히 오래 잡아먹었음. 2시간 이상은 소모된 것 같음. 홈페이지 컨셉 결정도 함(보라색 계열)

중간에 공부시간이 변동됨으로(점심, 저녁시간) 인해 수료일정이 변경되었고 그로 인해 공지가 진행됨 

(원래는 점심, 저녁시간이 15분 정도로 자리에서 먹으면서 했어야 했는데, 1시간으로 변경돼서 못 채운 시간 만큼 2주가량 늘어남)

 

방명록 작업에서 배울만 했던 것

Error 1  👾

방명록 기능을 깃허브에 올리고, 팀원이 Pull하고 방명록을 사용했는데, 날짜가 다르게 출력됨.

고민해 보니, 팀원과 나의 다른점이 나는 맥(영어)고 팀원은 윈도우(한글)이였음. 관련해서 검색해보니, 각 환경별로 파이어스토어(Firestore)에 다른 문자열 형식이 저장된다고 함(**Windows(한국어 환경)**에서는 오후 / 오전 형식으로, **Mac(영어 환경)*)

해당 부분을 해결하기 위해 어느 환경에서 작성을 하든 일관된 형식으로 저장하는 것으로 바꿈

그래서 toISOString(); 형식으로 저장하는 방법을 알아냄 (기존저장 방식 let date = new Date().toLocaleString();)

let date = new Date().toISOString();  
// ISO 8601 형식으로 변환
// Firestore에 날짜를 저장할 때 언제 어디서든 일관된 형식을 유지하기 위해 사용

하지만 해당 값은 UTC기준이여서 한국 시간으로 다시 2차 수정 진행이 필요함

            let date = new Date(row['date']).toLocaleDateString("ko-KR", {
                year: "numeric",
                month: "2-digit",
                day: "2-digit"
            });

toLocaleDateString : 날짜 부분만 가져오는 메서드

해당 메서드를 사용하려면 date가 객체여야 해서 위와 같이 사용해야 한다고 GPT센세🙏가 말씀해 줌.

(한국시간 변환은 위와 같이 하면 된다고 인지만 함, 깊게 메서드 구조 안파고 들었음.)

 

추가한 댓글 삭제하는 기능에서 그냥 삭제 버튼 누르면 작동이 안돼서 아래와 같이 진행 함

// $("#deletecomment").click(function() 안되는 이유 : 
// 정적으로 존재하는 요소에만 동작함. 동적으로 추가된 요소에는 동작하지 않음.(댓글이 추가되는 것은 동적으로 추가되는 것)
// 해서, document 전체에 클릭 이벤트를 등록하여 동적으로 추가되는 요소에도 동작하도록 함.

// $("#deletecomment").click(function() 안되는 이유 : 
// 정적으로 존재하는 요소에만 동작함. 동적으로 추가된 요소에는 동작하지 않음.(댓글이 추가되는 것은 동적으로 추가되는 것)
// 해서, document 전체에 클릭 이벤트를 등록하여 동적으로 추가되는 요소에도 동작하도록 함.

        $(document).on("click", ".deletecomment", async function () { 
            let docId = $(this).attr("data-id"); //클릭한 부분이 .deletecomment 버튼의 data-id 값 가져오기
            // attr() : 선택한 요소의 속성값을 가져오거나 속성값을 설정하는 메서드

            if (confirm("정말로 삭제하시겠습니까?")) {
                await deleteDoc(doc(db, "comments", docId));
                $(`${docId}`).remove();
                window.location.reload();
            }
        })

 

댓글을 날짜순으로 정렬하고 싶어서 찾아보니 파이어베이스에서 제공하는 정렬 메서드가 있어 적용함.

// orderBy()는 Firestore(Firebase Firestore)에서 제공하는 기능
// Firebase Firestore의 쿼리 기능 중 하나 : Firestore에서 데이터를 정렬해서 가져올 때 사용하는 쿼리(Query) 기능
let q = query(collection(db, "comments"), orderBy("date", "desc")); // 최신순 정렬
let docs = await getDocs(q);

 

 

깃 허브 사용하면서 배울만 했던 것 

이번에 깃 허브에 올리면서 공동작업을 하며 충돌 문제를 해결하면서 현업에서 빈번하게 나올 것 같은 부분이라서 오늘 학습은 상당히 유익하다는 생각이 들었던 날이다.

 

pull 과정

• git fetch  > git pull origin main

 

push 과정

• git status
• git add
• git commit -m "message"
• git push origin main

 

기타 

• git stash : 현재 작업 중인 변경 사항을 임시 저장하고 이전 깨끗한 상태로 돌아갈 수 있도록 함
  • 다른 브랜치로 이동해야 하는데, 현재 작업 중인 변경 사항을 아직 커밋하고 싶지 않을 때
  • Git Pull을 해야 하는데 충돌을 방지하고 싶을 때
  • 잠시 변경 사항을 숨겨두고 다른 작업을 해야 할 때

• git stash list : stash 목록 확인

예시 출력 : 
stash@{0}: WIP on main: e108411 팀소개 페이지 뼈대 html업로드
stash@{1}: WIP on main: 2b1d38b Fix button alignment

 

• git stash pop : stash에 저장한 변경 사항을 다시 불러오면서, stash 목록에서 제거하는 명령어
  • git stash pop 실행하면?
  • 가장 최근(stash@{0}) stash의 변경 사항이 다시 적용됨.
  • 적용된 후, stash 목록에서 해당 stash가 삭제됨.

• git stash apply : pop과 비슷하지만, stash를 제거하지 않고 유지
• git stash drop stash@{0} : 특정 stash만 삭제
• git stash clear : 모든 stash 삭제
• git stash save "버튼 디자인 수정 전 상태 저장" : 이름을 붙여서 stash 저장

 

> conflict 시 : vscode에서 제공하는 source control 화면에서 업로드할 코드를 선택 후 최종 머지로 충돌을 해결 진행 했다.

 

 

 

오늘 결과물