1. Yarn을 선택한 이유
패키지 매니저로 Yarn을 선택한 이유에 대해서 정리해 보았습니다.
node_modules의 문제점
기존에는 node_modules를 기반으로 하는 npm 방식의 프로젝트를 생성하려고 하였으나, 다음과 같은 문제점이 있어서 보류하게 되었습니다.
- node_modules 폴더 안에는 파일이 너무 많고, 이 폴더를 생성하는 것은 입출력이 무거운 작업이기도 합니다.
- Node에는 패키지에 대한 개념이 없기 때문에 파일이 접근할 수 있는지 여부를 알 수 없습니다.
- 그래서 런타임에 Node resolution는 모든 필요한 파일을 어디에서 로드해야 할지 파악하기 위해 수많은 stat 및 readdir 호출을 해야 합니다.
- 패키지 매니저가 설치된 패키지의 중복을 제대로 제거할 수 없어서 문제가 발생할 가능성이 있습니다.
- 이전 팀 프로젝트 시 팀원과 노드 버전이 달라서 package-lock.json에 동일한 패키지의 다른 버전들이 여러 개 작성되었고, 패키지의 중복이 코드의 충돌을 일으켰던 문제가 있었습니다.
Yarn의 장점
- Yarn은 무거운 node_modules 폴더를 생성하는 대신, pnp.cjs 파일 하나만 생성하면 되기 때문에 설치가 빠릅니다.
- 생성된 pnp.cjs 파일은 repository에 커밋할 수 있어서, 이후에는 처음부터 yarn 설치를 실행할 필요가 없습니다.
- 또한 pnp.cjs 파일을 통해 접근해야 하는 패키지의 위치를 알 수 있으므로, Node resolution이 파일 시스템 계층 구조를 많이 반복할 필요가 없습니다.
- Yarn은 입출력 작업이 node_modules를 생성하는 것보다 가볍기 때문에, 더 안정적으로 설치할 수 있습니다.
2. Yarn 관련 설정 과정
Corepack 활성화
- Corepack은 package manager의 버전을 관리해 주는 도구입니다.
- 로컬 프로젝트와 호환되는 최신 버전의 package manager를 다운로드하고, 캐시합니다.
- Node.js의 버전이 16.10 이상인 경우, Node.js 설치 시 Corepack이 포함되어 있습니다.
- 아래와 같은 명령어를 실행하여 Corepack을 먼저 활성화합니다.
corepack enable- yarn의 전역 버전을 업데이트합니다.
// Node.js^16.17 or >=18.6
corepack prepare yarn@stable --activateTypeScript 관련 설정
- yarn berry의 PnP 기능을 사용할 때, TypeScript가 정상적으로 작동하도록 추가적인 구성(editor SDKs)이 필요합니다.
yarn dlx @yarnpkg/sdks vscode- @types/* 의존성을 자동적으로 관리할 수 있도록 도와주는 Yarn's TypeScript plugin을 활성화합니다.
yarn plugin import typescript- VS Code에서 TypeScript 설정을 활성화합니다.
- TypeScript 파일 내에서 crtl+shift+p를 입력하여 Command Palette을 엽니다.
- TypeScript: 'Select TypeScript Version'을 선택 후, 'Use Workspace Version'으로 설정합니다.
