타입스크립트는 문법에 대한 제약이 없다시피한 자바스크립트와 달리 엄격하게 지정된 타입만 받게끔 설정해줄 수 있다.

큰 프로젝트에서 사용할 시 유용하다고는 하지만 타입스크립트를 익히는 목적이라면 우리 프로젝트처럼 작은 프로젝트에서도 쓸 이유가 충분하다고 생각했고, CRA를 이용해 타입스크립트로 세팅하는 것을 진행해보았다.

타입스크립트 세팅(CRA 기준)

타입스크립트란?

다음 링크 참조.

리액트 앱 생성

npx create-react-app betti --template typescript

--template typescript 를 통해 typescript가 적용된 프로젝트를 생성할 수 있다.

타입스크립트 설치

npm i typescript

---

eslint 설치

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

eslint가 typescript를 lint하는 것을 허용해주기 위해 @typescript-eslint/parser 를 설치

typescript에 특화된 룰이 설정된 플러그인인 @typescript-eslint/eslint-plugin 를 설치

만약 eslint-plugin 에서 의존성 충돌이 난다면 force 옵션으로 설치하면 된다.

.eslintrc.js 세팅

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    // 필요없는 규칙 : "off" 설정으로 끌 수 있다.
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

프로젝트의 루트에 해당 파일을 생성한다.

npm i -D eslint-plugin-react

의존성을 위해 eslint-plugin-react도 설치해준다.

Prettier 설치

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

prettier - 핵심 prettier 라이브러리

eslint-config-prettier - prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config

eslint-plugin-prettier - ESLint 규칙에 따라 작동하게 해주는 플러그인

.prettierrc.js 세팅

// module.exports = {
//     semi: true,
//     trailingComma: 'all',
//     singleQuote: true,
//     printWidth: 120,
//     tabWidth: 4,
// };
module.exports = {
    tabWidth: 2, // 들여쓰기는 2칸
    useTabs: false, // Tab 대신에 스페이스 사용
    semi: true, // 코드 마지막에 세미콜른 추가
    singleQuote: true, // 문자열을 싱글 따옴표로 설정
    trailingComma: 'all', // 객체, 배열의 원소 뒤에 항상 콤마를 추가함
    printWidth: 80, // 코드 한줄의 최대 길이는 80
    arrowParens: 'avoid', // Arrow 함수에서 하나의 매개변수를 받을때는 괄호를 생략
    endOfLine: 'auto',
  };

공식 prettierrc의 세팅은 주석처리된 내용이다. 입맛에 따라 바꿔도 무방...

VScode 세팅

settings.json

https://lynmp.com/en/article/ms811c9dc50j

VScode의 setting.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
  }
}

Sass 세팅

npm install -D node-sass

---

package.json

{
  "name": "betti",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.37",
    "@types/react": "^17.0.36",
    "@types/react-dom": "^17.0.11",
    "@types/react-router-dom": "^5.3.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.5.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.1",
    "node-sass": "^6.0.1",
    "prettier": "^2.4.1"
  }
}

디렉토리 구조