[Git & GitHub] .gitignore 사용법과 gitignore.io 활용하기

안녕하세요 성조입니다.

이번 포스팅에서 사용될 개발 환경은 vscode를 기준으로 작성됐습니다.

깃허브를 통해서 파일을 공유하다 보면 실제로 업로드하면 안 되는 파일들이 생각보다 많이 존재합니다. 하지만 github를 처음으로 활용하여 협업하는 경우 업로드가 불필요한 파일들을 저장소에 업로드하거나, 업로드를 하면 안되는 키 값들을 입력하여 보안적인 이슈가 있는 경우가 있었습니다.

보안 사고에 대해서 해킹의 수법이 다양해지는 것도 있지만 많은 개발자들이 생기고, 소프트웨어들이 발생되면서 형상관리가 필수적으로 이뤄지기 때문이라 생각됩니다. 실제 스타트업, 중소기업뿐만 아니라 대기업에서도 log에 남긴 key값을 탈취당해서 문제가 발생하는 경우도 있었습니다.

 

github에 중요한 파일을 올리지 않기 위해서 .gitignore 사용 방법을 알아보려고 합니다.

---

.gitignore이란?

위에 언급과 설명한 것과 같이. github에 원치 않는 파일이 commit되는 것을 방지할 때 사용된다.

사용되는 경우를 정리하면 다음과 같다.

 

- 유출되면 서버 보안에 있어서 문제가 발생하는 파일인 경우.

- 용량이 100MB를 넘어가는 경우. (GitHub은 100MB가 넘는 파일을 올리지 못 한다)

- 내려받을 프로젝트에 불필요한 파일인 경우. ([예시] node_modules 같은 파일은 GitHub에 저장하여 공유하는 것이 아니고, package.json 파일을 통하여 node_modules 파일들을 세팅에 맞게 불러온다.) 

 

 

.gitignore 사용 문법

create react를 실행했을 경우.

.gitignore에 자동으로 다음과 같은 파일이 생성된다.

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

 

- 특정 파일을 제외하는 경우.

파일명.확장자

 

- 특정 확장자 파일을 전체 다 제외하는 경우.

*.확장자

 

- 예외처리를 만드는 경우.

!파일이름.확장자

 

- 현재 .gitignore가 있는 폴더 경로에 존재하는 파일을 제외하려는 경우.

/파일명.확장자

 

- 원하는 경로의 하위 폴더 또는 파일들 제외하려는 경우.

폴더/파일.확장자

 

- 원하는 경로 하위 아래에서 원하는 파일들을 모두 제외하는 경우.

폴더/**/파일이름.확장자

 

- 특정 폴더 안에 존재하는 파일들 모두 제외하는 경우.

폴더/

ex) node_module/

 

 

프로젝트 폴더에 .gitignore를 추가했지만 적용이 안되는 경우.

git rm -r --cached . 
git add .
git commit -m "커밋 문구"

 

 

 

 

쉽게 프로젝트에 맞는 .gitignore 만들기

https://www.toptal.com/developers/gitignore

gitignore.io

위 링크를 활용하여 프로젝트에 필요한 파일들이 무엇인지 불필요한 파일은 무엇이 있는지를 조절할 수 있습니다.

 

다음은 위의 링크를 타고 들어가서 react와 node의 키워드를 입력한 모습입니다. 

이후 생성 버튼을 누르면 다음과 같이 나옵니다.

 

예시 코드

# Created by https://www.toptal.com/developers/gitignore/api/react,node
# Edit at https://www.toptal.com/developers/gitignore?templates=react,node

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### Node Patch ###
# Serverless Webpack directories
.webpack/

# Optional stylelint cache

# SvelteKit build / generate output
.svelte-kit

### react ###
.DS_*
**/*.backup.*
**/*.back.*

node_modules

*.sublime*

psd
thumb
sketch

# End of https://www.toptal.com/developers/gitignore/api/react,node

 

vscode 환경에서 적용시킨 .gitignore

위에 작성된 logs 예시는 실제 express or Create React app을 생성할 때 생기는 파일들이다. 이런 파일들을 github에 업로드하면 불필요한 저장소만 들어가며, 다른 저장소에서 내려받을 때 원래 작업했던 값들이 변경될 수 있는 점 때문에 주의하는 것이 좋다.

 

---

포스팅에서 궁금하신 부분이 있다면 언제든 댓글 부탁드리며, 포스팅 외에도 궁금한 부분이 있다면 언제든 댓글 부탁드리겠습니다!

 

감사합니다. 다음 포스팅 때 뵙겠습니다!