SookDev

01_npm 대신 yarn 을 사용하는 이유

node modules 때문에 무겁고 느리다. 호이스팅에 의한 유령 의존성

무겁고 느리다.

npm 의 node modules 는 프로젝트 의존성이 많아질수록 무거워진다. 여러 패키지들이 동일한 라이브러리에 의존성을 가지고 있는데, 예를들어 동일한 라이브러리에 각각 다른버전을 사용하면 npm 은 중복된 라이브러리를 설치한다. 이렇게 되면 디스크공간도 소비하고 패키지를 설치하거나 업데이트하는데 많은 시간이 소요되어 패키지를 찾아나가는 과정을 비효율적으로 만든다.

유령 의존성

중복된 패키지를 최소화하여 공간을 절약하고 패키지설치시간을 줄이기 위해 두번째 사진처럼

flat 하게 호이스팅을 일으키게 된다.

이렇게 되면 package.json 에 명시적으로 의존성을 관리하고 있지않은 패키지에도 접근하게 된다. 이런 특성은 의존성 관리 시스템을 혼란스럽게 한다.

그렇기 때문에 이번 프로젝트에서는 Plug ‘n’ play(PnP) 방식인 Yarn berry를 사용한다.

node modules 를 생성하지 않기 때문에 node modules 폴더를 순회할 일이 없다.

대신 pnp.cjs 에서 패키지의 위치와 버전정보를 기록하여 보관한다. (라이브러리 위치 파악 가능)

각 패키지는 버전마다 하나의 zip 아카이브 파일이 생겨 설치시간을 단축시키고 디스크용량확보가 가능하다.

의존성을 호이스팅하지 않고 package.json 에 기술된 의존성에만 접근한다.

모든 패키지 설치정보를 git 과 같은 버전관리 시스템에 저장하고 기록한다.

요약

효율적인 의존성 검색

엄격한 의존성 관리

CI 시간 단축

제로 인스톨 : 패키지를 클론하고 인스톨할 필요없이 사용가능하다.

02_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

Yarn Berry - “$ yarn set version berry”

버전을 berry 로 바꿔준다.

.yarn 과 .yarnrc.yml 파일이 자동으로 생성되었다면 잘 설치된것!

Node linker 설정 - “nodeLinker : pnp”

node modules 를 사용하지 않고 pnp 를 사용하겠다고 명시적으로 작성하겠다는 명령어

생성된 .yarnrc.yml 파일에 직접 작성해준다.

Yarn install - “$ yarn install”

우리의 프로젝트를 yarn berry 에 pnp 로 설치한다.

설치 후 node modules 대신 cache 라는 디렉토리에 zip 파일로 관리되는 리스트가 나온다.

의존성을 관리하는 .pnp.cjs

Yarn Berry 와 IDE 통합 - ZipFS Plugin 설치

vs 코드가 yarn 이 만들어주는 zip 파일을 가져와서 의존성을 해석할 수 있도록 한다.

여기까지 설정한 후 아무 파일에 들어가보면 린트가 다 깨져있는것을 볼 수 있다.

이는 yarn 에서 zip 파일로 관리하고 있기 때문에 이 zip 파일을 해설할 수 있는 플러그인을 설치해줘야 한다.

yarn dlx @yarnpkg/sdks vscode

플러그인 설치 후 cli 에 위 명령어를 치면 타입스크립트를 적용할거니? 라는 팝업이 생성되고,

.vscode 디렉토리가 새롭게 생성된다.

settings.json 내부를 열어보면 타입스크립트와 얀이 잘 연결되어있는것을 볼 수 있고 위의 타입스크립트 린트 에러도 사라지게 된다.

혹시 팝업을 놓치게 되었다면 직접 수정할 수 있다.

그럴 경우 해당하는 타입스크립트 파일 내에서 다음 명령어를 작성한다.

command + P || control + P

> select typescript version 선택

Use Workspace version 선택

git ignore 설정

git 에 올리기 전 필요한 파일과 불필요한 파일을 나눈다.

공식문서에서 제로인스톨을 사용하고 싶을 경우 아래 코드를 git ignore 에 추가하면 된다.


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

Questions & Answers | Yarn

A list of answers to commonly asked questions.

https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

02_Yarn Berry ES Lint + Prettier 설정

yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app Config 설정분리 yarn dlx @yarnpkg/sdks vscode

eslint 와 prettier 의 차이

eslint : 코드 규칙을 어떻게 할지에 대한 설정

prettier : 어떻게 이쁘게 만들어줄지에 대한 설정

yarn dlx @yarnpkg/sdks vscode 작업까지 완료 해야 린트 적용이 된다.

각 파일 하나하나마다 저장을 눌러주기 힘드므로 package.json 의 script 내부에 명령어를 추가해준다.


"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\""
  },
//src 아래에 있는 모든 요소들 중 js,jsx,ts,tsx 로 끝나는 모든 파일들에 적용한다.
//이 모든파일을 순회하며 우리 규칙에 맞게 명령어 하나로 수정하기 위해 동일한 경로에 --fix 만 추가

이제부터 yarn lint:fix 라고 치면 전부 적용된다.

03_Craco 란?

Create-React-App Configuration Override

CRA 에 config 설정을 덮어쓰기 위한 패키지를 뜻한다.

예를들어 상대경로에서 절대경로로 alias 를 변경하는것처럼 리액트 설정파일을 변경할때 craco 를 사용할 수 있다.

바벨,타입스크립트,웹팩 설정을 손쉽게 바꿀 수 있다.

yarn add -D @craco/craco craco-alias

tsconfig.paths.json 파일생성

alias 를 적용할 파일들을 paths 안에 넣는다.


{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"]
    }
  }
}

craco.config.js 파일생성


const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
}

tsconfig.json 에 craco 에서 적용한 alias path 추가


{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "tsconfig.paths.json"]
}