이제 그만 하고 싶어

타입스크립트 강의를 듣다가 react-beautiful-dnd를 설치해서 사용하려고 하는데 정말 황당한 에러가 발생을 했다.

Could not find a declaration file for module 'react-beautiful-dnd'

d.ts가 없다는 의미로 생각하고, 해결할 수 있는 방법을 일단 찾아봤다.

현업에서도 이런 에러를 마주칠 분명히 있고, 에러를 발견했을 때 내 행동이 어떠냐에 따라 나를 어떻게 평가하는지 결정이 나기 때문에 미리미리 연습을 해야 했다.

하지만 나는 해결 방법을 찾지 못한 채로 CRA typescript를 다시 했다.

일단 내가 에러를 해결하지 못 한 이유는 라이브러리가 리액트 v18을 지원하지 않는다..! 깃허브 이슈에 많은 사람들이 공통적인 문제를 가지고 있다. 하지만 나는 꼭 이 기능을 사용해야 한다면.. 라이브러리에 의존하지 않고 직접 만들어야 할 것이다.

서칭을 하면서 읽었던 신입 개발자에 대한 냉정한 블로그가 기억이 났다.

어떤 라이브러리가 버전 update를 하면서 마이그레이션을 해야하는 상황에서 신입에게 이 일을 맡겼다고 한다. 신입이 열심히 업무를 진행하던 도중, 오류를 맞이하고 일을 더 진행할 수 없다고 선임에게 보고를 했다.

선임은 당연히 해결방법을 찾아 봤냐고 물었고, 신입은 깃헙 이슈를 보니 공통적인 문제라 안되겠다고 했다.

지금 내 상황이 딱 이렇다. 내가 할 수 있는 게 없는 상황이었다. 아마 나도 일을 했다면 그렇게 좋은 예를 가진 신입이 아니었을 것이다...

문제가 발생했을 때, 문제를 작게 쪼개서 어디서, 어떻게, 왜 발생했는지 '정의'하는 것이 가장 중요하다. 그런데 나는 그렇게 처리를 못 했다.

이런 기본적인 판단을 모두 마친 후에 도움 요청을 통해 해결방법을 찾아 나가는 것이 신입이 최소한으로 지켜줘야할 필요조건이라고 생각이 든다.

그래서 해결은 했고?

일단 처음에 나왔던 에러 메시지를 제거하는데 성공했다. 프로젝트를 다시 설정하고, npm 기반으로 패키지를 설치했고, 해당 라이브러리를 devdependencies에 저장을 했다.

이렇게 한 이유는 원래 에러 메시지에서 이렇게 시도하라고 했기 때문이다.

내가 생각해도 나는 옳지 않다. 이번 기회에 잘 해결해보자

본론은 react typescript 설정하기

타입스크립트를 사용하기 앞서 eslint와 prettier를 설정하려고 이곳저곳을 찾아봤었다. 어떤 경우에는 세미콜론이 붙어 있으면 에러를 내기도 하고, 내가 원하는 대로 설정이 되지 않아 애를 많이 먹기도 했다.

그래서 더이상 혼란에서 벗어나기 위해 설정 방법을 정리하려고 한다.

esLint

자유분방한 자바스크립트의 문법 검사기이다.

1. extension 설치하기

일단 vscode에서 편하게 사용하기 위해 extension을 설치하자

2. 프로젝트에 eslint 설치

npm install -D eslint

3. eslint init

npx eslint --init

ESlint 옵션들이 나오게 되고, 잘 읽어 보고 선택을 해보면 된다!

주의할 점은 import 방식을 묻는 것과, 타입스크립트를 사용하는가, 코드 실행 위치를 잘 선택해 주면 된다.

나는 import/export, yes, node를 선택했다.

4. airbnb 플러그인 설치

가장 유명한 플러그인을 설치하자

npm i -D eslint-config-airbnb-base
npm i -D eslint-config-airbnb
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

5. eslintrc.json 설정

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "airbnb", 
        "plugin:jsx-a11y/recommended", 
        "plugin:import/errors", 
        "plugin:import/warnings", 
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "@typescript-eslint", 
        "prettier"
    ],
    "rules": {
        "linebreak-style": 0,
        "import/prefer-default-export": 0,
        "import/extensions": 0,
        "no-use-before-define": 0,
        "import/no-unresolved": 0,
        "react/react-in-jsx-scope": 0,
        "import/no-extraneous-dependencies": 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
        "no-shadow": 0,
        "react/prop-types": 0,
        "react/jsx-filename-extension": [
        2,
        { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
        ],
        "jsx-a11y/no-noninteractive-element-interactions": 0,
        "@typescript-eslint/explicit-module-boundary-types": 0
    },
    "settings": {
        "import/resolver": {
          "node": {
            "extensions": [".js", ".jsx", ".ts", ".tsx"]
          }
        }
    }
}

깔끔하게 eslint를 설정했다. 하지만 설정을 커스텀 하려면 많은 공부가 필요하다. 규칙에 따라 정말 욕이 나오는 상황이 너무 많이 나오기 때문에 오류를 겪었을 때 인내심을 길러보자..

prettier

프리티어는 너무 유명한 extension이라서 따로 설명은 안 해도 될 것 같다!

우리의 코드의 통일성을 불어넣는 신과 같은 존재이다. 허나 나는 너무 마음대로 변하는 format 때문에 사용하지 않았었다. 왜 그런 미련한 행동을 했을까 많이 후회를 했다. 꼭 사용하자

1. extension 설치

vscode extension에 검색해서 일단 다운 받자.

2. 프로젝트에 prettier 설치

npm i -D prettier

3. .prettierrc 파일 생성

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

4. 전역 설정

전역으로 설정된 prettier도 있고 프로젝트 내에 있는 prettierrc도 있기 때문에 프로젝트 내 파일의 우선순위를 높이는 설정을 추가로 해주어야 한다.

//setting.json
{ 
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "window.zoomLevel": -1,
  "editor.formatOnSave": true,
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[javascriptreact]":{ "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

참고

junghyeonsu 블로그