React yarn setting

🐣 Create ReactApp + Typescript setting

npm install -g yarn
yarn create react-app wedding --template typescript

🤖 Yarn Berry(PnP) 설정

Yarn Berry : yarn set version berry
Node linker 설정 : NodeLinker: pnp
Yarn install : yarn install
Yarn Berry 와 IDE 통합 : ZipFS plugin 설치
yarn dlx @yarnpkg/sdks vscode

🤖 gitignore 설정 추가

# yarn zero install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

🤖 App.text.tsx error 해결

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

---

🤖 yarn start

yarn start

---

🐣 vscode 플러그인 설치(Prettier, ESLint extension 설치)

🤖 ESLint setting

yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app

🤖 config 분리

• package.json에 있는 eslintConfig 부분을 분리하는게 좋다.
• .eslintrc.json 파일을 생성하여 package.json 에 있는 eslintConfig 내부를 옮긴다.
  
• 설정 추가
  

🤖 Prettier setting

• .prettierrc 파일 생성 후 다음과 같이 작성한다.
  

🤖 setting.json LF 설정 추가

Mac User

Window User

🤖 EsLint, Prettier 설정 완료 후

yarn dlx @yarnpkg/sdkes vscode

🤖 package.json 설정 추가

yarn lint:fix

---

🐣Craco setting

Create-React-App Configuration Override의 약어로, CRA에 config 설정을 덮어쓰기 위한 패키지

yarn add -D @craco/craco craco-alias

🤖 config 파일 생성

• tsconfig.paths.json 파일 생성
  

• craco.config.js 파일 생성
  

• tsconfig.json에 설정 추가
  - extends, include 부분
  

---

🐣 SCSS setting

scss는 css의 기능을 확장시켜주는 도구

yarn add classname sass

• global.scss 파일 생성
  

• index.tsx 에 import
  

• test 할 파일 생성
  

• App.tsx 코드 추가

yarn add classnames

yarn start

---

🐣 Eslint error 해결

'extensions' has been removed, 'resolvepluginsrelativeto' has been removed.

해당 에러는 eslint가 v.9를 릴리즈하면서 생기는 에러라고 한다.

해결 과정은 다음과 같다.

yarn remove eslint
yarn add -D eslint@8.57.0
yarn dlx @yarnpkg/sdks vscode # yarn berry, zero install 환경인 경우 sdk 업데이트

위 명령어를 실행한 후에는 eslint 설정 파일을 다음과 같이 수정한다.

참고 블로그

참고 스택오버플로우 링크

---