REACT 공식문서를 보고 typescript에 맞는 CRA로 개발환경 설정해보기

1. CRA

---

참 편한 CRA. 이젠 typescript까지 자동으로 설정해준다.

npx create-react-app my-app --template typescript
간단하게 이 명령어 하나로 끝이난다.
manually setting up은 나중에 해보자.

2. ESLINT와 PRETTIER 설정

코드를 간편하게 작성하게 도와주는 eslint와 prettier설정을 typescript에 맞게 해보자

---

2.1 eslint

eslint linting 라이브러리 eslint,
eslint가 typescript를 lint 할 수 있도록 허용해주는 parser인 @typescript-eslint/parser
typescript에 구체화된 ESLINT rule들을 잔뜩 포함하는 플러그인인 @typescript-eslint/eslint-plugin

이 3가지를 package manager NPM을 통해서 설치할 것이다.

npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

설치가 완료되면 configuration 파일인.eslintrc.js 을 프로젝트 디렉토리 최상단, 즉 root 디렉토리에 만들어준다.

일단

module.exports = {
  parser: "@typescript-eslint/parser", 
  extends: [
    "plugin:@typescript-eslint/recommended" 
  ],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module" // Allows for the use of imports
  },
  rules: {
  }
};

이렇게 설정해주고 react에서 타입스크립트를 사용하려면 eslint-plugin-react 의존성(?)을 설치해줘야한다.
npm i -D eslint-plugin-react로 설치해주고
.eslintrc.js 파일을 아래와 같이 다시 설정해준다.

module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  extends: [
    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      jsx: true // Allows for the parsing of JSX
    }
  },
  rules: {
  },
  settings: {
    react: {
      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  }
};

참조한 블로그에 따르면

rules: {
//...
}

rules 부분에 Lint할 조건들을 적어주면 된다고 적혀있지만 prettier config를 통해서 바로 formatting으로 해주려고 한다.

2.2 prettier

프리티어는 ESLint와 함께 잘 작동하며 코드의 format을 자동으로 잡아주는 아주 좋은 extension이다.

---

prettier: The core prettier library
eslint-config-prettier: Disables ESLint rules that might conflict with prettier
eslint-plugin-prettier: Runs prettier as an ESLint rule

핵심 prettier 라이브러리인 prettier와
prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config인 eslint-config-prettier 그리고
ESLint 규칙에 따라 작동하게 해주는 플러그인인 eslint-plugin-prettier
이렇게 3가지를 아래의 명령어로 설치해준다.

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

그 후 eslint와 마찬가지로 .prettierrc.js파일을 프로젝트 디렉토리 최상단에 만들어주고
안의 내용을 아래와 같이 채워준다.

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4
};

위의 내용은 그냥 하나의 예제일뿐 나중에 내가 원하는 조건으로 다시 바꿔줄 것이다.
.prettierrc.js파일 내용을 채워준 후 .eslintrc.js파일 내용을 다시 바꿔주는데
블로그에서는 아래의 코드로 "대체"하라고 했으나 나는 수정된 부분만 바꿔주고 곂치지 않은 내용들은 그대로 유지하였다.

module.exports =  {
    parser:  '@typescript-eslint/parser', 
    extends:  [
        'plugin:@typescript-eslint/recommended', 
        'prettier/@typescript-eslint', 
        'plugin:prettier/recommended',  
    ],
    parserOptions:  {
    ecmaVersion:  2018, 
    sourceType:  'module', 
    ecmaFeatures:  {
      jsx:  true,  
    },
    },
    rules:  {
    // 추후 .prettierrc.js 파일에서 설정해줄 예정
    },
    settings:  {
      react:  {
        version:  'detect', 
      },
    },
  };

extend에 내용이 추가된 것 jsx부분이 빠진것 setting부분이 빠진것 이유에 대해서는 설명이 안나와있고 검색해도 알기 어려웠다. 일단 유지해보고 테스트 해보았을 때는 문제가 없었기에 그대로 유지하기로 결정했다.

• expend에 airbnb스타일을 너무나도 적용하고 싶어서 아에 airbnb+typescript+eslint+prettier를 적용하는 블로그를 보고 따라했으나 대 실패였다.
• 그래서 여기서 airbnb config/plugin을 설치해서 expends에 추가하여 적용해보았으나 역시 대실패. 어느 하나의 format으로 prettier가 포멧팅해주지 못하였다. 그래서 airbnb스타일은 내가 신경써서 써 나가는걸로..... (이거 적용시키려고 밤을 꼬박 세워서 더욱 더 아쉬웠다.)

2.3 format 설정하기

이 부분은 prettier 공식문서를 보고 내 입맛대로 설정하였다.

---

.prettierrc.js파일의 원래 내용은

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4
};

이렇게 설정 되어있었지만 나랑 안맞는다.

그래서

module.exports =  {
    "singleQuote": true, 
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
    "arrowParens": "always",
    "orderedImports": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",
  };

공식문서를 보고 조건들에 맞춰서 내가 원하는 설정으로 바꿨다.

3. VSCODE 환경설정

vscode 환경설정을 변경하여 파일을 저장할 때 마다 이쁘게 formatting해주었다.
vscode의 settings.json파일을 열어서 아래와 같이 설정해보자.

---

{
  "eslint.autoFixOnSave": true, // has been deprecated, use editor.codeActionsOnSave 								    // instead 라고 써있었지만 주석 처리를 하면 저장 시 										// formatting이 안되어서 주석을 풀었다.
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ],
  {
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false
  }
}

이미 존재하는 설정들은 대체하고 없는 것들은 추가해주었다.
이렇게 설정하고 나서 시도해보니 아주 잘 설정되고있었다.
또한 지금까지는

import React from 'react'
import ReactDom from 'react-dom'

에서 from이 자꾸 밑줄이 처졌다.
그 부분들은
npm install --save@types/+ react/react-dom/react-router/react-router-dom 등
나중에 필요할 것 같은 것들도 다 install 해줬다.
이게 무슨 기능이고 무엇을 도와주는지는 잘 모르겠다.
하지만 typescript여서 그런거 같다(?)

---

ending

장정의 반나절의 삽질이 끝났다.
비공개로 작성한 블로그도 총 5개
CRA로 만들고 설정하고 도저히 답도 안나와서 삭제한 것들이 20개는 될 것이다.
그렇다고 이 블로그 내용이 최적화 즉 불필요한 설치없이 불필요한 config 세팅 없이 CRA+ESLint+prettier가 된 것은 아닌 것 같다.
정말정말 불필요한 것들 1도 없이 해보고 싶었지만 fail...
CRA로 만들었는데 필요한 것들만 넣고싶었다는 것도 뭔가 모순같지만
그래도 다음에는 CRA없이 manullay set up에 도전할 것이다!
끝-