개발 환경

TypeScript / React / SCSS

계획

• 직접 웹팩 설정은 너무 큰 리소스다. CRA 로 시작하자.
• airbnb-eslint를 설정하자.
• prettier 설정도 맞추자.
• SCSS 를 사용하자.
• alias 를 통해 절대경로 설정도 해주자.

과정

create-react-app

npx create-react-app [프로젝트 이름] --template typescript

을 통해 CRA 가 TypeScript 를 이용할 때 필요한 것들을 설치 및 설정 해준다.

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

이후 typescript를 사용하며 필요할 라이브러리를 설치해준다.

alias 설정 (문제 발생…)

처음에 우리가 시도했던 방법은, 그냥 tsconfig.json 에 우리가 사용할 path 의 경로를 넣어주었다.

그러나 이거는 우리가 직접 webpack 과 babel 을 설정 했을 때 가능한 방법이고, CRA 를 사용할 때는 eject 를 통해 CRA 가 숨겨놓은 webpack 과 babel 설정을 다 꺼내놓은 뒤, alias 를 설정 해주거나, 다른 패키지의 도움을 받아야한다.

craco

eject 명령은 되돌릴 수 없는 것이기 때문에 섣불리 사용하지 않는 것이 좋다. (=또한 이렇게 된다면, 굳이 CRA를 사용한 이유가 없다.) 따라서 craco 를 통해 alias 설정을 해보자.

craco 는 Create React App Configuration Override 의 줄임말로, CRA의 설정을 덮어쓸 수 있게 해준다.

npm install @craco/craco --save 로 craco 를 설치해주자.

npm install -D craco-alias 도!

craco.config.js

추가로 세팅한 tsconfig 옵션을 craco-alias 를 사용해 적용시켜 줘야한다. root 디렉토리에 파일을 만들어 모듈을 만들어주자!

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: 'tsconfig.paths.json',
        debug: false
      }
    }
  ]
}

참고로 위 require 문을 import 로 바꿔보려 시도해보았으나, 계속 out of module 에러가 떠, require 문을 통해 임포트 하였다.

위 코드를 통해 alias를 설정해주고, 설정할 주소는 tsconfig.paths.json 에서 정의한다.

tsconfig.paths.json

기존의 tsconfig.json이 초기화 되기 때문에, 이를 방지하기 위해 path 관련된 설정을 따로 모아 추가로 세팅을 해야한다. craco.config.js 에서 선언한 파일명과 같아야한다.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@src/*": [
            "src/*"
          ],
          "@layouts/*": [
            "src/layouts/*"
          ],
          "@components/*": [
            "src/components/*"
          ],
          "@hooks/*": [
            "src/hooks/*"
          ],
          "@pages/*": [
            "src/pages/*"
          ],
          "@types/*": [
            "src/types/*"
          ],
          "@utils/*": [
            "src/utils/*"
          ],
          "@assets/*": [
            "src/assets/*"
          ]
        }
    }
  }

우리는 위와같이 절대경로를 설정해주었다.

tsconfig.json

원래 존재하던 tsconfig.json 에 추가로 설정한 모듈을 넣어주자!

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "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",
    "craco.config.js"
  ]
}

바뀐 부분은 extends 와 include 인데, extends 는 추가로 설정한 파일을 상속받아주는 역할을 하고, includes 는 해당 모듈을 포함하는 역할을 해준다.

tsconfig.paths.json 은 tsconfig.json 에 추가할 부분이기 때문에 extends 에, craco.config.js 는 포함해줘야할 설정이기 때문에 include 에 넣어준다!

package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

마지막으로, 앞으로는 react-script 가 아니라, craco 로 npm 을 실행시켜야 하기 때문에, package.json 의 스크립트를 수정시켜줘야한다.

eslint

eslint 설치

npm install -D eslint
npx eslint --init

아래 명령어를 실행하면 여러 eslint 옵션을 묻는 질문이 나오는데, 각자의 상황에 맞게 선택하면 된다.

플러그인 설치

npm i -D eslint-config-airbnb # 리액트 관련 규칙 O
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-prettier eslint-config-prettier

• eslint-config-airbnb : airbnb가 제작한 플러그인
• eslint-plugin-import : ES6의 import, export 구문을 지원, 필수 플러그인
• eslint-plugin-react : React 규칙이 들어있는 플러그인
• eslint-plugin-react-hooks : React Hooks 규칙이 들어있는 플러그인
• eslint-plugin-jsx-a11y : JSX요소의 접근성 규칙에 대한 정적 검사 플러그인

eslintrc.json

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:react/recommended',
    'standard-with-typescript'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['tsconfig.json']
  },
  plugins: [
    'react'
  ],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'off'
  }
}

prettier

prettier 설치

$npm install -D prettier

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 120,
  "semi": false
}

참고

https://velog.io/@junghyeonsu/React-create-react-app-Typescript-초기-세팅-완벽-정리

https://velog.io/@miiunii/CRACreate-React-App으로-Typescript-설정하기

https://simian114.gitbook.io/blog/undefined/react/cra-import-alias

https://junjangsee.tistory.com/entry/React-CRA-Typescript-환경에서-Module-Alias-설정하기