vscode problems with Yarn Berry(PnP) & Workspace

1. Background

현재 사내에서는 Yarn Berry(v3)을 사용중이지만 PnP 또는 zero-install을 사용하지 않는다. 또한 Yarn Berry가 처음 세상에 나올 때 아주 짤막하게 공부했던 나는 (실제로는 그렇지 않지만)zero-install이 곧 PnP와 같은 것이라 생각하고 있었다.
그렇기 때문에 zero-install이 얼마나 실용적이던, 빠른 개발을 위해 상당히 많은 외부 의존성을 끌어쓰는 요즘에는 이러한 전략이 git을 너무 무겁게 만들 것이라는 걱정이 더 컸다(특히 monorepo에서 더욱). 그래서 한동안 Yarn에 대한 관심을 끄고, 개인 개발할 때에는 Yarn보다 더 매력적으로 보였던 pnpm을 애용했다.

이러한 배경 상황에서 Yarn v4 Release 소식을 이제야 찾아본 나는 zero-install과 PnP가 사실은 동일한 게 아니라는 것을 깨닫고, PnP가 어떤 목표를 가진 기술인지를 다시 알게 되었다. 또한 zero-install을 사용하지 않더라도 PnP를 이용할 수 있다는 새로운 사실도 습득!
yarn이 이제는 나에게도 훌륭한 도구이지 않을까란 생각이 들어서 실습용 repo를 만들고 직접 Yarn Berry(v4)와 Yarn Workspace를 기반으로 monorepo를 구축해보기로 하였다.

Repo Setup

1. 일단 Repo 디렉토리를 만들어서 루트 경로에 yarn workspace를 init하고, yarn berry를 활성화한 뒤 zero-install 없는 PnP를 설정해준다.

# File: .gitignore
# ...ignores
# Node.js - Yarn Berry (Disable zero-install, Enable PnP)
.yarn/*
!.yarn/patches
!.yarn/plugins 
!.yarn/releases 
!.yarn/sdks 
!.yarn/versions 
.yarn/cache/ 
.yarn/unplugged/ 
.yarn/build-state.yml 
yarn-error.log

# File: .yarnrc.yml
nodeLinker: pnp
yarnPath: .yarn/releases/yarn-4.4.1.cjs

2. yarn create vite를 사용해서 packages/fe/webclient 위치에 하나의 React 앱을 생성했다.

Yarn PnP의 구조상 .yarn/unplugges에 의존성 압축파일들이 깔려있으면서 node_modules가 일체 생성되지 않았고, .pnp.cjs와 .pnp.loader.mjs에 module resolution을 수행하기 위한 뭔가가 잔뜩 써져있는 것을 볼 수 있다.
.pnp 어쩌구 파일들도 git에서 제외하지 않고 트래킹하는게 일반적이라고 하는데, PR 날릴 때 changed files의 diff에서 yarn.lock와 한세트로 고봉밥 삼총사가 될 것 같은 조짐이 보인다 ㅠ
정정: Zero-install을 사용하지 않을 경우에는 .pnp.cjs 파일을 gitignore해도 된다. https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored 참고

2. Problem

monorepo 구성까지는 좋아보였는데, vscode에서 다음과 같은 문제를 일으킨다.

터미널에서 webclient 패키지의 dev/build 명령어를 써보면 정상적으로 동작 하지만 vscode에서만 모듈을 찾지 못하며 빨간 비명을 지른다.
vscode에서 ZipFS 익스텐션은 이미 설치한 상태이기에 압축파일을 인식할 수 없는 상태는 아니므로, PnP의 적용과 Yarn workspace 사이에서 무언가의 설정 문제일 것이란 짐작이 된다.

여러가지 검색하며 찾아 본 바, Yarn pnp의 module resolution이 기존의 NPM과 다르게 특수하다보니 https://yarnpkg.com/getting-started/editor-sdks 에서 sdk를 설정하라고 한다.

즉시 yarn dlx @yarnpkg/sdks vscode 커맨드를 실행하고 vscode를 재시작해보았다.
그러나 여전히 빨간 비명은 사라지지 않았다! 무얼 놓쳤는지 다시 점검하다가 yarn dlx @yarnpkg/sdks vscode 커맨드 실행중에 다음과 같은 문구를 포착했다.

3. Solution

yarn dlx @yarnpkg/sdks vscode 커맨드에서 sdk 설정을 스킵한 이유는 root의 package.json에 typescript가 없어서이다...따라서 .yarn 디렉토리에 vscode를 위한 sdk가 아무것도 생성되지 않았다

당장의 가장 간단한 해결방법은 monorepo root의 dev dependency로 typescript를 설치한 뒤에 sdk를 설정하는 방법이다.

# 1. Install typescript on your root
yarn add -D typescript
# 2. Setup vscode sdk
yarn dlx @yarnpkg/sdks vscode

이제는 명령어가 typescript를 인식하여 .yarn/sdks/typescript가 생성되었음을 볼 수 있다.

마지막으로 vscode에서 오류가 나고있는 ts 파일에서 cmd+shift+P(macOS 기준 단축키임)을 눌러 작업 영역의 typescript 버전을 사용하도록 선택한다.

이제는 ts 파일의 import statement에서 비명이 사라졌다.

Conclusion

결론적으로 vscode와 Yarn PnP가 함께 생활하기 위해서 root 의존성에 typescript를 추가 설치하였다.
이 상태에서 각 패키지가 root와 다른 버전의 typescript을 쓴다면, vscode에서 시각적으로 보이는 오류와 실제로 tsc를 실행할 때 발생하는 typescript 관련 오류가 일치하지 않아 혼동하는 문제를 마주할 확률이 높다.

내 머릿속 관념으로는 typescript는 각 repo에서 독립적으로 버전을 관리하는 것이 각 패키지를 유연하게 운영할 방법이라고 생각하는데, 코드 에디터 때문에 지속적으로 통일된 버전을 가져갈 수 있을지에 대한 의문이 생긴다. typescript를 업그레이드하는 시점에 일부 패키지에서만 호환되지 않는 코드가 발생한다면? 고쳐야 할 코드가 너무 많다면? 싹 다 고쳐? 업그레이드를 미뤄?

일단 tsconfig를 패키지마다 세분화하여 오류를 최소화 하겠지만, 언젠가는 tsconfig 조정으로 회피할 수 없는 컴파일 오류가 생길 것이다. 결국에는 패키지마다 typescript 버전을 다르게 설치하고 vscode가 지역적으로 tsc를 찾도록 유도하는 방법을 고민해봐야 할 것같다.

Yarn v4가 등장한지 1년이 다 되어가니 이 문제에 대한 우회 방법이 이미 있을 법 한데, 내가 못 찾은 걸 지도 모르니 더 연구해보겠음