TIL6. 1주차 - 상세 페이지 만들기

# GIT 사용일기

git 클론 떠오기

1️⃣ 기본적인 Git Clone 사용법
git clone [원격 저장소 URL]

2️⃣ 특정 폴더에 클론하기
git clone [원격 저장소 URL] [내가 원하는 폴더 이름]
git clone https://github.com/Sonny-in-1993/31-helmet-onboarding.git helmet

그러나 나는 최신 버전을 가져오고 싶었다

 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'https://github.com/Sonny-in-1999/31-helmet-onboarding.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. If you want to integrate the remote changes,
hint: use 'git pull' before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

🔍 문제 원인
- 로컬 브랜치(master)가 원격 브랜치보다 뒤쳐져 있어서 발생
- 로컬에 없는 새로운 커밋이 있다는 것 

 

 ✅ 해결 방법
🚦 방법 1
- 원격 변경 사항을 병합 (git pull)
  원격 변경 사항 가져오기
  git pull origin master

- 병합 충돌 발생 시 충돌이 발생하면 파일을 수정하고
- 다시 푸시 시도

🚨 방법 2
- 강제 푸시 (--force, 데이터 덮어씌움)
git push origin master --force 
- 협업중이라 좋은 방법이 아닌 것 같아서 pass

찾아본 내용은 이렇지만 무슨 내용인지도 모르고 이해도 안가고 뭐를 하니까 에러는 또 뜨고...

error: Pulling is not possible because you have unmerged files.
hint: Fix them up in the work tree, and then use 'git add/rm <file>'
hint: as appropriate to mark resolution and make a commit.
fatal: Exiting because of an unresolved conflict.

 🔍 문제 원인
- 로컬 브랜치와 원격 브랜치(origin/master)가 다른 변경 사항을 포함하고 있음.
- git pull origin master를 실행했지만 자동 병합(Merge)이 실패함.(ㅇㅈ 분명 이걸 했는데 저렇게 떴다 )
- 현재 일부 파일이 충돌(Unmerged) 상태라서 Git이 병합을 완료할 수 없음.
- 해결하지 않으면 git push도 할 수 없음.

 

✅ 해결 방법 (충돌 해결 후 푸시)
- 충돌 파일 확인 
- git status

both modified:   pages/member.html
both modified:   assets/styles/member.css

- both modified는 로컬과 원격에서 동시에 수정된 파일이라는 뜻
- 충돌 파일 직접 수정. 

 <<<<<<< HEAD
로컬에서 수정한 내용
=======
원격에서 수정된 내용
>>>>>>> origin/master

✏️ 해결 방법

- 충돌을 직접 수정 (어떤 코드가 맞는지 선택하거나 병합).
- 충돌 표시(<<<<<<<, =======, >>>>>>>)를 삭제.
- 파일을 저장.
    
해결 방법을 찾아봤지만 이해가 안가서 그냥 로컬에 있는 걸 지우고 다시 clone 했다

 브랜치 목록 확인 하는 이유

- 브랜치란 독립적인 작업 공간으로, 기존 코드에 영향을 주지 않고 새로운 기능 개발이나 버그 수정을 할 수 있다
- 확인하는 이유
현재 사용중인 브랜치, 병합되지 않은 브랜치, 오래된 브랜치를 파악하기 위해.
> 브랜치 목록 확인 명령어
git branch → 로컬 브랜치 목록 확인
git branch -r → 원격 브랜치 목록 확인
git branch -a → 전체 브랜치 목록 확인
git branch -a  # 모든 브랜치 확인

 

📌 업데이트 확인 방법

1️⃣ 업데이트가 적용된 증거
Fast-forward → 원격 저장소(origin/master)의 변경 사항이 로컬에 반영됨
Updating 870563a..0005f94 → 최신 커밋(0005f94)까지 업데이트됨

최신 코드가 로컬에 적용된 상태! 🚀
많은 시행착오를 겪은 결과 이제는 무식하게 로컬에 있는거 지우고 다시 클론따고 하는 짓 안한다.

 

# 상세페이지 만들기

와이어프레임

상세페이지 와이어 프레임

- 등록 페이지에서 정보를 입력하면 Firebase Firestore에 저장됨
- 등록된 멤버는 main.html에 멤버 카드에 뜸
- 멤버 카드를 누르면 멤버의 상세 페이지로 이동 

코드 리뷰

1. Firebase Firestore에서 멤버 데이터 불러오기
🔹 loadMember() 함수 분석

async function loadMember() {
    const urlParams = new URLSearchParams(window.location.search);
    const memberId = urlParams.get('id');

-  `window.location.search` - 현재 페이지 URL의 쿼리 문자열(? 뒤의 부분)을 가져옴

- .get('id') - URL에서 id 값을 가져옴

🔹 Firestore에서 특정 멤버 데이터 조회

const docRef = doc(db, 'member', memberId);
const docSnap = await getDoc(docRef);

 

- memberId에 해당하는 문서를 가져와
- doc(db, "member", memberId)는 member 컬렉션에서 특정 id의 문서를 참조

 

getDocs VS getDoc
전자는 컬렉션에서 여러 문서를 가져오기 위해 사용하고 후자는 단일 문서를 가져올 때 사용한다. -> id 값을 기반으로 단일 멤버 데이터를 불러와야 하기 때문에 getDoc

🔹 가져온 데이터 웹페이지에 표시하기

if (docs.exists()) {
    const data = docs.data();
    console.log("불러온 데이터:", data);  // 데이터 확인

    $('#img').attr('src', data.img || 'default-image.jpg');
    $('#name').text(data.name || '이름 없음');
    $('#mbti').text(data.mbti || 'MBTI 없음');
    $('#contact').text(data.contact || '연락처 없음');
    $('#email').text(data.email || '이메일 없음');
    $('#introduce').html(data.introduce || '소개 없음');
    $('#blog').attr('href', data.blog || '#').text(data.blog || '블로그 없음').attr('target', data.blog ? '_blank' : '');

🔹 기술 리스트 동적 업데이트

$('.skillList').empty();  
if (Array.isArray(data.skillList)) {
    data.skillList.forEach(skill => {
        $('.skillList').append(`<span class='tag'>${skill}</span>`);
    });
}

- empty()를 하지않으면 Firestore에서 데이터를 불러올 때마다 
기존 리스트에 계속 추가돼서 중복방지를위해 초기화함 

 

내가 맡은 페이지와 최종 결과물

https://youtu.be/zxnkf6UN9kc?si=_8SgAto1qAGhOkhR

헬멧조 짱짱 31조 모두 고생 많으셨습니다!

후기

팀원들의 도움을 많이 받은 덕분에 완성할 수 있었다. 
첫주라 뒤집어지는 생활 패턴을 고치지 못했던 걸 배려해주셔서  정신 차리고 누가 되지 않도록 하려고 했다.
짧은 기간인데도 서로 공유도 많이하고 완성한 이후에 다른 분들이 작업한 코드 리뷰도 들을 수 있어 그점도 좋았다. 
처음 팀원들이라 더 정이 갔는데 일주일만에 팀이 바뀐다니 구라같다. 내향인 파이팅