[개발일지] 리액트 프로젝트 생성(feat. yarn Berry, typescript)

간단한 커뮤니티를 개발해보면서 생기는 일들을 조금씩 작성해보려고 프로젝트를 생성하기로 했다.
먼저, 프로젝트에 무엇을 사용할지를 고민하다가 토스 블로그에 올라온 Yarn Berry를 활용해 React를 관리해보기로 결정했다.

프로젝트 생성

일단 어떻게 만들지 계획은 없으니 차차 정하기로 하고 저 두가지만 설정해 프로젝트를 만들어 봤다.
간단하게 아래의 코드로 React 프로젝트를 typescript로 설정해 생성해준다.

npx create-react-app@latest projectName --template typescript 

프로젝트가 생성되었으면 아래와 같이 프로젝트 내부로 접근해 npm기반의 의존성 관리를 제거해준다.

cd projectName
rm node_modules
rm package.lock.json

Yarn Berry 설정

이제 yarn을 yarn berry로 버전을 올려보자.

yarn set version berry

yarn을 잘 설정했다면, yarn berry의 PnP기능을 사용하면서 typescript를 정상적으로 사용하기 위해 아래 설정도 해주어야 한다.

yarn dlx @yarnpkg/sdks vscode	//yarn에서 제공하는 vsCode typescript설정 Editor SDK.

마지막으로 zipfs라는 vsCode Extension을 설치해주면 vsCode에서 zip으로 묶인 PnP의 의존성을 확인할 수 있어 설치하면 좋다.

gitingnore 설정

zero install을 사용하려면 아래와같이 gitignore를 설정해주자.

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

실행

설정이 대충 끝난 것 같아 yarn install과 yarn start를 통해 프로젝트를 실행시켜봤다.

근데 바로 생긴 아래의 에러.

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 | });

확인한 결과 App.test.tsx에서 생긴 오류로 나와 같은 사람들이 꽤 있었다. (참고)
결국 아래와 같이 tsconfig.json에 아래 코드를 추가하고

"types": ["node", "jest", "@testing-library/jest-dom"]

@testing-library/jest-dom을 제거하고, devDependencies에 추가하여 해결할 수 있었다.

yarn remove @testing-library/jest-dom
yarn add -D @types/testing-library__jest-dom

아래의 코드를 tsconfig파일에 추가하라는 말이 있는데 되긴 하겠지만, 이 방법은 테스트코드를 사용하지 못해 추천하지 않는다.

"exclude": [
    "*/**/*.test.tsx"
  ]

후기

결과적으로 빠르고 쉽게 yarn berry를 사용한 react 프로젝트를 생성했다.
위에 언급한 토스 블로그에서 장점들을 확인했지만 사용하면서 좀 더 알아보기로 하고,
일단 어떻게 만들지를 좀 구상하고 시작해 봐야 할 것 같다.