Git 기초 설정 및 협업 시 주의사항 (gitignore)

포켓몬 도감 개인과제 최종 배포를 앞두고 연습삼아 vercel에서 배포테스트를 해보았다.

 

vercel에서 배포할 때는 main 브랜치의 커밋 내용이 적용된다는 걸 깨달았다.

따라서 최종으로 만들어두었던 redux-toolkit 브랜치와 main의 PR을 진행하였다.

모자이크한 부분은 내 이름이자 github 이름..

 

🚨 문제 상황

 

PR 후 배포 사이트를 확인해보니 메인 페이지의 타이틀로 두었던 이미지 파일이 뜨질 않았다. 소위 말하는 엑박이 떴다.

이미지가 로컬에만 있는 게 문제일까? 싶어서 vscode를 확인해보니 main 브랜치에 파일이 아예 첫 커밋 상태였다.

github에서 분명 PR 진행했는데?!

 

그렇다는 것은 원격 브랜치와 로컬 브랜치의 내용이 다르다는 것인데..

여기서 문제가 생겼다.

원격 main 브랜치를 pull 한다는 걸, redux-toolkit 브랜치를 pull 해버린 것이다..

(이때 생각으로는 원격 main 브랜치에 PR 적용이 안 된 줄 알고..)

 

그러고는 터미널에 뜬 것이 .DS_Store을 삭제해야 한다는 메세지였다.

그것을 해결하고자 구글링으로 찾은 삭제 명령어를 실행하였다.

[.DS_Store 파일 삭제 명령어]
find . -name .DS_Store -print0 | xargs -0 git rm --ignore-unmatch -f

 

.DS_Store란?

• DS_STORE 파일이란 Desktop Services Store의 약자로, 애플에서 정의한 파일 포맷입니다.
• 애플의 맥 OS X 시스템이 finder로 폴더에 접근할 때 자동으로 생기는 파일로써, 해당 폴더에 대한 메타데이터를 저장하는 파일입니다.(윈도우의 thumb.db 파일과 비슷합니다.)
• 분석해보면 해당 디렉토리 크기, 아이콘의 위치, 폴더의 배경에 대한 정보들을 얻을 수 있습니다.
• DS_store 파일은 프로젝트와 관련없는 파일이며, git status를 사용했을 때 발견되는 파일이니, github로 넘기지말고 삭제해도 됩니다.
• Mac OS를 사용하다보면 .DS_Store가 자동으로 생성되어 계속 github repository에 업로드되는데, 이것은 수시로 수정될 수 있으므로 github에서 conflict를 발생시킬 수 있습니다.
• 협업 시 윈도우 사용자가 pull 하면 오류를 발생시킵니다.

명령어를 입력하자 Git Graph에 rm '.DS_Store' 이 뜸과 동시에 소스제어 탭에 변경동기화 47↓ 1↑ 이 뜬 것이다..

무서운 마음에 튜터님께 달려가 상황을 설명드렸다.

 

약 1시간의 대화 끝에.. 처음 설정해야 하는 것과 해결하는 것들이 꽤 있었다.

그 내용을 정리해보겠다.

 

 

프로젝트 시작 시, Git 설정

 

📍gitignore 파일

• git에 올라가면 안 되는 파일들을 설정한다.(.DS_Store, node_modules 등)
• gitignore.io 사이트에서 react 입력 후 나오는 내용을 파일에 입력한다.

 

📍이미지파일 설정

• public 폴더 내에 두기
• 코드에 가져올 때는 파일 경로 없이 파일명 그대로 가져온다.

<Title src="main-title-image.png" />

• 파일명은 소문자로, _ or -만 사용
• 띄어쓰기는 오류 폭격기. 절대 금물
• readme에 사용할 이미지는 'readme' 폴더에 따로 담기
  (README.md 파일은 기존 위치 고정)