Yarn Berry + Typescript + VSCode workspace

기존에 yarn v1을 사용해서 개발을 했는데, 새로운 버전인 v2(코드 네임 berry)가 있다는 소식에 지금 프로젝트에도 적용해보려고 한다.

 

node_modules를 사용하는 npm과 yarn classic의 문제점과 yarn berry가 제시하는 해결책, 그로 인한 다양한 이점들에 대해서는 토스 기술 블로그에 기고된 글을 참고하자. 짜임새 있는 구성으로 설명이 아주 잘 되어있다.

 

원래 타입스크립트를 쓰고 있었고, 여기에 VSCode가 제공하는 워크스페이스 기능을 사용하고 있었는데, 문서에 소개되어 있는대로 설정을 하면 몇 가지 문제가 발생한다. yarn berry에 대한 소개보다는 실제로 적용했을 때 발생하는 이 문제들에 대해 이야기해보려고 한다.

 

 

ZipFS

node_modules를 사용할 때는 node_modules 폴더 내부의 구조를 기반으로 디펜던시를 찾아서 import를 하는 구조였다. yarn berry에서는 폴더 구조를 통해 디펜던시를 찾는게 아니라, PnP 방식과 ZIP 아카이브를 사용하기 때문에 이에 대한 설정을 별도로 해줘야 한다.

 

VSCode를 사용하고 있다면 기존에 [정의로 이동] 기능이나 [형식 정의로 이동] 기능을 사용해서 디펜던시의 소스 코드를 확인할 수 있었는데, yarn berry는 폴더 구조로 디펜던시를 관리하는 것이 아니기 때문에, 이 기능이 제대로 작동하지 않는다.

 

마켓스페이스의 ZipFS 익스텐션을 사용해서 기존에 node_modules 내부에서 소스 코드를 탐색했던 것처럼 작업할 수 있다.

 

 

VSCode SDK

노드로 개발을 하다보면 다양한 개발 도구를 사용하게 된다. Typescript, ESLint, Prettier가 대표적인데, 이러한 개발 도구들은 자체적으로 원래 node_modules 폴더 내에 위치하고, VSCode와 같은 IDE에서 이를 사용하는 방식이었다.

 

PnP 방식에서는 어떻게 설정을 해주어야 할까? yarn berry에서는 대표적인 몇 가지 IDE와 개발 도구들을 사용할 수 있도록 sdk를 제공한다. VSCode의 경우에는 아래 명령어를 통해 설정할 수 있다.

❯ yarn dlx @yarnpkg/sdks vscode

 

위 명령어를 실행하면 /.vscode/settings.json 파일에 아래 구문이 추가된다.

{
  "eslint.nodePath": ".yarn/sdks",
  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

 

 

+VSCode Workspace

VSCode의 워크스페이스에서는 여러 개의 폴더를 루트로 지정해서 작업할 수 있는 멀티 루트 워크스페이스 기능을 지원한다.

 

싱글 워크스페이스에서 설정을 할 때는 /.vscode/settings.json 파일을 사용하고, 여러 개의 폴더에 대해 동일한 설정을 적용하려면 위 링크에서 소개하고 있는 것처럼 <name>.code-workspace 라는 파일을 사용한다.

 

이 두 가지는 섞어서 사용할 수 있고, 각 디렉토리별로 설정한 내용이 워크스페이스에 설정한 내용을 덮어쓰는 구조이다. 일례로 검색 대상/제외 파일을 설정할 때는 project.code-workspace 파일에 설정을 하고, Typescript와 ESLint, Prettier에 대한 설정은 디렉토리에 위치한 settings.json에서 하는 식이다.

 

그런데 멀티 루트 워크스페이스에서, 위 문단과 같이 pnpify를 사용해서 sdk 설정을 하면 워크스페이스의 타입스크립트 구현체를 선택할 수 없는 문제가 있다. 정확한 원인은 모르겠지만, 이 설정을 개별 디렉토리 설정에서 워크스페이스 설정으로 이동하면 정상적으로 작동한다.

// 아래 구문을 <name>.code-workspace 파일로 이동
{
  "eslint.nodePath": ".yarn/sdks",
  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

 

 

+Typescript Plugin

yarn berry에서는 다양한 플러그인을 사용할 수 있는데, typescript 플러그인은 패키지를 설치할 때 @types/* 패키지를 자동으로 찾아주는 플러그인이다. yarn plugin import 명령으로 이를 활성화할 수 있다.

❯ yarn plugin import typescript

 

 

---

yarn classic -> yarn berry로 버전업을 할 때 겪었던 몇 가지 문제와 팁에 대해서 이야기해보았다.

 

실제로 적용하면서 package.json에 명시되어 있지 않은데 node_modules에는 존재해서 돌아갔던 코드도 찾아냈고, 도커 이미지 빌드 시간도 기존 약 40초 정도에서 5~6초로 단축했다. 인터페이스 자체도 기존 yarn과 동일해서 처음에 설정만 잘 해주면 이후에는 별 어려움 없이 사용할 수 있었다. 👍

 

@turastory