- 기본적으로 nodeJS를 설치하는 프로젝트의 경우
node_modules폴더를 설치한다.node_modules에는 자바스크립트 라이브러리들이 들어가 있으므로 무척 용량이 크다. - package.json, package-lock.json 파일이 있다면
node_modules에 설치된 라이브러리를 동일하게 설치할 수 있기 때문에node_modules폴더를 git에 업로드하지 않는다. - github와 같은 원격 저장소에 업로드하지 않기 위해서는
.gitignore를 만들어 지정한 폴더 또는 파일이 git에 의해 커밋되지 않도록 만들어 주어야 한다.
dist는 빌드된 파일이 위치하는 폴더이다. 빌드된 파일은 폰트 파일이나 이미지 파일 또는 자바스크립트 라이브러리를 포함하기 때문에 용량이 클 수 있다. 개발할 때 사용한 파일 및 폴더가 복사 또는 변형이후 복사 되는 방식으로dist폴더에 위차하게 되어 프로젝트 폴더의 용량이 쉽게 2배가 되어 버린다. 따라서 빌드된 결과 파일을 공유해야 하는 경우가 아니라면 깃의 추적을 하지 않는 편이 좋다.- 하지만 디자이너와 협업을 하는 등의 빌드된 결과를 공유해야 하는 경우가 있기 때문에 때때로 빌드된 결과를 깃허브와 같은 원격 저장소에 올리기 위해서 빌드 결과물을 깃으로 추적할 필요가 생긴다.
dist폴더는dist폴더를 컴퓨터의 공개 폴더로 하거나dist폴더 내의 파일 및 폴더를 컴퓨터의 공개 폴더로 이동했을 때 컴퓨터의 공개 폴더로 네트워크 망을 통해 브라우저로 접속을 하면 공개 폴더의 html을 브라우저가 읽고 페이지를 브라우저에 띄워준다.dist폴더는 공개 폴더가 될 수도 있지만,dist에 빌드 되는 파일은 개발 모드와 프로덕션 모드 두 가지 방식으로 존재할 수 있다.yarn run watch또는yarn run build:dev로 빌드한 경우 개발 모드로 빌드가 되며,yarn run build또는yarn run build:prod로 빌드하면 프로덕션 모드로 빌드가 된다.dist폴더는 개발 모드와 프로덕션 모드가 공존하므로 깃으로 추적할 때 빌드 결과물의 코드 변경이 잦기 때문에 깃으로 추적할 때 용량의 증가 폭이 커지므로dist폴더를 깃으로 추적하는 것은 좋지 않다.- 따라서 프로덕션용으로 완성된 결과물을 공유할 때만 깃으로 추적하기 위해서
dist폴더는 깃의 추적에서 배제하고 별도로public폴더를 만들어 빌드된 결과물을 옮긴 후 깃으로public의 파일을 저장한 후 원격 저장소로 올리는 방법을 사용한다.
- docs 폴더는 github page에 올릴 html, css, js 파일을 올리는 곳이다. 깃허브 페이지에서는 이 폴더를 웹 서버의 공유 폴더로 한다.
- 깃허브 페이지에 웹 서버를 등록하기 위해서는 리포지토리의 하나의 브렌치를 지정하여 root 폴더 또는 docs 폴더에 정적 파일 (html, css, js, img, font...) 등을 올려야 한다. root 폴더에는
.gitignore과 같은 파일을 두며 이런 파일은 웹에 공개하지 않는다. 따라서 docs 폴더를 만들어서 정적 파일을 넣고 공개하지 않을 파일은 root에 두는 방식을 사용한다. - 빌드된 폴더 dist를 깃허브 페이지에 올리기 위해서는 폴더 이름을 docs로 만들어야 깃허브 페이지에 적용이 된다. 따라서 빌드된 dist 폴더를 docs 폴더로 변경하여 깃허브 페이지를 적용하는 브렌치에 올려 docs 폴더를 기준으로 웹 페이지를 생성한다.
- docs 폴더는 소스 코드와는 별개로 빌드된 파일 및 폴더만을 올리는 브렌치에서 관리를 하는데, 이는 빌드된 파일은 코드 뿐만 아니라 이미지 및 라이브러리 소스 등을 포함하므로 용량을 많이 차지하므로 개발하는 소스코드의 이력과 관계 없이 관리하여 커밋 이력의 삭제를 쉽게 하기 위해서이다. 커밋 이력도 용량을 차지하기 때문에 브렌치의 모든 커밋 이력을 날리는 방식으로 쉽게 용량 관리를 할 수 있다. 따라서 docs 폴더는 소스 코드 개발 브렌치와 별도로 관리하기 위해 깃의 추적에서 배제한다. 물론 빌드된 파일을 올리는 브렌치에서는 깃으로 추적을 해서 깃허브와 같은 저장소에 올리도록 한다.
- 맥북의 OS인 OSX를 사용하면 자동으로 폴더 내에
.DS_Store파일이 생성되는 경우가 있다. 이 파일은 폴더의 설정을 담고 있는 파일로 폴더 내의 파일의 아이콘 위치, 파일 및 폴더의 보기 방식, 등등의 폴더의 메타 데이터 설정을 저장하는 파일이다. - 소스코드와 관계 없는 폴더의 메타 데이터 설정은 소스코드와 관계가 없으며 대부분의 경우에서 공유할 필요가 없다. 또한 동일한 소스코드라도 폴더의 파일 보는 방식은 사용자마다 다르게 설정하기 때문에 공통으로 갖고 있어야 하지 않다. 깃으로 파일을 추적하면 서로 다른 환경에서 동일한 파일을 갖기 때문에 각 환경마다 달라지는 파일의 경우 충돌이 발생하게 된다. 따라서
.DS_Store는 깃의 추적에서 배제한다. .DS_Store는 하위 폴더 어디에서든 만들어질 수 있기 때문에 모든 하위 폴더에서 배제해야 한다. 이를 위해서**/.DS_Store디렉토리의 폴더 깊이에 관계 없이 재귀적으로 적용한다는**를 사용하여.DS_Store파일을 배제하도록 한다.
- 프로젝트 폴더 최상단에
.gitignore이름의 파일을 만든다. - 파일 내부 코드에
node_modules를 적어 준다. 만약 비주얼 스튜디오 코드에서 실행하고 있다면,.gitignore파일을 저장하는 순간 폴더 및 파일 리스트를 보여주는 탐색기란에node_modules폴더의 색에 투명도가 들어간 연한 색이 되는 것을 확인할 수 있다.
.gitingore
node_modules
dist
docs
**/.DS_Store
.gitignore파일 안에 나열된 파일 또는 폴더는 git에 의해 추적이 되면 안 되지만, 추적에서 제외할 리스트를 설정한.gitignore파일은 git에 의해 추적이 되어야 원격 저장소에서 이 코드를 받아 사용하는 사람들도 동일한.gitignore의 설정을 통해 git에 추적하지 말아야 할 파일 및 폴더를 추가하지 않을 수 있다.
git add .gitignore
git commit -m ".gitignore 설정으로 node_modules 폴더를 추적하지 않도록 설정"