yarn berry로 next.js typescipt 프로젝트 초기 셋업 하기

`이번 프로젝트는 next.js 에 yarn berry를 사용하여 프로젝트를 진행하게 되어서 next.js에 yarn berry를 초기세팅하는법을 포스팅 하겠다. 

 

yarn berry 사용 이유

npm은 node_nodules폴더안에 모든 라이브러리들이 담겨있고 node_nodules폴더에 의존한다.

중복되는 파일, 유령의존성등 수많은 단점들이 있기에 새로운 대안으로 yarn berry가 나왔다.

그리고 일반적인 npm이나 yarn v1로 생성된 프로젝트 보다 거의 8배정도 용량이 줄어는다. 

 

next.js프로젝트에 yarn berry적용하기

 

먼저 next.js프로젝트를 만들어 준다. 

yarn create next-app --typescript

프로젝트를 만들려는 디렉토리경로에 위명령어를 입력하여 next프로젝트를 만든다. 

명령어를 입력하면 프로젝트 이름을 입력하라는 메시지가 나오고 프로젝트 이름을 입력한 후 여러가지 설정을 하면 프로젝트가 생성된다. 

 

그 이후 yarn berry로 yarn 버전을 업데이트 한다. 

yarn set version stable // yarn 최신버전 업데이트
yarn set version berry // yarn berry로 업데이트

위 두가지 명령어 중 마음에 드는 걸 선택하여 입력하면 된다. 

 

yarn 패키지 설치

yarn

 

 

만약 node_nodules폴더가 생성된다면 아래명령어를 입력하면 된다. package.json폴더 에 아래 코드를 입력한다. 

"packageManager": "yarn@3.1.1",

 

아래 명령어를 입력하면 yarnrc.yml파일이 생성된다. (그냥 하면 됨)

echo 'nodeLinker: "pnp"' >> .yarnrc.yml

 

 

yarn typescript설정

yarn plugin import typescript
yarn add -D typescript
yarn

위 명령어를 순서데로 입력하면 된다.

 

압축파일을 vscode에서 찾기위한 설정

yarn dlx @yarnpkg/sdks vscode

yarn berry는 zip파일로 라이브러리들을 관리하는데 이러한 파일들을 vscode에서 찾기 위해 위 명령어를 입력하여 설정해야 한다. 

 

익스텐션 설치

ZipFS - a zip file system

 

 

ctrl+shift+P입력 후 뜨는 검색창에 selet typescrip version을 입력 후 클릭한 다음 Use Workspace version 을 클릭한다. 밑에 경로를 보면 .yarn/sdks/typescipt/lib 경로를 확인한다. 

 

 

개발버전으로 실행하기

yarn dev