[PM] yarn과 yarn berry로 프로젝트 생성하기

🔍 NPM을 안쓰는 이유

1. 무겁고 복잡한 node_module
   프로젝트의존성이 많아질수록 거대하고 복작해짐
2. 비효율적인 설치
   중복된 라이브러리를 설치하여 디스크공간을 많이 소비하게되고 업데이트에 많은 시간소유
3. 유령의존성
   중복된 패키지 의존성을 최소화하여 공간을 절약하고 패키지설치시간을 줄이기위해 호이스팅을 한다. 이런 시스템은 의존성관리 시스템을 혼란스럽게한다.

💡 yarn berry PnP

• PnP(plug 'n' play)
  -node모듈폴더를 사용하지 않고, .yarn폴더에 모듈을 zip압축파일 형태로 관리
  -효율적인 의존성검색
  -엄격한 의존성 관리
  -CI시간단축
  -프로젝트를 gitclone할 시에 패키지설치할 필요없이 바로사용가능(Zero install)
  

💻 프로젝드 생성

1. yarn 설치

// 터미널에서
npm install -g yarn

2. CRA 기반 프로젝트 생성

yarn create react-app 프로젝트명 // 타입스크립트미적용
yarn create react-app 프로젝트명 --template typescript // 타입스크립트적용시

3. yarn berry (PnP) 설정

• Yarn Berry
  yarn set version berry
• Node linker 설정
  노드모듈 제거후 .yarnrc.yml파일에서 아래 입력
  NodeLinker:pnp
• yarn install
  yarn install
• yarn berry와 IDE통합
  ZipFS Plugin설치
  
• yarn dlx @yarnpkg/sdks vscode
  *타입스크립트버전말풍선뜨면 허용해주기
• .gitignore 설정

// zero install사용시
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

- App.test.tsx 오류

// 터미널
$ yarn remove @testing-library/jest-dom 
$ yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom

정상적으로 실행완료

📌 ESLint와 prettier설정

EsLint는 코드규칙, prettier은 이쁘게 만들어주는 것

⭐ 설정

1. 터미널 설치

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

2. Config 설정분리

• package.json에서 exlintConfig부분 삭제
  
• .eslintrc.json 코드작성

// 상위폴더에서 .eslintrc.json 파일 생성
{
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:prettier/recommended"
    ],
    "plugins":["prettier"],
    "rules":{
        "prettier/prettier":"error"
    }
}

• .prettierrc 파일 생성 후 코드작성

{
    "useTabs": false,
    "printWidth": 80,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "all",
    "endOfLine": "lf",
    "semi": false,
    "arrowParens": "always"
}

• settings.json
  코드추가

 "editor.codeActionsOnSave": {
        "source.fixAll.eslint":true 
 },
 //윈도우사용시 추가
  "files.eol": "\n",

3. yarn dlx @yarnpkg/sdks vscode
4. 파일들을 순회하면서 규칙 적용을 위한 명령 등록

// package.json script 명령어코드추가
   "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix":"eslint --fix \"src/**/*.{js,jsx,ts,tsx}\""

• 터미널에 명령어 입력
  yarn lint:fix

📌 Alias 설정

💡 Craco

: CRA configuration Override의 약어로, CRA에 config설정을 덮어쓰기위한 패키지(../.../../app.js 같은 복잡한 import 주소 방지)

• Craco Alias 설정
  - yarn add -D @craco/craco craco-alias
  • tsconfig.paths.json 정의
  • craco.config.js 정의
  • Tsconfig에 tsconfig.paths.json extends 시키기