[이 포스팅은 Next.js App Router 15 버전 기준으로 테스트를 진행한 후 작성된 글입니다. Next.js App Router의 이전 버전이나 Pages Router 디렉토리 또는 리액트만을 사용한 경우 결과가 다를 수 있습니다.]
이 글은 저의 탐구 과정을 세세하게 기록한 글이고 매우 장황하며 분량이 정말 깁니다.
⚠️ 확실한 정보와 간결한 결론을 얻고자 오셨다면 그 목적에 부합하는 글이 아닐 가능성이 높습니다. ⚠️
Zero-Install이란?
패키지 매니저로 Yarn berry
를 사용한다면 활용할 수 있는 독자적인 기능입니다.
Yarn berry
의 기본적인 pnp(plug'N'play)
기능의 핵심은 의존성을 node_modules
로 관리하지 않는다는 것입니다.
Zero-Install
은 이에 더해 의존성 패키지들을 .yarn/cache
폴더 내의 zip
파일로 관리합니다. 그리고 이를 Git repository
에 포함시킵니다. 이렇게 하면 프로젝트를 새로 clone
한 후 yarn install
명령어를 실행하지 않고도 곧바로 개발을 시작할 수 있다는 이점이 있습니다. 그리고 이러한 기능을 통해 오프라인 환경에서도 의존성 패키지들을 설치할 수 있습니다.
프로젝트에 Zero-Install 적용하기
[Next.js] Yarn berry로 Next.js 프로젝트 시작하기
초기 프로젝트 생성 과정은 위와 동일합니다. 이에 Zero-Install
의 사용을 위한 추가적인 설정을 해주면 됩니다.
1.
gitignore
에 used Zero-Install
부분만 남기기
처음 프로젝트 생성할 때 .gitignore 파일에 이 부분을 추가해야 한다고 했었죠?
### yarn ###
# used Zero-Install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
# unused Zero-Install
.yarn/*
!.yarn/patches
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
.pnp.*
여기서 used Zero_Install
에 해당하는 부분만 사용하기로 합니다.
### yarn ###
# used Zero-Install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
아래에 있는 unused Zero_Install
부분은 주석처리해 주세요.
2.
.yarnrc.yml
파일에 enableGlobalCache:false
추가하기
지난 프로젝트 생성기에서 이 부분 기억하시나요?
여기에 다음과 같은 내용을 추가해 줍시다.
enableGlobalCache: false
이 내용이 추가되어야 yarn install
시 .yarn
폴더에 cache
폴더가 생성됩니다.
그리고 생성된 cache 폴더에는 의존성 관련 zip파일들이 잔뜩 들어있습니다. Zero-Install
은 이러한 zip
파일들을 git
원격저장소에 업로드합니다. (위의 gitignore
에서 !.yarn/cache
는 .yarn/cache
를 gitignore
하지 마라(=깃에 올려라)라는 뜻입니다.)
자 이제 Zero Install
을 테스트해 보려면 원격 저장소에 올린 후 git clone
하여 확인해 봐야겠죠?
Git LFS 에러 발생과 해결 과정
그런데 문제가 발생합니다.
저 같은 경우 vscode
의 source control
로 commit
하려는데 이런 에러가 발생하더군요. 이상하다 싶은 점은 모든 branch
에서 더 이상 pull
할 것이 없었습니다.
그래서 git bash
에서 commit
을 시도해 보았습니다.
내용을 보아하니... 파일 중 무언가가 100mb
를 초과했다는 내용 같습니다.
좀 찾아보니 git lfs
라는 기능을 사용해서 용량이 큰 파일을 track
(추적)하게 하면 된다고 하는군요.
먼저 git lfs
를 설치합니다.
git lfs install
그리고 git lfs
가 추적(track
)할 파일들을 지정해 줍니다.
(그런데 이렇게 하면 저 경로 내의 모든 zip
파일이 추적되는데 추후에 이로 인해 난감한 상황이 발생할 수 있습니다. 그 이유는 글을 쭉 읽어보시면 아시게 될 겁니다.)
git lfs track "cache/*.zip"
이렇게 하면 .gitattributes
파일 안에 git lfs
가 추적할 파일들의 경로가 등록됩니다.
그리고 다음에 이 명령어를 칩니다. 그러면 정말로 git lfs
가 해당 파일들을 track
(추적)합니다.
git add .gitattributes
그리고 원격 저장소에 git push
하면...
에러가 뜨는군요.
내용을 보아하니 git lfs
가 작동하고 있는 것 같긴 한데 그럼에도 Github
의 파일 크기 제한인 100mb
를 초과한다고 나옵니다. 아니 아까 그래서 등록하라고 해서 등록한 건데..??
어떤 파일이 원인인가 싶어서 확인해 보겠습니다.
맨 위의 2개 파일이 에러의 원인이었습니다.
해결책을 찾아보니 저 두 파일에 해당하는 추적을 제거했다가 다시 하나씩 지정해 주면 된다고 하더군요.
그러한 방식을 시도해 보았는데 잘 되지 않다가 아예 다른 브랜치를 파서 위의 과정을 다시 시도해 보니 해결되었습니다.
그런데 브랜치가 다르다고 연동된 깃이 달라지는 것도 아닐 텐데 왜 해결된 건지 지금도 모르겠습니다.
예상과는 다른 결과
그런데 Zero-Install
의 이점을 기대하고 있었는데 아주 의외의 결과를 마주했습니다.
일단 Zero-Install
방식을 적용한 프로젝트는 git clone
할 때 상대적으로 매우 긴 시간(20초 내외)이 걸렸습니다. Next.js
의 가벼운 초기 보일러 플레이트 코드 상태에서 수정된 부분이 거의 없었는데도 이러했죠.
(에러 발생 부분의 캡처를 못 해서 그 후 yarn install
해버린 이미지로 올립니다.)
Zero-Install
을 적용한 프로젝트에서도 git bash
에 yarn dev
를 치면 yarn install
을 하라는 에러 메시지가 출력되는 것이었습니다.
Zero-Install
을 적용한 프로젝트나 그렇지 않은 프로젝트나 git clone
후 yarn dev
를 하면 yarn install
을 해야 한다는 에러가 발생하는 것입니다. 왜 yarn install
을 하라고 하는 것이죠? 분명 yarn zero-install
은 클론 후 yarn install
을 하지 않아도 되는 장점을 누리기 위해 사용하는 것 아니었습니까?
아래는 Zero-Install
을 적용하지 않은 프로젝트의 yarn install
시의 이미지입니다.
보시다시피 별 차이가 없습니다. 과정뿐만 아니라 속도에 있어서 유의미한 차이도 보이지 않네요.
본격적인 Zero-Install 비교 테스트
아예 비교 테스트를 좀 더 구체적으로 해보기로 했습니다.
(방금 전의 테스트는 기존 프로젝트 폴더와 관련된 캐시 등이 어떤 영향을 끼친 것일 수 있기에 아예 git clone
부터 시작해서 좀 더 영향을 받지 않은 배경에서 테스트해보려고 합니다.)
1. Zero-Install
이 적용된 상태인 remote repository
(원격 저장소)의 project
를 used
폴더에 clone
해둡니다.
2. remote repository
(원격 저장소)의 projectr
를 Zero-Install
을 사용하지 않는 코드로 변경한 후 unused
폴더에 clone
해둡니다.
(.yarn/cache
폴더를 삭제하고 .yarnrc.yml
의 enbleGlobalCache: false
옵션을 삭제해 주고 gitignore
의 내용 중 unused Zero-Install
부분이 적용되게끔 하면 됩니다.)
어차피 테스트는 local
환경에서만 진행할 것이라 굳이 다른 repository
를 만들지 않고 이런 방식으로 해도 괜찮을 것 같았습니다. (근데 나중에 알고 보니 아니었습니다.) 근데 수정한 내용이 제대로 메인 브랜치에 적용이 안 되거나 하는 문제가 발생했었습니다. 어찌어찌 해결하긴 했습니다.
하나는 Zero Install
을 적용한 프로젝트입니다. (프로젝트 폴더명 used, real-used)
지금부터 Zero-Install project
라고 부르겠습니다.
다른 하나는 Zero Install
을 적용하지 않은 프로젝트입니다. (프로젝트 폴더명 unused)
지금부터 Non-Zero-Install project
라고 칭하겠습니다.
(테스트를 여러 번 진행해 본 거라 폴더명이 중간에 바뀌는 부분used -> unused
이 있습니다. 하지만 내용은 동일합니다.)
첫 번째 의문점. yarn install은 필수적인가?
이 부분이 바로 제 첫 번째 의문입니다.
Zero-Install project
인데도 yarn install
의 선행 없이는 yarn dev
가 불가능합니다.
두 번째 의문점. 오프라인 환경에서 차이가 있는가?
다음은 Zero-Install-project
에서 네트워크 연결이 되어있는 상태에서 yarn install
을 한 경우입니다.
그리고 하단의 이미지는 Zero-Install project
에서 네트워크 연결을 끊고 yarn install
을 한 경우입니다.
네트워크 연결이 끊긴 상태에서도 yarn install
이 됩니다. 다만 걸리는 시간이 확연하게 차이 나는군요.
2초대(0m2.286s) VS 8초대(0m8.535s) 의 결과가 보입니다.
여기서 또 문제는 Non-Zero-Install project
에서도 동일한 결과를 보여주었다는 것입니다.
(이 부분은 캡처를 못 해놓았는 데 걸린 시간 자체도 거의 유사했습니다. (여기서도 2초대 VS 8초대))
또다시 실망스러운 테스트 결과
이러한 결과를 보니까 더더욱 의문이 들었습니다. git clone
후 yarn install
시의 차이도 전무해. 오프라인 환경에서도 똑같은 양상을 보여. 그런데 git clone
할 때 시간은 5배가 넘게 걸려. 그러면 이 Zero-Install
이라는 기능을 사용함에 있어서 아무런 유인가가 없는 것 아닙니까? 그렇다면 이러한 아름답지도 않고 무용한 기능은 왜 존재하는 것입니까?
이에 대한 추가적인 고찰
1. Zero-Install
적용이 제대로 안 된 것일까?
저도 처음에 이 생각이 들었는데 이 두 개의 프로젝트는 각각 처음 git clone
시 걸리는 시간이 너무 확연하게 차이가 났습니다. (used
는 20초
가까이, unused
는 3초
이내) cache
폴더에 있는 zip
파일도 분명히 가져오고 있으니 Zero-Install
이 적용된 것이 맞을 텐데 이런 결과를 마주하니 황당했습니다.
2. Zero-Install
도 사실 yarn install
과정이 필요한 건가?
그러니까 yarn install
을 할 때 성능상의 이점이 있는 것을 yarn install
이 필요 없다는 것처럼 표현만 한 거고 어쨌든 yarn install
을 해줘야 하는 건가?라는 생각도 떠올랐습니다.
node_modules로부터 우리를 구원해 줄 Yarn Berry
node_modules로부터 우리를 구원해 줄 Yarn Berry
토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다.
toss.tech
(Zero-Install로부터 저를 구원해 줄 무언가는 어디 있습니까?)
토스 기술 블로그의 기사에서 발췌했습니다. (혹시 이러한 발췌가 문제가 될 소지가 있다면 댓글 부탁드립니다.)
분명 yarn install
을 실행하지 않아도라고 명시되어 있습니다.
3. 별다른 의존성 추가가 없는 가벼운 최초 생성된 프로젝트를 테스트에 활용해서 그런가?
이는 1번(왜 yarn install
이 필요한가?)에 대한 답은 되기 어렵지만 2번(왜 오프라인 환경에서의 차이가 없는가?)을 부분적으로 설명해 주는 답이 될 가능성은 있습니다. 저는 Next.js
프로젝트 생성 후 추가적인 라이브러리 설치 없이 최초 생성된 보일러 플레이트 코드 그대로에서 텍스트 요소만 수정하여 테스트에 활용했습니다. 뚜렷한 차이점을 보여주지 않는 이유가 혹시 이렇다 할 의존성 라이브러리들이 설치되어 있지 않기 때문이 아닐까 싶었습니다.
추가적인 테스트에서 목격한 의외의 현상
그러다 각 프로젝트가 cache
를 어디서 참조하는지가 궁금해 확인해 보았습니다.
yarn config get cacheFolder
used Zero-Install
unused Zero-Install
그렇습니다. Zero-Install project
에서는 프로젝트 내부의. yarn/cache 폴더에서 캐시를 참고하고 있었고
Non-Zero-Install project
에서는 완전히 다른 폴더 (아마도 Yarn
의 자체 폴더)에서 캐시를 참조하고 있었죠.
근데 이것 자체는 너무 당연한 것이라 그렇게 놀랄만한 건 없었습니다.
Non-Zero-Install project
에서 참조하는 Global Cache
를 관리하는 폴더/Yarn/Berry/cache
에 가봤습니다.
그리고 이 폴더를 켜놓고 저 cache
폴더도 삭제해 보면서 테스트를 진행하던 중에 유의미한 결과를 목격합니다.
● Non-Zero-Install project 테스트
이 프로젝트는 Non-Zero-Install project
입니다.
(이미지를 보시면 .yarn/cache
폴더가 없다는 것을 확인하실 수 있습니다.)
Global Cache
를 관리하는 폴더인 캐시 폴더가 /Yarn/Berry/cache
이 경로에 존재하고 있는 상태입니다. 이 상태에서 네트워크 연결을 끕니다.
그리고 yarn install
을 실행하면 이미지와 같이 정상적으로 yarn install
이 의존성들을 설치합니다.
그런데 저 Global Cache
를 참조하는 폴더/Yarn/Berry/cache
를 삭제하고 네트워크 연결이 끊긴 상황에서 yarn install
을 실행하면
에러가 발생합니다.
독자의 예상 질문 : 어 이미지에 /Yarn/Berry/cache
폴더가 있는데요?
이 폴더는 방금 yarn install
명령어를 실행해서 생긴 것이고 명령어를 실행하기 전까지는 없었습니다. 제가 삭제했거든요.(비록 에러가 발생해 실패했더라도 cache
폴더는 저렇게 생성됩니다. 물론 제대로 된 cache
폴더가 생성된 것이 아니라서 다시 yarn install
을 해도 에러가 발생합니다.)
만약의 네트워크가 연결되어 있다면 저 Berry/cache
폴더가 없어도 yarn install
이 정상적으로 실행됩니다.
(제가 yarn install
을 한 후의 Global Cache
폴더 생성이 완료된 상황의 이미지를 보여드려서 혼란을 드리는 것 같군요.)
● Zero-Install project 테스트
방금까지는 Non-Zero-Install project
의 경우였고 이번에는 Zero-Install project
를 보겠습니다.
(이미지를 보시면 이번에는 .yarn/cache
폴더와 그 안의 zip
파일들이 있다는 것을 확인하실 수 있습니다.)
Zero-Install project
는 네트워크가 끊긴 상황에서 /Yarn/Berry/cache
라는 글로벌 캐시 폴더가 존재하지 않는다 하여도 yarn install
명령어가 정상적으로 실행됩니다.
그리고 Berry/cache
폴더 또한 생성합니다. ( .yarnrc.yml
에 enableGlobalCache: false
옵션이 있음에도)
이러한 결과는 무엇을 의미할까요?
처음 진행한 오프라인 환경에서의 테스트 결과가 동일했던 이유
제가 오프라인 환경에서 테스트를 진행했을 때 Zero-Install-project
에서 먼저 yarn install
을 하고, 그다음에 Non-Zero-Install project
에서 yarn install
을 했었습니다. 그리고 둘 다 정상적으로 작동했죠.
맨 처음 진행한 오프라인 환경 테스트에서 둘 다 정상적으로 설치가 된 것으로 보인 이유는 제가 Zero-Install project
를 먼저 테스트하는 과정에서 yarn install
을 이미 실행했기 때문입니다. 이때 Yarn/Berry/cache
라는 글로벌 캐시 폴더가 미리 생성되어 버렸기 때문에 그다음 진행된 Non-Zero-Install project
테스트에서도 이 Global Cache
를 참조할 수 있었고 그로 인해 네트워크 연결이 없는 환경에서도 yarn install
이 실행될 수 있었던 것입니다.
새로 알게 된 plug'N'play의 캐시 참조 메커니즘
Zero-Install project
의 경우에도 yarn install
시에는 .yarn/cache
폴더와 Yarn/Berry/cache
폴더 둘 다 생성한다는 것입니다.
.yarnrc.yml
파일의 enableGlobalCache: false
옵션은 글로벌 캐시를 사용하지 않겠다는 것이지 글로벌 캐시를 생성하지 않겠다는 것이 아닙니다.
그렇다면 제가 반대로 None-Zero-Install project
를 먼저 실행했다면 에러가 발생했을까요? 이에 대한 답은
- 이 프로젝트의 원본 레포지토리는 이 PC에서 생성되지 않았을 것
- 이 프로젝트가 이 PC에서
clone
되는 것이 지금이 처음일 것
이라는 두 가지 전제하에 그렇습니다. 왜냐면 저는 이 테스트 전에도 같은 프로젝트 폴더에서 yarn install
을 여러 번 실행했으므로 이미 Yarn/Berry/cache
폴더는 생성되어 있었을 것이기 때문입니다.
오프라인 환경에서 Zero-Install을 사용한다는 것
Zero-Install project
는 오프라인 환경에서 프로젝트 내부 폴더인 .yarn/cache
를 참조하기에 Global Cache(/Yarn/Berry/cache)
가 존재하지 않는 상황에서도 yarn install
이 가능합니다.
반면에 Non-Zero-Install project
는 오프라인 환경에서 참조할 글로벌 캐시/Yarn/Berry/cache
가 존재하지 않는다면 에러를 발생시킵니다.
이러한 결과로 Zero-Install
을 적용한 프로젝트는 네트워크 연결이 끊긴 환경에서도 의존성 설치 시 분명한 차이가 있다는 사실을 확인할 수 있었습니다.
Gif LFS의 한계와 추가적인 테스트 제약사항
(이 부분은 패스하셔도 됩니다.)
을 하다가 어느 순간 git clone
을 하려고 하자 lfs
한계 초과(앞서 하나의 파일 용량이 100메가를 초과한 것과는 다른 Github
내의 lfs
제한)로 더 이상 clone
을 할 수 없었습니다. (위에서 zip파일 전부를 추적하지 말라는 것이 이 이유에서였습니다. 금방 사용한도를 초과하게 될 테니까요. )
위 이미지는 lfs가 추적 중인 파일을 확인해 보는 과정입니다. 그런데 저런 건 한 번만 말해줘도 이해하는데 말입니다.
일단 다른 폴더에 clone
해도 같은 경로의 글로벌 캐시(/Yarn/Berry/cache
)를 참조하고 있다는 사실을 알았습니다.
그래서 저는 "같은 프로젝트"를 clone
한 것이 문제였나? "원격 저장소의 주인이 동일했던 것이 문제였나?"라는 생각이 들었고 이에 현재 깃허브 계정의 "lfs 사용량 초과"라는 상황까지 발생하자 아예 다른 깃허브 아이디를 동원하기에 이릅니다.
다른 계정(lfs 한도가 남은 계정)으로 다시 시도했습니다. 여기서도 lfs 관련 에러가 발생했는데 중요한 내용은 아니라 접은 글로 첨부합니다.
여기서도 lfs 관련 에러(파일 용량 100메가 제한)가 발생했는데 위에서 한 것처럼 추적할 고용량 파일을 다시 지정해 주는 방식으로는 문제가 해결되지 않았습니다. 그리고 lfs가 현재 추적하고 있는 객체를 조회하면 아무것도 나오지 않는 문제가 있었습니다. 근데 임의로 파일을 생성해 지정해 주면 그 파일은 추적하더군요. 그런데 여전히 zip파일들은 추적하지 못했습니다. 초기화도 해보고 lfs 설치를 다시 해보기도 했는데 동일한 현상이 계속 지속되었고 이것 또한 왜 그런 것인지 원인을 알아낼 수 없었습니다. 결국 당장의 테스트를 위해 용량이 100메가 이상인 2개의 파일을 삭제하고 진행했습니다. (오직 테스트만을 위한 것입니다. 이렇게 하면 당연히 프로젝트가 정상적으로 실행되지 않을 테니까요.)
여기까지의 또 과정은 상세하게 적으면 너무 과한 것 같으니 요점만 말씀드리겠습니다. 여기서도 의외의 결과가 있었습니다. 분명 아예 새로운 프로젝트를 생성했는데도 이전에 생성했던 프로젝트에서 참조하는 경로(/Yarn/Berry/cache
) 폴더를 참조하고 있었습니다. Berry는 처음 생성한 yarn berry
프로젝트의 원본 폴더명입니다. (앞에서 진행한 테스트는 이 원본 프로젝트를 원격 저장소에 올린 것을 git clone
해와서 진행한 것입니다.) 아예 다른 폴더에서 새로운 프로젝트를 생성했는데 같은 글로벌 캐시를 참조하고 있었습니다. 저는 이 프로젝트의 글로벌 캐시를 관리하는 다른 폴더(/Yarn/Test/cache
)와 같은 형식의)가 생성될 것이라고 예측하였지만 그렇지 않았습니다. 심지어 글로벌 캐시 폴더를 변경하려고 시도했지만 불가능했습니다. 이에 같은 PC에서 여러 개의 Yarn berry
프로젝트를 동시에 관리한다면 이 프로젝트들이 모두 동일한 Global Cache
를 참조하고 있기에 무언가 에러가 발생할 여지가 있을지도 모른다라는 생각이 들었습니다.
(+) 순수 리액트 프로젝트를 생성해서 yarn berry를 패키지매니저로 적용한 경우에도 같은 루트의 글로벌 캐시를 참조하고 있었습니다.)
정리
저는 초반 테스트 후에 기대했던 것과는 다른 결과를 보고 2가지의 의문이 들었습니다.
Zero-Install
을 적용했는데도 왜yarn install
을 해야 하는 것인가요? (미해결)Zero-Install
을 적용했는데도 왜 오프라인 환경에서의 차이점이 보이지 않습니까? (해결)
이 두 의문점 중 1번에 해당하는 문제는 아직 정확한 답을 찾아내지 못했습니다. 그나마 추측 중인 것은 제가 순수 리액트가 아닌 Next.js App Router 15
버전의 프로젝트를 구축해서 테스트를 진행한 것이 원인이 아닐까 생각 중입니다.
Next.js
프로젝트가 아닌 순수 리액트프로젝트로 테스트를 해봐야 하나 싶긴 한데 더 이상 lfs 제한 때문에 테스트를 할 수 있는 상황이 아니라서 보류해야 할 것 같습니다. (일단 해봤는데 리액트로 생성된 초기 프로젝트는 Zero-Install
시 생성되는 .yarn/cache
폴더 내부의 zip 파일 중 100mb를 초과하는 파일이 없었습니다. )
2번에 대한 답은 테스트를 거쳐 얻을 수 있었습니다.
왜 yarn install이 필요했는지에 대한 가설 (Next.js App Router 15와의 호환성 때문?)
바로 위 단락의 1번째 의문점에 대한 한 가지 가설을 세워보겠습니다.
Next.js 프레임워크 내의 추상화된 어떠한 기능과 충돌이 일어나서 Zero-Install이 제대로 동작하지 못한 것
이것 때문일 가능성이 적지 않다고 생각하는 이유는 Next.js
는 Yarn berry
의 pnp
모드와 호환성 이슈가 있었습니다. 그렇기에 yarn berry
를 사용한다 해도 node_modules
와 package.lock.json
이 생성되고 개발자가 이를 수동으로 직접 삭제해주어야 합니다. (순수 리액트 앱은 Yarn berry
를 package manager로 사용할 경우 node_modules
와 package.lock.json
이 생성되지 않습니다.) 그래서 처음 프로젝트 생성하고 개발환경 설정할 때도 이런저런 추가적으로 해주어야 할 것들이 있었는 던 것입니다.
그리고 git lfs의 문제 같은 경우에도 유사한 맥락일 수 있습니다. 리액트(create-react-router
)만을 사용한 처음 생성된 상태 그대로의 프로젝트에서는 Zero-Install
을 적용해도 .yarn/cache
폴더 내에 100mb를 초과하는 zip파일이 생성되지 않습니다. 위의 100mb를 초과하는 파일명을 다시 보시면 아시겠지만 둘 다 Next.js
와 관련된 파일입니다.
조금 더 정확하게 말하자면 제가 Next.js
를 사용해서 생긴 문제라기보단 현시점 Next.js
의 가장 최신버전인 App Router 15
버전으로 프로젝트를 생성해서 발생한 문제일 수도 있습니다. 많은 기업에서 Next.js
와 Yarn berry
를 같이 사용하나 그들이 이러한 가장 최신 버전인 App Router 15
버전을 사용하고 있는지는 모릅니다. 아마도 어떠한 안정화 측면에서 이러한 상황이 발생할 여지가 없는 이전 버전 혹은 Pages Router
디렉터리의 프로젝트를 구축하여 사용하고 있을 가능성이 높습니다.
무엇보다도 나름 관련 이슈에 대해 적지 않게 찾아봤는데 저와 같은 현상을 겪었다는 글을 보지 못했습니다. 이는 제가 가장 최신 버전인 Next.js App Router 15
버전을 사용했기 때문이라고 생각하면 거진 다 들어맞습니다. 이전에는 없었지만 최근 업데이트로 인해 무언가가 바뀌었고 그것이 이러한 문제를 발생시킨 걸 수도 있으니까요.
에필로그
일단 Zero-Install
이 yarn install
을 필요로 하지 않는지를 정확하게 확인해 보려면 최초의 프로젝트가 생성되었던 제 PC가 아니라 다른 PC에서 git clone
을 시도해봐야 할 것 같습니다. 캐시가 어떤 식으로 영향을 끼치는지 정확히 인지하지 못하고 있는 상황이기에 이런 문제들이 발생한 것일 테고 아예 프로젝트 관련 캐시가 존재하지 않는 다른 PC에서 진행했다면 좀 더 명확한 결과를 확인했을 수도 있을 것 같습니다.
그리고 제가 Yarn berry
의 캐시 정책(plug 'N' play
)에 대해 명확하게 인지하고 있지 못한 것 또한 큰 이유일 것 같습니다. 정확한 작동 원리를 파악하지 못 한 채로 실험을 시작했습니다.
plug 'N' play
유쾌하고 자유로운 mz 세대를 겨냥한 앱 같은 이름을 하고 사람을 너무 고생시키는군요.
오늘의 포스팅은 간결함을 지향하려고 했는데 여러모로 그건 불가능해진 것 같습니다. 며칠 전에 제 글의 특징 중 이러한 부분을 개선해야 한다는 에세이도 썼었는데 이번 글은 결국 이렇게 돼버렸습니다. 세세하지만 너무 길고 장황하고 그래서 결국 기술 블로그 포스팅으로써 잘 쓴 글이라고 할 수 있냐고 하면 글쎄요.. 제가 쓰고 싶었던 글이라서 쓴 것이지만.. 이로써 반성해야 할 일이 하나 더 추가가 되었습니다.
'FE > 개발 도구' 카테고리의 다른 글
[AWS Amplify] Next.js 프로젝트 배포하기 (0) | 2025.04.18 |
---|---|
[Vercel] Next.js 프로젝트 배포하기 (0) | 2025.04.17 |