y.developer
[TIL] Day 60 .next가 .gitignore에 적용되지 않을 때 (Next.js) 본문
2023.12.28 목
git push 소요시간이 너무 길어지는 현상
팀프로젝트를 진행하던 중 git push를 하는데 소요되는 시간이 너무 길고, 파일도 너무 많다는 것을 알게되었다.
문제의 원인을 파악해보니 초반 프로젝트 세팅 때 .gitignore를 설정하는 것을 빼먹고 git push를 진행했더니 push 소요 시간이 너무 길어졌던 것이다.
yarn dev나 yarn build 시 생성되는 .next 폴더는 Next를 구동하기 위해서 빌딩되는 파일로서 용량이 상당하다.
git hub에 올리는 것에 큰 부담이 있을 법한 용량이며, 팀원들이 pull 받았을 때 yarn dev 또는 yarn build를 통해서 충분히 생성 가능하므로 .next 폴더를 제외하고 push를 하는 것이 좋다.
.next를 .gitignore에 추가했음에도 작동하지 않는 이유
.next를 .gitignore에 넣지 않았다는 사실을 인지한 후 바로 .next를 추가하여 github에 올라가는 것을 방지했다.
하지만 계속 해당 명령을 무시하고 계속해서 git hub에 push되는 현상이 발생했다.
이는 .gitignore 파일 생성 전에 이미 git 원격저장소에 .next 디렉터리를 커밋되어서 캐싱된 파일들이 잔존하기 때문이다.
해결방법 : git 캐시를 지우자
우선 .gitignore에 .next를 추가되었는지 확인한다.
아래 명령어를 통해서 git에 잔존하는 캐시들을 삭제한다.
그리고 최종적으로 push를 진행한다.
$ git rm -rf --cached .
$ git add .
$ git commit -m "커밋 메세지"
$ git push
해당 순서대로 실행하면 로그에 엄청나게 많은 파일들이 삭제된 것을 확인할 수 있다.
rm '.DS_Store'
rm '.eslintrc.js'
rm '.gitignore'
rm '.next/build-manifest.json'
rm '.next/cache/webpack/client-development/0.pack'
rm '.next/cache/webpack/client-development/1.pack'
rm '.next/cache/webpack/client-development/2.pack'
rm '.next/cache/webpack/client-development/3.pack'
rm '.next/cache/webpack/client-development/4.pack'
rm '.next/cache/webpack/client-development/5.pack'
rm '.next/cache/webpack/client-development/6.pack'
rm '.next/cache/webpack/client-development/7.pack'
rm '.next/cache/webpack/client-development/8.pack'
rm '.next/cache/webpack/client-development/index.pack'
rm '.next/cache/webpack/client-development/index.pack.old'
...
push 후 커밋한 내역을 확인해보면 불필요하고 무거운 파일들을 삭제되고,
공유해야 하는 필수적인 파일들만 정리되어 올라가있는 것을 볼 수 있다.
Pro Tips
파일 삭제 명령어 차이
로컬 파일과 원격 저장소 모두 삭제
$ git rm -r [파일명]로컬에는 파일을 그대로 내버려두고, 원격 저장소의 파일만 삭제
$ git rm -r --cached [파일명]rm rdf의 뜻
rm : 명령어. remove. 파일 또는 디렉터리를 삭제
-r : 옵션. recursive. 재귀적으로 모든 하위 디렉터리 및 파일 삭제
-d : 옵션. directory. 디터리에 대한 조작을 수행
-f : 옵션. force. 강제로 삭제
rm -rdf node_modules
rm -rdf .next
rm yarn.lock
yarn.lock 파일은 보통 텍스트 파일이며, -rdf 옵션을 사용하지 않아도 rm 명령어로 삭제할 수 있다.
일반적으로 파일을 삭제할 때는 -r이나 -f 옵션을 사용할 필요가 없다.
따라서 rm yarn.lock 명령어로도 yarn.lock 파일을 삭제할 수 있는 것이다.
rm 명령어에 -r 옵션을 사용하는 것은 디렉토리를 삭제할 때 필요한 것이며, 파일을 삭제할 때는 필요하지 않다.
.gitignore에 추가하는 대표적인 파일들
node_modules
.next
.env
.env.local
하루를 마치며
프로젝트나 협업을 진행하면서 늘 예상하지 못한 에러를 만나지만 늘 적응이 되지 않는다.
새로운 종류의 에러가 뜨며, 어떤 것은 도대체 어디가 원인이며, 어떻게 변수를 줄여가며 디버깅을 해야할 지 감이 잡히지 않는다.
위와 같은 경우는 꽤 빠르게 문제를 파악하고 해결했던 케이스다.
하지만 아직 해결하지 못한, 어쩌면 내 코드가 아닌 시스템 상 혹은 호환성에 문제로 보이는 오류들이 있다.
최근 들어서 다시 느끼는 거지만, 너무 최신 버전 또한 좋은 경험만들 주는 것은 아니다.
혁신적인 최신 기술이 큰 이점을 주기도 하지만, 그와 반대로 개인이 해결할 수 없는 호환성 문제라든지 학습을 하기 위한 충분한 자료가 없다든지와 같은 문제점도 있다.
이전의 것과 새로운 것의 차이점을 분명하게 알고 적절한 시기에 기술을 잘 도입할 수 있게 하려면, 수많은 경험을 통한 현명한 선택이 필요할 것 같다.
오늘의 한 줄
에러 속에 박혀있는 보물을 찾자