프로젝트 초기 세팅하기

지난 번에 프로젝트 초기 세팅을 했는데 vite + yarn berry를 사용해서 하는건 처음 해봤다. 정리도 할 겸 다시 처음부터 차근차근 세팅을 해보자.

01. Vite로 프로젝트 만들기

Vite 공식문서를 보면 템플릿으로 프로젝트를 만들 수 있다고 한다. TypeSciprt, React를 기반으로 만들거라 react-ts 템플릿을 사용했다.

yarn create vite . --template react-ts

터미널에 yarn -v 명령어를 입력해 yarn의 버전을 확인해보면 1.x.x 버전이다. 아래 명령어를 입력해 yarn berry 버전으로 바꿔주자. 그럼 .pnp.cjs 파일을 포함해 yarn과 관련된 파일 및 폴더가 생성된다.

yarn set version berry
yarn install

02. 필요한 라이브러리 설치

필요한 라이브러리들은 아래와 같다.

dependencies

• @reduxjs/toolkit

• react-redux → Redux와 React 바인딩을 위해 필요

• @emotion/react

• axios

• framer-motion

devDependencies

• vite-plugin-pwa → pwa 설정을 위해 필요

• eslint (이미 설치되어 있으므로 패스)

• prettier

• husky → git hooks 설정을 위해 필요

• vite-plugin-svgr → vite에서 svg 확장자 사용을 위해 필요

• vite-tsconfig-paths → TypeScript에서 path 설정을 위해 필요

• jira-prepare-commit-msg → 커밋 메시지에 Jira 티켓 자동 삽입을 위해 필요

필요한 라이브러리를 의존성에 맞게 설치한다.

# dependencies
yarn add @reduxjs/toolkit react-redux @emotion/react axios framer-motion

# devDependencies
yarn add -D vite-plugin-pwa vite-plugin-svgr vite-tsconfig-paths prettier husky jira-prepare-commit-msg

설치가 끝났으면 .gitignore에 아래 폴더를 추가한다. zero-install을 사용할거라 아래처럼 입력했다. yarn을 사용할 때 .gitignore 에 추가해야 할 것들은 여기를 참고하면 된다.

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

03. vscode에서 TypeScript 사용을 위한 설정

여기까지 하고 vscode를 열어서 tsx 파일을 열면 사진처럼 에러가 나타날것이다. Yarn PnP를 사용할 때 스마트 IDE에서 TypeScript를 작동시키려면 특별한 설정이 필요하다고 한다.

먼저 vscode에서 ZipFS 익스텐션을 설치한다. PnP 모드에서는 패키지를 zip으로 관리하는데, vscode에서 zip 파일을 바로 읽기 위해서 설치해야 한다.

그 다음 아래 명령어를 입력한다. SDKs와 편집기 설정을 업데이트하는 명령어인데 실행하면 .vscode/settings.json 파일이 생성된다.

yarn dlx @yarnpkg/sdks vscode

마지막으로 vscode에서 사용자 지정 TypeScript 설정을 한다.

1. TypeScript 파일에서 cmd + shift + p를 누른다.

2. TypeScript를 검색해서 ‘TypeScript 버전 선택’을 선택한다.

   

3. ‘작업 영역 버전 사용’을 선택한다.

   

다시 tsx 파일을 보면 빨간 에러가 사라졌다. 이제 정상적으로 TypeScript를 사용할 수 있다.

🔽 더 자세한 내용은 yarn Editor SDKs 문서에서 확인