TypeScript를 사용하는 React App 만들기(feat. yarn berry)

React와 TypeScript를 공부하는 첫 단계로 패키지 관리자 yarn을 사용해 프로젝트를 생성해 보았습니다(yarn 이외에 npm, npx를 이용한 프로젝트 생성 방법도 있습니다).

처음의 목표는 yarn berry(yarn v2)를 global로 설치를 해서 yarn classic(yarn v1)없이 바로 yarn berry + react + typescript 프로젝트를 생성하는 것이었습니다. 하지만 생성된 프로젝트는 실행시 오류가 너무 많이 떠서 포기 하였습니다.

다음으로 선택한 방법이 yarn classic으로 프로젝트를 생성한 다음에 yarn berry로 마이그레이션하고, PnP(플러그앤플레이)설정과 Zeor-Install 설정까지 하는 것이었습니다.

결론부터 말하자면 yarn berry로 마이그레이션 하는것까지는 성공하고, PnP설정에서는 테스트 모듈(@testing-library/jest-dom)에 의존성 문제가 생긴것인지 테스트 프로그램 파일(App.test.tsx)에서 컴파일 오류가 발생해서 실패하였습니다(테스트 프로그램외에는 정상 동작하였습니다).

추가로 한가지 더 이야기 하자면 TypeScript를 사용하지 않는 프로젝트는 전 단계를 성공적으로 마칠 수 있었습니다. 아마도 yarn berry + PnP에서 TypeScript 지원에 문제가 있는것이 아닐까 생각됩니다.

마지막으로 공부를 위해 선택한 프로젝트 환경은 yarn berry + react + typescript + node-modules를 사용하는것 입니다.

 

※ 참고
yarn berry에서 도입된 PnP는 프로젝트에서 사용되는 모듈을 더 효율적이고, 안정적으로 관리해 주는 기능이라고 합니다. PnP를 사용하게 되면 node_modules 폴더를 사용하지 않고, .yarn 폴더에 모듈들을 zip 압축파일 형태로 관리 합니다.

왜 이름을 PnP(플러그앤플레이)라고 지었는지는 모르겠네요(보통 PnP라면 생각하면 실행중에 모듈을 추가하고 제거하는게 가능하지 않을까 생각했는데, 그런 이야기는 찾지 못했습니다).

Zero-install은 PnP 기능을 사용하면 사용할 수 있는 방법으로 프로젝트에서 사용하는 모듈들을 git에 저장해서 내려받았을때 모듈 설치 없이 바로 프로젝트를 실행할 수 있게 하는 것입니다.

기존의 node-modules를 사용할때는 모듈을 git에 저장하지 않고, 의존성만 저장해 뒀다가 내려받은 때에 모듈들은 원격으로 다시 설치하는 방식이었습니다.

Zero-install이 가능해진 이유는 pnp기능이 모듈들을 압축해서 모듈 용량이 대폭 줄었기 때문이라고 합니다.

※ 작업환경은 다음과 같습니다.
- Windows 10 Pro 64bit
- Node.js v16.14.1 LTS : 설치 참조 - https://offbyone.tistory.com/441
- yarn classic v1.22.15 : 설치 참조 - https://offbyone.tistory.com/442
- yarn berry v3.2.0

※ 작업순서 다음과 같습니다.
1. yarn classic으로 react + typescript 프로젝트 생성하기
2. yarn berry로 마이그레이션하기
3. PnP 사용 여부 결정하기
4. 프로젝트의 의존성 설치하기
5. ".gitignore" 설정하기
6. 프로젝트 실행하기
7. PnP를 위한 IDE지원 설정하기

 

실패는 했지만 PnP설정에 사용한 방법도 적어 두겠습니다. 원인이나 해결방법을 아시는 분이 이글을 보신다면 댓글 남겨 주시면 감사하겠습니다.^^

 

 

1. yarn classic으로 react + typescript 프로젝트 생성하기

- 프로젝트를 생성할 폴더로 이동합니다. 저는 "D:\workspace\vscode" 폴더를 사용하였습니다.
- 다음 명령으로 프로젝트를 생성합니다. 현재 yarn 은 classic 입니다. 프로젝트명을 "my-app"으로 하였습니다. 명령이 성공하면 현재 폴더 아래에 "my-app" 폴더가 생성됩니다.

 

D:\workspace\vscode>yarn create react-app my-app --template typescript

2. yarn berry로 마이그레이션하기

- 생성된 프로젝트 폴더 "my-app"으로 들어가서, "yarn set version berry" 명령으로 yarn을 berry로 마이그레이션 합니다. 명령이 성공하면 프로젝트 폴더에 ".yarn" 폴더와 ".yarnrc.yml" 파일이 생성되고, "package.json" 파일에는 yarn의 새 버전 정보가 추가 됩니다. 이제 이 프로젝트 폴더에서는 yarn의 버전이 berry가 됩니다(밖으로 나가면 이전 버전 입니다).

 

D:\workspace\vscode>cd my-app
D:\workspace\vscode\my-app>yarn set version berry

3. PnP 사용 여부 결정하기

- 프로젝트 폴더 내에 ".yarnrc.yml"파일을 열어서 제일 상단에 "nodeLinker" 항목을 추가합니다. 이 항목은 "pnp", "pnpm", "node-modules" 의 값을 가질 수 있습니다.

- PnP사용시 "pnp" 값을 가지거나 nodeLinker항목이 없을 경우 입니다.

 

nodeLinker: pnp

- PnP가 문제를 일으킨다면, node-modules 옵션을 사용할 수 있습니다. 이 경우 yarn 1 처럼 동작하여 node_modules 폴더도 만들어져서 사용되어 집니다.

 

nodeLinker: node-modules

- "pnp" 옵션이 의존성을 엄격하게 package.json에 있는것만을 사용한다면, 조금 느슨하게 관리하는 옵션으로 "pnpm"이 있습니다. 이 항목은 좀 복잡해서 나중에 알아 봐야 겠습니다.

 

nodeLinker: pnpm

- 참고로 PnP가 문제를 일으킬지 확인해보는 명령(yarn dlx @yarnpkg/doctor)이 있습니다. 저의 경우 @testing-library/dom에 문제가 있다고 나옵니다. 이 모듈은 package.json에 명시되어 있지는 않지만 사용되고 있는것 같습니다.

 

D:\workspace\vscode\my-app>yarn dlx @yarnpkg/doctor

...

➤ YN0000: ┌ /D:/workspace/vscode/my-app/package.json
➤ YN0000: │ D:\workspace\vscode\my-app\package.json:8:36: Unmet transitive peer dependency on @testing-library/dom@>=7.21.4, via @testing-library/user-event@^13.2.1
➤ YN0000: └ Completed in 7s 185ms
➤ YN0000: ⠼ --------------------------------------------------------------------------------

➤ YN0000: Failed with errors in 7s 192ms

 

4. 프로젝트의 의존성 설치하기

- "yarn install" 명령으로 모든 의존성이 설치되고, berry로의 마이그레이션이 완료 됩니다.

 

D:\workspace\vscode\my-app>yarn install

 

5. ".gitignore" 설정하기

- git을 사용할 경우 프로젝트 폴더 내의 .gitignore 파일에 다음 항목을 추가합니다.

- zero-install을 사용할 경우 추가할 내용

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

- 사용하지 않을 경우 추가할 내용

.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

6. 프로젝트 실행하기

- 프로젝트 폴더안에서 "yarn start" 명령으로 실행합니다.

D:\workspace\vscode\my-app>yarn start

- TypeScirpt + PnP로 설정 했을때 실행화면 입니다.

TypeScript + Pnp

 

- 이 경우 테스트용 프로그램에 다음 오류가 발생했습니다.

 

Compiled with problems:X

ERROR in src/App.test.tsx:8:23

TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
  6 | render(<App />);
  7 | const linkElement = screen.getByText(/learn react/i);
> 8 | expect(linkElement).toBeInTheDocument();
    | ^^^^^^^^^^^^^^^^^
  9 | });
 10 |

7. PnP를 위한 IDE지원 설정하기

- PnP를 사용하면 모듈을 압축해 버리므로 IDE가 의존성을 찾지 못하게 됩니다. 이 경우 해결 방법 입니다.
- Visual Studio Code를 사용하는 경우 프로젝트 폴더 안에서 다음 명령을 실행합니다.

 

D:\workspace\vscode\my-app>yarn dlx @yarnpkg/sdks vscode

- ZipFS VSCode 확장을 설치합니다(폴더를 vscode로 열면 설치할지 물어보는데, 아니라도 마켓에서 검색해서 설치하면 됩니다). ZipFS 확장은 VSCode가 압축된 모듈 파일의 내용을 검색하고, 수정할 수 있도록 도와 줍니다.

- 다른 IDE 지원은 다음 URL을 참고하세요.

 

https://yarnpkg.com/getting-started/editor-sdks

이것으로 React와 Javascript를 공부하기 위한 프로젝트 설정을 해보았습니다. 원하는 최고의 결과는 얻지 못했지만, 이정도로 하고 진행하려고 합니다. 3일을 투자했는데 PnP 설정은 해결을 못했네요. 추후에 해결 방법이 있는지 더 알아 보아야 겠습니다.