Yarn-berry + NextJS(typescript) 보일러플레이트 만들기

Yarn-berry란?

기본적으로 가장 접근성이 좋고 많은 사람들에게 사용되는 패키지 매니저를 꼽자면, npm과 yarn을 꼽을 수 있다. 그 중 yarn의 개발자가 내놓은 새로운 패키지 매니저이다. 기존의 npm과 yarn을 사용하면서 높은 용량의 node_modules 폴더, 해당 node_modules의 디렉토리 구조를 만들기 위한 무수히 많은 입출력 작업등의 단점이 존재했다. yarn-berry는 node_modules를 생성하지 않고 Plug'n'Play(PnP)를 이용하여 효율적으로 패키지를 찾을 수 있고, 의존성을 압축파일로 관리하기 때문에 기존 node_modules에 비해 용량이 매우 적어 zero-install로 git을 통한 버전관리가 가능하다.

 

보일러 플레이트 만들기

NextJS CLI 적용

yarn create next-app . --typescript

현재 디렉토리 위치에 cna를 통해 Nextjs 앱을 생성한다.

cna 설치 후

cna를 통해 설치를 진행하고 생성된 파일들이다. yarn-berry의 PnP를 이용하기로했는데 node_modules 폴더가 존재하게된다. 아직 yarn-berry를 적용하지 않아서 그렇다.

Yarn-berry 적용

yarn set version berry

위와 같이 yarn의 버전을 바꿔주면 package.json 파일에 packageManager가 적용되는 것을 볼 수 있다.

Yarn.lock 마이그레이션

yarn install

package.json 파일에 기반하여 의존성 트리를 다시 만들 수 있도록 한다.

node_modules 제거

여전히 폴더에는 node_modules 폴더가 존재한다. .yarnrc.yml 파일을 들여다보자. nodeLinker: node_modules 라고 되어있을 것이다.

nodeLinker: pnp

다음 옵션을 적용하여 zip 아카이브로 관리되도록 한다. 그 후 node_modules 폴더를 삭제하고 다시 yarn install을 진행하면 node_modules 폴더 대신 다음 두개의 파일이 생성된다.

이제 .yarn/cache 폴더에는 의존성의 정보가, .pnp.cjs 파일에는 의존성을 찾을 수 있는 정보가 포함되어 있다 .pnp.cjs를 이용하여 입출력 없이 의존성 관리가 가능하다. 이제 기본적인 boilerplate가 만들어졌다 yarn dev를 통해 정상적으로 실행되는 것을 확인할 수 있을 것이다.

Yarn-berry와 IDE 통합

yarn-berry에서는 의존성을 node_modules 폴더가 아닌 .yarn 폴더 내부에서 압축파일로 관리하기 때문에 해당 의존성을 IDE가 읽어올 수 있게끔 확장 프로그램인 ZipFS를 설치한다.

 

추가적으로 프로젝트를 진행하거나 개발을 하다보면 ESlint, Prettier 같은 개발도구들이 필수적으로 사용된다. PnP 방식을 사용하는 yarn-berry에서는  sdk를 제공하기 때문에 다음 명령어를 통해 명시적으로 활성화를 해주어야한다.

yarn dlx @yarnpkg/sdks vscode

이제 .vscode 폴더 내의 extensions.json과 settings.json 파일이 생성된 것을 볼 수 있다. 해당 설정을 적용하기 위해 타입스크립트 파일에서 Ctrl + Shift + P -> Select typescript version -> Use Workspace version을 선택하여 사용한다.

 

이렇게 yarn-berry를 사용해서 boilerplate를 만들어 개발환경 세팅까지 정리해보았다. 다른 개발자 분들에게도 도움이 됐으면한다.