[FE] 1107(화) 개발 기록 ‐ 프로젝트 세팅

Vite + Yarn Berry + React + TypeScript

설정 방법

1. yarn 설치

brew install yarn

2. 템플릿 생성

yarn create vite {파일 명} --template react-ts

생성 후 생성 파일로 이동

3. yarn-berry로 버전 변경

yarn set version berry

4. .yarnrc.yml 파일 nodeLinker 확인
   nodeLinker가 node_modules 인 경우 pnp로 변경 하거나 지워줘야 함 nodeLinker는 default로 pnp임

5. yarn install

yarn install

6. zero install 설정 .gitignore에 추가

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

7. vscode를 사용하는 경우 ZipFS VSCode 확장 프로그램 설치 혹은

yarn add -D @yarnpkg/sdks

이후

yarn dlx @yarnpkg/sdks vscode

를 통해 sdk 설정

8. cacheDir 경로 지정 캐시 경로 설정을 위해 vite.config.ts에 경로를 설정해 줘야함

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
	plugins: [react()],
	cacheDir: './.vite',
});

gitignore에 .vite 추가

9. formatter, linter 필요한 formatter, linter를 yarn으로 설치하고 설정을 진행한다 위의 과정을 거치면 eslint는 기본적으로 설치되어 있어 prettier와 stylelint를 추가적으로 설치해 줬다.