[Next.js] Yarn berry로 Next.js 프로젝트 시작하기

 

yarn? yarn berry🫐? npm? pnpm?

이것들은 패키지 매니저야. 그리고 나는 패키지 매니저로 npm과 yarn만 사용해 봤다.

요즘 공고를 보면 yarn berry 내지는 pnpm이라는 패키지 매니저들이 많이 보여서 궁금했다.

전에 팀 프로젝트를 할 때 우리 팀은 아니고 다른 팀이었는데 패키지 매니저로 yarn berry를 쓴다는 분이 있었어. 난 처음 들어본 거라 궁금해서 물어봤거든 그때 그분은 yarn berry의 이점이 있어서 그것을 채택했지만 초기설정이 좀 복잡했다는 식으로 언급했었어. 

 

yarn의 버전 2 이상은 전부 yarn berry로 칭한다고 해

(고로 나는 yarn 4.7.0을 설치했지만 얘도 yarn berry인 것이다. yarn candy나 yarn cream이 아니고. 과거에 안드로이드가 버전이 하나 올라갈 때마다 다른 디저트명을 붙였던 것과는 다르네.)

yarn 버전 1은 yarn classic인데 그냥 yarn으로 불리는 애라 한다.

 

 

yarn berry를 쓰는 이유

무거운 node.modules을 어찌어찌 대체해서 설치 시간과 디스크 공간을 줄여주는 게 큰 이점 같다. 그리고 베리는 맛있다. 

 

 

도전한 이유는

어차피 포트폴리오용 웹사이트를 하나 만들려고 했기에 기왕 만드는 거 안 써본 패키지 매니저를 써보고 싶었어. 저 다른 팀원 분의 말로 인해 궁금증이 생기기도 했었고. 그리고 패키지 매니저 설정이 그렇게 어려울 것 같지는 않았거든. 결국에는 생각보다 많은 시간이 걸렸지만..  다음에는 pnpm도 궁금한걸?

 

 

도전한 소감은

탈탈 털렸다. 사실 아주 복잡하거나 어려운 과정이 아니었는데 내 의도대로 되지 않아서 프로젝트를 여러 번 생성하고 라이브러리를 설치하고 지우고 난리를 쳤다. 중간에 그냥 다 그만두고 평소와 같은 방법으로 프로젝트를 생성할까 하는 생각이 여러 번 들었는데 결국 되었다! 많은 시간을 잡아먹긴 했지만... 알고 보니 메인 해결책 중 하나는 vscode extension을 설치해야 되는 것이어서 조금 허무했다.

 

하 근데 새로운 개념을 배운 것도 좋고 시도한 것도 좋아 그리고 결국 성공한 것도 좋은데 난 포폴 만들어야 하는데.. 오늘은 이거 포스팅하고 개념 정리하고 공부하는데 시간 다 간 것 같아....

 

 

시작하기 전에

 

미리 말해둡니다.

프로젝트 폴더 경로에 한글명 폴더가 없도록 하세요.

/바탕화면/project 이런 거 안됩니다.

 

왜냐면 내가 이랬다가 프로젝트 폴더를 옮겼거든

지금까지 바탕화면에 프로젝트를 생성한 것이 문제가 된 적이 없었는데 말이야

 

왜 그럴까?

 

Yarn Berry의 PnP(Plug'n'Play) 시스템은 절대 경로를 사용하여 패키지의 위치를 추적하기 때문에 폴더 위치를 옮기면 .yarn/cache 파일과 .pnp.cjs 파일에 있는 절대 경로 참조가 더 이상 유효하지 않게 돼. 그래서 이 상태에서 yarn dev로 개발환경을 실행시키면 에러가 발생하는 거야. 이를 해결하려면 yarn install을 실행시키면 돼. 그러면 yarn berry가 현재 위치를 기준으로 이러한 참조를 재설정하거든.

 

난 이 사실을 알고 난 후 아까 한글 경로 때문에 에러가 발생한 것도 기존의 npm의 방식과는 달리 yarn berry는 절대경로를 참조하기 때문이라는 것을 알게 되었어. 패키지 위치를 추적하는데 경로에 영문이 아닌 한글이 있어서 파싱 오류가 발생한 거였어. 너희는 지금 이 글을 보고 있지만 이런 내용을 알려주는 블로그글을 나는 아까 이거 테스트하면서는 못 봤어... 지금 키워드로 검색하니까 뜨긴 하는데... 나는 너희가 이런 상황을 겪는 것을 막으려고 이를 미리 언급하는 거야

 

 

시작하자

 

그냥 프로젝트 생성은 평소처럼 하자

 

npx create-next-app@latest

 

 

일단 Turbopack 저 부분 있잖아 지금까지는 별생각 없이 성능적으로 좀 개선되는 게 있을까 싶어서 Yes를 눌렀었거든. 그런데 이번에도 Yes를 누르니까 무언가 충돌한 건지 에러가 생기는 상황을 마주하게 돼버렸지 뭐야 그래서 No를 선택했어. 

 

 

그리고 프로젝트가 생성되면 생성된 프로젝트 루트폴더로 들어간다.

cd berry-berry-strawberry

 

 

아 맞아

난 이미 깔려있지만 yarn 없으면 설치해야 해 

npm install -g yarn

 

 

그리고 아래와 같은 명령어를 쳐주자.

이 프로젝트 폴더에서의 yarn버전을 stable 버전으로 세팅하겠다는 거야.

(이 글을 쓰는 지금은 4.7.0 버전이네)

 yarn set version stable

 

뭐 이런 게 뜨는데 Corepack이 활성화되어있지 않아 yarnPath로 대신하겠다는 내용 같아.

현재 stable 버전이 최신이라 이런 안내가 뜨는 것 같은데 이러한 Corepack 추가 설정이 번거로워서 yarn berry를 이전 버전(3.7.0)으로 설치했다는 포스팅도 봤었어. 근데 그 포스팅 다시 보니까 그때는 stable 버전이 (4.0.2)였나 봐. 내 추측으로 그때는 따로 처리해줘야 하는 게 있었나 본데 나는 그런 게 안 뜨는 걸 보니 (4.7.0) 버전으로 오면서 개선된 거겠지? 지금 당장 발생하는 문제는 없으니 이대로 진행해 보자. 

 

 

그리고 node_modules랑 package.lock.json을 삭제하자.

 

왜냐면 node_modules는 yarn berry에서 사용하지 않아.

node_modules의 비대함 때문에 대체적인 방법을 내세워서 나온 게 yarn berry니까 애초에 지금 상황에서는 필요하지 않는 파일인거지.

그리고 package.lock.json은 yarn.lock이랑 충돌할 가능성이 있기 때문에 이것도 같이 삭제하자

 

 

 

 

그리고. yarnrc.yml 파일을 가면 yarnPath만 정의되어 있고

nodeLinker에 대한 정의는 없을 거야.

 

nodeLinker: pnp

 

이것도 추가해 주자. 

 

 

 

그리고 yarn 설치쓰

yarn 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.*

 

둘 다 같이 추가하는 건 아닌 것 같고 내가 Zero-Install을 사용할 거면 위의 코드를 사용하지 않을 거면 아래의 코드를 gitignore에 복붙 하면 되겠네.

 

yarn berry의 Zero-Install 이란?

• yarn berry의 Zero-Install 기능은 깃저장소에 더 많은 패키지를 올리는 거야. 그래서 추가적인 yarn install이 필요 없다는 의미에서 Zero-Install인 거야. 원래 프로젝트 새로 클론 받거나 그러면 매번 의존성 설치(npm install)해줬잖아? Zero-Install은 그럴 필요가 없다는 거지
• 나 같은 경우 대규모 프로젝트가 아니라 간단한 정적 포트폴리오 웹사이트를 만들려는 거니까 Zero-Install 기능을 사용하는 게 더 적절할 것 같아. 그러면 프로젝트 규모가 커지고 패키지가 무거워질수록 Zero-Install을 사용하지 않는 것이 적절한 방향일까? 이렇게 생각했는데 대규모 프로젝트일수록 개발환경 설정 시간이 길어지니까 오히려 Zero-Install의 이점이 더 클 수 있다고 해. (하지만 테스트 삼아 원격저장소 프로젝트를 다른 폴더에 git clone으로 가져왔거든 그런데 이런 zero-install 설정을 gitignore에 넣었음에도 yarn install을 했어야했어.. 왜그럴까.. 이것도 다시 알아봐야할 것 같아. 그리고 제로 인스톨을 사용하려면 .yarnrc.yml 파일에 "enableGlobalCache: false"를 설정해줘야 yarn build 명령어를 친 후에 yarn/cache 폴더가 생성되고 그 안에 zip파일들이 생성돼)
• 보면 제로 인스톨은!. yarn/cache라는 애가 gitignore에 포함돼서 깃에 올라가. (앞에 ! 가 붙은건 gitignore에 포함시키지 않겠다는 뜻이야) 반대로 제로인스톨을 안 쓰는 경우는 .pnp.*가 gitignore에 포함돼서 깃에 안 올라가. 맞아 이거 아까 앞에서 에러 부분에서 절대경로를 참조한다고 언급한 두 파일 아니었어? 그럼 얘네의 역할은 무엇일까? 

 

[yarnpkg] 어떤 파일이 gitignored 되어야 할까요? 

바로 언급한 내용에 해당하는 yarn의 공식 문서 링크야. 참고해!

 

 

자 이제 끝났나? 하는 순간

ts, tsx 파일에 들어가 보면 빨간 죽이 좍좍 가있는 게 보여. 

 

 

하하하.

 

ts, tsx 확장자 파일에서만 이런 에러가 뜨는 걸 보아 타입스크립트와 pnp가 동작하는 방식에 있어서 무언가 충돌이나 에러가 발생한 것 같지 않아? 타입스크립트는 기본적으로 node_modules 폴더 구조를 따라 타입을 찾도록 설계되어 있어. 근데 yarn berry의 pnp 시스템은 이러한 node_modules를 사용하지 않으니까 이에 관련해서 생기는 문제인 것 같아.

이 부분도 자세히 알아봐야겠어. 

 

다음 명령어 고.

yarn dlx @yarnpkg/sdks vscode

 

그리고 vscode를 껐다키면

 

 

놀라우리만큼 아무런 변화가 없다!

 

하하하하. 

 

vscode 확장 프로그램을 설치해야 해. 

extensions에 들어가서 zip이라고 검색하면 

ZipFS라는 고양이 들어간 알집 같은 게 있음

 

 

귀여우니까 설치하도록

 

 

그리고 vscode 껐다 켜

재시작하면 이러한 게 하단에 떠

 

 

Allow 눌러주면 빨간 줄이 싸악-사라진다

 

만약 저게 안 뜨면... 맞아 나도 이게 안 떠서 고생했어...

ts 파일 켜놓고 거기서 ctrl + shift +  p 눌러서 typescript workspace 변경을 찾으려는데 안 떴거든..

위와 같은 태도는 기술 블로그 글이라기엔 너무 무책임하지? 이것도 내가 다시 찾아볼게

 

(위의 yarn dlx @yarnpkg/sdks vscode 이 명령어로 라이브러리를 설치하는 부분과 방금 고양이 익스텐션을 설치한 것은 yarn berry가 zip파일을 기반으로 패키지를 관리해서야.. 근데 개념적인 건 나중에 추가할게 너무 졸리거든.. 일단은 당장 실용적인 내용만 적을게)

 

이제 실행해 볼까

 

프로젝트 루트 폴더에서 yarn dev 하면

 

ㅋㅋ 에러뜸

뷀깢 붾 난리 났네

경로에 한글 폴더가 있어서 그런 것 같아 (여기서 왜 에러가 뜬 건지 초반에 미리 한번 언급했어. 궁금하면 위로 올려보자!)

 

 

만악의 근원 == 바탕 화면

 

 

 

경로에 영문명 폴더만 있도록 프로젝트 폴더 위치를 아예 옮겼어

 

 

근데도 에러뜸 ㅋㅋ (여기서도 왜 에러가 뜬 건지 초반에 미리 한번 언급했어2 궁금하면 위로 올려보자! )

 

근데 에러내용 보면 yarn install 하라는 것처럼 보이지?

 

 

그래서 했어...

 

 

 

그러니까 잘됐어...

 

 

 

정말.. 이 익숙한 화면 보기가 왜 이리 힘들었는지 싶어..