[React] CRA(create-react-app) + TypeScript 세팅 +.eslintrc +.prettierrc

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

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

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

 

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

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

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

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

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

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

 

2️⃣ ESLint, Prettier 세팅

vscode에 익스텐션을 설치

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

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

// yarn 
yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier --dev

 

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

.eslintrc

// .eslintrc

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "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,
    "comma-dangle": ["error", "never"]
  },
  "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": "none",
  "useTabs": false,
  "printWidth": 160
}

 

3️⃣ 라이브러리 TypeScript 세팅

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

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

// yarn
yarn add react react-dom typescript
yarn add --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"
  ]
}

 

 

5️⃣ index.css 파일 초기화 및 여백 제거

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}
body {
  line-height: 1;
}
ol,ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}