Next.js 13 프로젝트 yarn berry로 전환하기

설치 환경 버전 정보

node : 18.13.0

yarn : 3.6.3

next : 13.4.19

next.js 프로젝트 생성

먼저 next.js 프로젝트를 생성하자.

일반적으로 가장 많이 설치하는 npx create-next-app을 사용하여 설치했다.

npx create-next-app@latest yarnberry-next13

node_modules 삭제

설치가 완료되면 next.js 프로젝트를 vscode로 열어보자.

yarnberry를 사용하면 앞으로 node_modules를 사용하지 않게 되기 때문에, 기존에 설치된 node_modules를 삭제해줬다.

yarnberry 버전으로 전환

이제 yarn berry 버전으로 전환해보자. 아래의 명령어를 실행해줬다.

yarn set version berry

위 커맨드를 실행하면 아래와 같이 실행되면서 yarnberry 버전으로 전환된다.

조금은 생소한 실행화면과 함께 아래와 같이 진행된다.

yarnberry 모드에서 패키지 재설치

자 이제 삭제한 패키지를 yarnberry 모드에서 재설치 해보자. 설치 명령어는 기존과 동일하다.

yarn install

설치가 완료되어 vscode를 다시 확인해봤다.

이제는 패키지를 설치하여도 node_modules가 생성되지 않는 것을 확인할 수 있었다.

그리고 생성된 .yarn/cache 폴더를 살펴봤다.

패키지들이 압축파일로 저장되어 있는 것을 확인할 수 있었다.

기존에는 node_modules 폴더 용량이 커서 github에 푸쉬하지 않는것이 일반적이었다.

그렇기 때문에 공동작업자가 있을 경우, 소스코드를 받아서 실행하기 위해서는 패키지를 npm에서 재설치 해야했다.

그리고 만약 이 과정에서 npm 패키지에서 사라진 것이 있다면, 소스코드를 실행할 수 없는 상황이 발생할 수도 있었다.

하지만 yarnberry 모드에서 패키지들은 압축되어 용량이 작기 때문에, github에 설치된 패키지들을 함께 푸쉬한다고 한다. 이로서 공동작업자는 소스코드를 받아서 바로 실행할 수 있는 것이다.

gitignore에 코드 추가

yarnberry 모드에 맞게 gitignore에 코드를 추가해줬다.

# yarn berry

.yarn/\*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

typescript 설정

이 부분은 링크의 도움을 받아 진행했다.

🔗 리멤버 웹 서비스 좌충우돌 Yarn Berry 도입기 바로가기 🔗

현재 상태에서 작성되어 있는 코드를 보면 typescript 에러가 발생하고 있었다.

기존에 node_modules에서 모듈을 가져오던 방식이 아닌, yarnberry에서 모듈을 가져오는 방식으로 변경되었기 때문에 발생하는 에러이다.

yarn dlx @yarnpkg/sdks vscode

위의 커맨드를 실행하면 아래와 같이 vscode 오른쪽 하단에 얼럿이 뜬다.

여기서 허용을 해줘도 되고 아래처럼 별도로 타입스크립트 버전을 설정해줘도 된다.

타입스크립트 버전 검색

타입스크립트 버전 선택

테스트

개발모드 테스트 (yarn dev) : 성공

빌드 테스트 (yarn build) : 성공

공동 작업자 시점에서 테스트

먼저 생성한 프로젝트를 github에 푸쉬해 두었다.

🔗 yarnberry-next13 레파지토리 바로가기 🔗

이제 공동작업자 입장에서 소스코드를 받아서 실행해보자.

위 레파지토리를 git clone 받고, yarn dev를 실행해봤다.

터미널에서 정상적으로 실행이 되고 local:3000에서도 정상적으로 실행이 되는 것을 확인할 수 있었다.