brunch

라이킷 5 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 찐님 Jan 22. 2024

Next.js에 yarn berry 사용해보기

왜 자꾸 나 몰래 유행하는지..,

새 프로젝트에 들어가며, 언제나 그랬듯 기술스택을 고민한다.

익숙하고 편한 리액트? 귀찮고 낯선 새로운 기술?

고민끝에 내가 타협한 것은 Next.js였다.

Next.js를 선택한 이유는

요즘 CSR에서 다시 SSR로 넘어가는 추세라는 말을 종종 들어왔다.

물론 React에서도 서버 사이드 컴포넌트를 사용할 수 있게 되면서

리액트에서도 SSR처럼 구현할 수 있게 되었지만

아무래도 Next.js가 더 보편적이고 안정적인 방법이라고 생각이 들었다.

그리고 프로젝트를 생성하고 보니 Yarn berry라는 새로운 yarn 버전이 나왔다고 한다.

그럼 또 안써볼 수 없지

yarn berry가 무엇인가

Yarn 패키지 매니저의 새로운 버전으로 Yarn 2.x버전 이상의 코드 이름이다. 내가 평소에 사용하던 Yarn은 1.x 버전이었고, 2이상인 버전을 berry라고 칭하는 것 같다.

yarn berry의 장점

* Plug’n’Play (PnP)

PnP는 yarn berry가 제공하는 새로운 패키지 관리 시스템으로 무거웠던 node_modules 대신 패키지 정보를 .zip 파일로 압축하여 .yarn/cache 폴더에 저장하고 이를 찾기 위한 정보를 .pnp.cjs 파일에 기록한다.

* Zero install

무거웠던 node_modules를 제거한 덕분에 이를 이용해 의존성까지 github에 올릴 수 있게 되었습니다. github는 파일당 최대 용량을 500mb으로 제한하고, 원활한 이용을 위해 저장소당 1gb 미만의 크기를 유지 할 것을 권장하고 있습니다. yarn berry를 통해 만든 의존성 폴더는 어지간히 크지 않은 이상 200mb를 넘지 않습니다. 덕분에 git clone 이후 별도의 설치가 필요 없이, 바로 사용할 수 있도록하는 zero-install을 시도해 볼 수 있습니다.

(더 이론적이고 상세한 설명은 이 글을 참고하면 좋다.)

아무튼 무겁고, 설치/삭제도 오래걸리는 node_modules에서 벗어날 수 있다는 것만으로도 큰 장점이다.

나의 경우 node_modules의 파일만해도 4GB를 넘기 때문에 build된 파일만 서버에 직접 올리고 있었다. 예전에 그냥 같이 올렸다가 서버 용량이 부족하다고 하는 바람에 불편하더라도 이렇게 하고 있다.

적용 방법

1. Next/.js 프로젝트 생성

2. node_modules 디렉토리, package_lock.json 파일 삭제

3. yarn set version 3.7.0 명령어 입력하여 yarn version 업그레이드

4. yarn -v로 버전 확인

"yarn set version stable"을 입력하면 4.0.2버전이 설치된다.

3.0과 4.0에 약간의 변경점이 있는 것 같은데 자료가 많지 않아 에러에 대한 정보를 찾기 힘들었다. 처음에 4.0.2 버전으로 패키지 설치를 진행하니 자꾸 node_modules 디렉토리가 생성되고, cache디렉토리는 만들어지지 않았다. 구글링해보니까 yarnPath 대신에 corepack이라는 패키지를 사용하라고 하던데... 귀찮은 마음에 3.x 버전으로 다시 다운받았더니 해결되었다.

그러면 .yarn디렉토리에 releases디렉토리와 .yarnrc.yml파일이 생성된다.

5. .yarnrc.yml파일에 nodeLinker : pnp 라는 문구가 없다면 추가해준다