📖 TIL - PnP 때문에 발생하는 React & TypeScript 환경 이슈 해결하기

오늘 투두리스트 만들다가 갑자기 아래 오류를 만났다.
프로젝트를 설치하고 프로젝트를 열었는데.. 온통 빨간줄 천지였다..

JSX.IntrinsicElements' 인터페이스가 없으므로 JSX 요소는 암시적으로 'any' 형식입니다.

알고보니 yarn 명령어를 잘못 입력해서 Yarn 버전이 업그레이드되며 PnP(Plug'n'Play) 모드가 활성화된 것이 원인이었다.

🤔 문제 원인

Yarn의 최신 버전(Berry라고도 함)은 PnP 모드를 기본으로 사용한다. 이 모드는 node_modules 폴더를 생성하지 않고 의존성을 관리하는 방식인데, React와 TypeScript를 함께 사용할 때 타입 정의를 제대로 찾지 못하는 문제가 발생할 수 있다.
아마도... yarn add를 하려다가 yarn install로 잘못 입력한것이 화근인것 같다.

💡 해결 방법들

1. 직접 타입 패키지 설치하기

PnP 환경에서는 일부 타입 패키지를 직접 추가해야 정상적으로 인식된다:

yarn add -D @types/react @types/react-dom @types/node

설치 후 yarn dev 또는 npm run dev를 다시 실행하면 대부분 해결된다던데.. 이것도 해결하지 못하였다..

2. pnpify 사용하기

PnP 환경에서 타입을 더 잘 찾을 수 있도록 도와주는 도구:

# pnpify 설치
yarn add -D @yarnpkg/pnpify

# VSCode에 PnP 자동 연결
yarn dlx @yarnpkg/pnpify --sdk vscode

VSCode에서 해당 명령어를 사용하였지만.. 역시나 되지 않았다...

3. node-modules 모드로 되돌리기 (가장 간단한 방법)

.yarnrc.yml 파일에 다음 설정을 추가하면 필요한 타입 패키지를 자동으로 연결할 수 있다:

{
  "installConfig": {
    "nodeLinker": "node-modules"
  }
}

설정 후 yarn install 실행하니, 정상적으로 작동은 한다만... 다른 프로젝트를 새로 설치 했을때도 일일히 해당 파일을 넣어야한다는 불편함이 있었다.

4. 전역 설정 제대로 적용하는 방법

yarn config set nodeLinker node-modules

👉 이거 실행하면 ~/.yarnrc.yml (Windows: C:\Users\사용자명.yarnrc.yml)에 설정이 저장됨
👉 이후 새 프로젝트를 만들 때 자동으로 node-modules 방식이 적용돼서 pnp 관련 오류 안 뜸! 🎉

🚀 결론

나는 4번 방법으로 해결했다. 매번 프로젝트마다 타입 문제로 고생하는 것보다 익숙한 node-modules 방식을 계속 사용하는 게 편했다. 자세히 찾아보니 PnP가 용량과 속도 면에서 장점이 있지만, 아직 React 생태계와 완벽히 호환되지는 않는 것 같다.. 실수로 작성한 yarn install이였지만.. pnp에 대해서 가볍게 알아볼 수 있는 계기가 되어서 오히려 좋았을지도..?

앞으로는 투두 리스트 같은 간단한 프로젝트에서도 환경 설정에 주의해야겠다!