[NWD Frontend boilerplate] Create .gitignore

출처 : github.com/NetworkDefines/nwd-front-boilerplate

 

 

---

.gitignore 파일 추가

 

.gitignore 파일에 작성한 파일이나 폴더는 commit 을 할 때, 제외됩니다. 따라서 프로젝트를 실행하는 데에 불필요한 파일이나 폴더를 등록하면 됩니다. github 사이트에서는 각각의 언어에 따라서 .gitignore 템플릿을 제공하고 있습니다.

 

아래 그림을 보시면 Add .gitignore 부분을 체크하면 하단에 .gitignore 파일의 종류를 선택할 수 있는 칸이 나타납니다. React 프로젝트를 학습하기 위해서는 Node JS 형태의 템플릿을 추천합니다.

 

 

이어서, 저희 회사에서 만든 프론트엔드 템플릿에 사용한 .gitignore 파일을 분석해 보겠습니다.

 

# dependencies
node_modules/
yarn.lock
yarn-error.log
package-lock.json

# os
.DS_Store

# production
dist/

# env
.env
.env.dev
.env.local
.env.test

# testing
/coverage

# log
*.log*

 

 

---

node_modules 폴더

 

Node JS 기반에서 실행되는 프로젝트는 실행하기 전에 프로젝트에서 사용한 패키지들을 설치해야 합니다.

 

프로젝트를 설치하기 위해서는 npm 또는 yarn 패키지 관리 환경에 따라서 설치하는 명령어를 입력해 주어야 합니다.

(npm 을 사용하는 경우에는 npm install 을 입력하고, yarn 을 사용하는 경우에는 yarn install 을 입력해줍니다.)

 

설치가 완료되면 node_modules 라는 폴더가 생성되면서 그 안에 설치된 패키지들이 들어가게 됩니다.

 

 

 

yarn.lock / package-lock.json 파일

 

yarn.lock 파일과 package-lock.json 파일은 패키지 잠금을 위해서 사용되는 패키지 잠금 파일입니다. 두 파일은 각각 yarn 패키지 관리자를 사용하느냐 npm 패키지 관리자를 사용하느냐에 따라서 다르게 생성됩니다.

 

즉, yarn 을 사용한다면 yarn.lock 파일이 생기고, npm 을 사용한다면 package-lock.json 파일이 생긴다는 것입니다. 이제 패키지 잠금 파일이란 어떤 역할을 하는지 궁금할 것입니다. 예를 들어 보겠습니다.

 

A 개발자가 리액트 1.0 버전을 사용하고, B 개발자가 리액트 2.0 버전을 사용해서 개발을 했습니다. 이런 경우에 A 개발자가 다시 B 개발자의 코드를 실행하였을 때 에러가 발생할 수 있습니다. 따라서 모든 팀원들이 같은 환경에서 개발하기 위해 패키지 버전을 고정해 줄 필요가 있는데, 잠금 파일은 이런 역할을 해주는 파일입니다.

 

A 개발자가 처음으로 패키지를 설치하여 Commit을 했다면, B 개발자가 잠금 파일과 코드를 같이 받아서 개발을 합니다. 리액트 최신 버전이 아무리 10.0이더라도 잠금 파일에 따라서 1.0 버전을 사용하게 됩니다. 버전을 올리는 명령어를 입력하지 않는 이상 이 버전은 그대로 유지되기 때문에 모든 팀원들이 동일한 개발환경에서 개발을 할 수 있습니다.

 

따라서 yarn.lock / package-lock.json 파일은 .gitignore 안에 들어가서는 안되며, 저장소에서 꼭 함께 커밋되어야 합니다.

 

삭제 요청

github.com/NetworkDefines/nwd-front-boilerplate/commit/adaf145544c490e3f011bb6f0ac68a67caba67a1#r49750775

 

참조

www.daleseo.com/js-package-locks/

 

 

 

yarn-error.log / *.log* 파일

 

일반적으로 에러나 디버그에 관한 로그파일들을 의미합니다. 이 파일은 디버깅을 하는 경우에만 유용하게 쓰이기 때문에 .gitignore 에 추가하여 commit 하지 않고 작업하도록 합니다.

 

참조

stackoverflow.com/questions/42592168/should-i-add-yarn-error-log-to-my-gitignore-file#:~:text=build%20your%20project.-,The%20yarn%2Derror.,not%20even%20exist%20at%20all.

 

 

 

.DS_Store 파일

 

Desktop Services Store 의 약자로 애플에서 정의한 파일 포맷이고, 애플의 맥 OS X 시스템이 폴더에 접근할 때 생기는 해당 폴더에 대한 메타데이터를 보관하고 있는 파일입니다. 즉, 맥에서 폴더마다 들어있는 메타 데이터 파일이라고 볼 수 있습니다!

 

참조

chp747.tistory.com/54

 

 

 

dist 폴더

 

이 폴더의 이름은 distribute(배포) 의 줄임말입니다. 즉, 프로젝트를 배포하기 위한 파일들이 들어가는 폴더입니다. 그렇기 때문에, 저장소에서 직접 관리할 필요가 없기 때문에 .gitignore에 추가합니다.

 

 

 

.env / .env.** 파일

 

Node JS 환경에서 실행되는 프로젝트는 .env 라는 이름의 파일이 존재하면 환경변수처럼 소스코드로 가져와서 사용할 수 있습니다. 여기에 들어가는 정보는 키 값이나 데이터베이스 정보 같은 보안과 밀접한 관련이 있는 정보이기 때문에 저장소에서 관리하면 위험합니다. 따라서, .gitignore 파일에 추가해서 관리합니다.

 

 

 

coverage 폴더

 

javascript 테스트 프레임워크인 jest를 사용하는 경우, 테스트 되고있는 코드와 아닌 코드의 비율을 알려주는 --coverage 옵션을 추가하여 테스트할 때 생성되는 폴더입니다. 따라서 저장소에서 관리될 필요가 없기 때문에 .gitignore 에 추가해서 관리합니다.