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