거의 3년만에 리액트를 다시 해보네요. 낯설어...

Installation

느낌적인 느낌으로, 뭔가 App.js 도 엄청 간단해진 것 같고 여러모로 발전한 것 같네요.

npx create-react-app test

로 test 프로젝트를 하나 만들고,

pnpm install

설치해요.

PNPM

pnpm 은 새로운 패키지 매니저인데, 중복 모듈들을 심볼릭 링크로 처리하는 등등의 기법으로 무진장 빠르다네요.
실제 체감속도가 만족스럽긴해요.

eslint

npx eslint --init 

초기화 하면,

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? __(y)__
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · __esm__
✔ Which framework does your project use? · __react__
✔ Does your project use TypeScript? · __No__ / Yes
✔ Where does your code run? · __browser__
✔ What format do you want your config file to be in? · __JavaScript__
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint@latest
✔ Would you like to install them now? · No / __Yes__
✔ Which package manager do you want to use? · __pnpm__

기본 물음에 적절히 대답을 선택해주면 되고,
그러고 나면 .eslintrc.js 이 자동 생성 되는군요.

prettier

pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier

프리티어 관련 의존성을 devDependencies 로 추가하면 되겠네요.

.eslintrc.js

프리티어 설정을 추가해서 eslint 와 잘 어우러지게 하는게

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended', // 추가
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'prettier/prettier': 'error', // 추가
  },
}

추가 주석된 부분을 새롭게 넣어주는 거에요. eslint 플러그인으로 등록하고, rules 항목은 프리티어 규칙 위반하면 error 가 던져지니까 컴파일이 안돼서 진행이 안되겠네요.

.prettierrc.js

프리티어 옵션은 .prettierrc.js 파일로 진행하면 돼요.
package.json 이 있는 루트 디렉토리에 파일을 만들어서,

.prettierrc.js

module.exports = {
  arrowParens: 'avoid',
  semi: false,
  singleQuote: true,
  trailingComma: 'none'
}

변경하는 설정들을 넣어줘요.

Prettier Options

모든 옵션에 대한 설명은 https://prettier.io/docs/en/options.html 에서 확인하세요.

이렇게 한 후에 IDE 에서 프리티어 실행하는 방법도 있지만

prettier .

CLI 에서 실행하면, 모든 파일들이 한방에 프리티어 설정으로 포맷팅이 되네요.

.prettierignore

git 의 tracking 을 회피하는 것과 똑같이 .prettierignore 가 있어서 프리티어를 회피할 수 있어요.