yarn berry 사용하기

프로젝트를 진행하면서 유령 의존성 때문에 고생을 한 적이 있었습니다.

왜 이런 문제들이 발생했는지 알아보던 도중 yarn berry에 대해 알게 되었습니다.

berry의 장점들에 대해서는 다른 블로그들에서 자세히 설명해주고 있기 때문에 건너뛰도록 하겠습니다.

 

https://yarnpkg.com/getting-started/migration

다음 페이지에서는 migration하는 법에 대해 자세히 설명하고 있습니다.

 

yarn berry를 적용해보자!

 

우선 yarn berry의 체험을 위해 cra를 통해 테스트해보도록 하겠습니다.

npx create-react-app berry --template typescript

berry라는 폴더에서 cra를 설치하도록 합니다.

 

 

 

berry는 node_modules가 아닌 Plug’n’Play전략을 통해 종속성을 관리하고 있습니다.

때문에 node_modules과 yarn.lock 또는 package-lock.js파일은 더 이상 필요 없기에 지워주도록 합니다.

https://yarnpkg.com/features/pnp

다음의 글은 node_modules를 사용할 떄의 문제점과 대안인 pnp.cjs의 장점에 대해 설명하고 있습니다.

 

 

yarn set version berry

위의 명령어를 통해 yarn의 버전을 업데이트 해 줍니다.

yarn —version 명령어를 통해 yarn의 major 버전이 3이면 잘 업데이트가 된 것입니다.

마지막으로 yarn install을 통해 의존성들을 설치해주면 됩니다.

 

 

 

yarn berry는 zip으로 패키지들을 관리하기 때문에 vscode에서 typescript를 이해할 수 없습니다.

따라서 zip을 이해할 수 있도록 zipFS를 vscode 마켓플레이스에서 설치하도록 합니다.

다음으로 yarn dlx @yarnpkg/sdks vscode 명령어를 실행합니다.

자세한 내용은 https://yarnpkg.com/getting-started/editor-sdks에서 확인할 수 있습니다.

dlx 명령어에 대한 내용은 다음 글에서 볼 수 있습니다. https://yarnpkg.com/cli/dlx

설치를 하게 된다면 아래와 같은 것을 확인할 수 있는데, 허용을 한다면 vscode에서 typescript를 이해할 수 있게 됩니다.

이에 대한 설정은. vscode/settings.json에서 확인할 수 있습니다.

혹시 위와 같은 안내가 없다면 cmd + shift + p ⇒ select typescript version에서 use workspace version을 선택하면 됩니다.

 

 

에러 해결하기

yarn start를 하고 나서 App.test.tsx에서 Property 'toBeInTheDocument' does not exist on type 'Matchers라는 에러를 만나게 되었습니다.

 

저는 @testing-library/jest-dom의 버전을 4로 다운그레이드함으로써 해결하였습니다.

yarn remove @testing-library/jest-dom
yarn add @testing-library/jest-dom^4.2.4 -D

또한 src/setupTests.ts에서

import "@testing-library/jest-dom/extend-expect";
import '@testing-library/jest-dom';

 

를 추가하여 해결했습니다.

 

 

다음으로 Failed to load config "react-app" to extend from이라는 에러를 또 만나게 되었습니다.

따라서

yarn add eslint-config-react-app -D

를 하였고, package.json에서 eslintConfig의 extends에서 react-app을 제거함으로써 해결하였습니다.