[React] CRA(create-react-app) + TypeScript 세팅하기

이제는 React 프로젝트에 TypeScript를 적용하지 않은 케이스를 만나는 게 어려운 시대가 되었다. 프로젝트 생성할 때마다 매번 공식 문서를 확인하고 검색하는 나 자신을 위해서 기록용으로 소소하게 남겨두려고 한다.

우선 해야 할 작업들은 다음과 같다.

1. CRA(create-react-app)에 TypeScript 템플릿을 적용하여 프로젝트를 생성하기
2. eslint, prettier를 적용하여 코드 컨벤션 보장하기
3. typescript가 필요한 라이브러리 세팅
4. tsconfig.json에 src 절대 경로 세팅

 

1️⃣ CRA(create-react-app) + TypeScript

TypeScript 로 새로운 Create React App 프로젝트를 생성하려면 원하는 디렉터리에서 아래 명령어를 작성한다.

npx create-react-app my-app --template typescript

 

또는 yarn으로 생성하려면 아래 명령어를 입력하면 된다.

yarn create react-app my-app --template typescript

 

그럼 이렇게 프로젝트가 생성되고, tsconfig.json도 생긴 것을 확인할 수 있다. 원한다면 생성된 TypeScript 구성을 편집할 수 있다.

 

2️⃣ ESLint, Prettier 세팅

우선 vscode에 익스텐션을 설치해준다. 

다음으로는 생성한 프로젝트에서 라이브러리를 추가해 준다.

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

 

마지막으로 .eslintrc, .prettierrc을 생성해서 세팅한 뒤, vscode 설정에 가서 Formatter를 검색해서 Prettier로 변경해주자. FormatOnSave도 true로 변경해준다면 저장 시 코드를 포매팅할 수 있다.

.eslintrc

// .eslintrc
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-vars": "error",
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

 

.prettierrc

// .prettierrc
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "orderedImports": true,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "printWidth": 80
}

 

3️⃣ 라이브러리 TypeScript 세팅

필요한 라이브러리도 TypeScript 세팅해 준다.

npm i --save react react-dom typescript
npm i --save-dev @types/react @types/react-dom @types/node

 

4️⃣ tsconfig.json 에 src 절대 경로 세팅

tsconfig.json는 아래처럼 수정해 준다. 사실 변경된 부분은 두 가지다.

• (수정) "target": "es5" -> "es6"
• (추가) "baseUrl": "./src" 

// tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src",
    "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"
  ]
}

 

 

 

📄 참고

• https://create-react-app.dev/docs/adding-typescript
• https://velog.io/@junghyeonsu/React-create-react-app-Typescript-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC