리액트 + 자바스크립트 프로젝트 -> 리액트 + 타입스크립트 프로젝트로 마이그레이션

준비사항

---

CRA 로 제작한 나의 프로젝트에 기존 JS언어를 TS언어로 변경하여 마이그레이션을 하려고 했다.
처음에 리액트 프로젝트를 시작할 때 React-TS 템플릿으로 시작하면 되지만 기존에 있는 파일을 TS 파일로 변환 시키고 싶었다.

install

기본적으로 TypeScript를 설치해야한다.

npm install --save typescript @types/react @types/react-dom @types/node

typescript : TypeScript 컴파일러를 설치, JavaScript의 타입 지정을 할 수 있는 정적 타입 언어로 변환해주는 도구
@types/react, @types/react-dom : TypeScript로 React를 사용할 때, React, React-DOM의 타입 정보가 필요하기에 설치
@types/node : Node.js의 타입 정의 파일을 설치 Node.js의 기본 라이브러리 및 API에 대한 타입 정보를 제공

tsconfig.json

프로젝트의 구조와 요구 사항에 따라 다르게 설정할 수 있는 옵션들을 선택할 수 있다. 여러가지의 기본적인 세팅은 여러가지지만, 내가 선택한 기본적인 세팅은 이렇다.

{
  "extends": [
    "eslint:recommended",                            // ESLint에서 제공하는 기본 규칙을 사용합니다.
    "plugin:@typescript-eslint/recommended",         // @typescript-eslint 플러그인에서 제공하는 권장 규칙을 사용합니다.
    "plugin:react/recommended",                      // React 플러그인에서 제공하는 권장 규칙을 사용합니다.
    "prettier/@typescript-eslint",                   // @typescript-eslint와 Prettier의 충돌을 방지하기 위한 설정입니다.
    "plugin:prettier/recommended"                    // Prettier에서 제공하는 권장 규칙을 사용합니다.
  ],
  "parser": "@typescript-eslint/parser",              // TypeScript 코드를 파싱하기 위한 파서를 지정합니다.
  "parserOptions": {
    "ecmaVersion": 2018,                              // 사용할 ECMAScript 버전을 지정합니다.
    "sourceType": "module",                           // ECMAScript 모듈 형식을 사용합니다.
    "ecmaFeatures": {
      "jsx": true                                     // JSX 문법을 활성화합니다.
    }
  },
  "plugins": ["@typescript-eslint", "react"],        // 사용할 ESLint 플러그인 목록입니다.
  "rules": {
    // 프로젝트에 따라 추가적인 ESLint 규칙을 설정할 수 있습니다.
  }
}

ESLint & Prettier

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier

프로젝트를 같이 진행할때, 일관성있게 프로젝트를 진행하기 위해 선택하는 옵션이다. 누구는 이렇게 저렇게 하다보면 통일성이 없기에 개발에 어려움이 있을 수 있기 때문이다.

ESLint

코드 품질을 유지하고 일관성을 확보하기 위해 사용됨, 주석을 통해 누락된 변수, 잘못된 사용법 등을 식별할 수 있게한다.
옵션의 선택은 자유이기에 내가 선택한 옵션은 이렇다.
.eslintrc.json

{
  "extends": [
    "eslint:recommended",                            // ESLint에서 제공하는 기본 규칙을 사용합니다.
    "plugin:@typescript-eslint/recommended",         // @typescript-eslint 플러그인에서 제공하는 권장 규칙을 사용합니다.
    "plugin:react/recommended",                      // React 플러그인에서 제공하는 권장 규칙을 사용합니다.
    "prettier/@typescript-eslint",                   // @typescript-eslint와 Prettier의 충돌을 방지하기 위한 설정입니다.
    "plugin:prettier/recommended"                    // Prettier에서 제공하는 권장 규칙을 사용합니다.
  ],
  "parser": "@typescript-eslint/parser",              // TypeScript 코드를 파싱하기 위한 파서를 지정합니다.
  "parserOptions": {
    "ecmaVersion": 2018,                              // 사용할 ECMAScript 버전을 지정합니다.
    "sourceType": "module",                           // ECMAScript 모듈 형식을 사용합니다.
    "ecmaFeatures": {
      "jsx": true                                     // JSX 문법을 활성화합니다.
    }
  },
  "plugins": ["@typescript-eslint", "react"],        // 사용할 ESLint 플러그인 목록입니다.
  "rules": {
    // 프로젝트에 따라 추가적인 ESLint 규칙을 설정할 수 있습니다.
  }
}

Prettier

코드 서식을 일관되게 유지하는 데 사용, 코드를 자동으로 포맷팅하여 가독성을 향상시키는 역할을 한다.
.prettierrc

{
  "trailingComma": "es5",        // 여러 줄로 구성된 배열 요소, 객체 속성 또는 매개변수를 포맷팅할 때 후행 쉼표를 사용합니다.
  "tabWidth": 2,                 // 탭의 크기를 지정합니다.
  "semi": false,                  // 세미콜론 사용 여부를 지정합니다.
  "singleQuote": true,            // 문자열을 작은따옴표로 지정합니다.
  "printWidth": 80                // 줄 바꿈을 수행할 폭을 지정합니다.
}

위와 같이 하면 기본준비는 끝이다. 그 후에 기존 JS, JSX 파일을 TS, TSX 파일구조로 바꿔서 진행하면 된다.
그 후에 일어나는 일은 다음 포스팅에 적어보겠다.