[myBudget] 프로젝트 환경설정

바닐라 자바스크립트로 만들었던 가계부앱을
React + Typescript 로 다시 만들어보는 프로젝트를 시작했다.
자바스크립트 만으로 프로젝트를 진행했을때는 모르는 것도 많았고,
일단 원하는 동작을 구현하는 것에만 집중했다.
그 프로젝트를 다시보면 나름대로 컴포넌트별 js 파일을 분리했으나
여러군데서 같이 쓰이는 데이터나 함수등을 처리하기 힘들어 global.js 파일을 만드는 식으로 해결했다.
그러다보니 이파일 저파일을 많이 왔다갔다해야 동작 과정을 이해할 수 있는 코드들이 대부분이다.
이번에는 이해할 수 있는 의미있는 좋은 코드를 만드는데 집중해보자.

오랜만에 프로젝트를 새로 시작하다보니 시간이 좀 걸렸다.
설치 중 eslint의 typescript 관련 패키지들이 설치되지 않아서 꽤 애를 먹었다.

앞으로 에러로그는 꼭 텍스트로 복사해두자

나중에야 이 에러가 의존성문제라는 걸 알게됐는데, 다음에 이 오류를 만나면 해결해보자.
이번에는 결국 오류를 해결하지 못한채 서브 맥북에서 프로젝트 환경 생성 후 클론해왔다.
npm 업스트림 종속성 에러와 해결

React, Typescript 프로젝트 생성 (CRA)

나는 깃헙에서 레포지토리를 생성하고 클론해 온 상황이어서 해당 디렉토리의 터미널에서 아래 커맨드를 실행했다.

1. 프로젝트 초기화 (React + typescript)

npx create-react-app ./ --template typescript

ESlint, Prettier 셋팅

1. vscode extensions에서 ESlint와 Prettier 설치

2. CRA로 프로젝트를 생성하면 eslint는 이미 설치되어있다.

package.json 파일을 보면 eslintConfig 속성이 있음을 볼 수 있다.

3. ESlint 규칙 초기화

npx eslint --init

초기화 시 나오는 항목들은 프로젝트에 맞게 설정해주었는데
enforce code style 선택 시 나와야하는 airbnb 스타일이 안나와서 별도로 플러그인을 설치했다.

4. React 규칙을 포함하는 airbnb 버전 플러그인 설치

npm i -D eslint-config-airbnb

5. .eslintrc 파일 확인

다양한 상황의 글들을 참고해 필요한 내용들을 수정, 추가했다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "plugin:react/recommended",
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint", "prettier"],
  rules: {
    "no-console": "off",
    "react/jsx-filename-extension": ["warn", { extensions: [".tsx"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        ts: "never",
        tsx: "never",
      },
    ],
  },
  settings: {
    "import/resolver": {
      typescript: {},
    },
  },
};

6. prettier 설치

npm i prettier --save-dev --save-exact

7. root 경로에 .prettierrc 파일 생성 후 내용 추가

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

8. ESlint와 prettier 충돌 설정 비활성화

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

이후 발생한 린트 에러 해결을 위한 추가작업

1. .tsx 파일에서 JSX 허용되지 않는 에러

ERR JSX not allowed in files with extension '.tsx'

해결을 위해 .eslintrc 파일의 rules에 내용 추가

"rules":{
  "react/jsx-filename-extension": ["warn", { extensions: [".tsx"] }],
}

2. ./App 모듈 경로를 확인할 수 없다는 에러

ERR Unable to resolve path to module './App'

해결을 위해 패키지 추가 설치

npm install eslint-import-resolver-typescript --save-dev

.eslintrc에 setting 속성 추가

"settings":{
  "import/resolver":{
    "typescript":{}
  }
}

3. .tsx 확장자 파일을 가져올 수 없다는 에러

ERR Missing file extension 'tsx' from './App'

해결을 위해 .eslintrc의 rules에 내용 추가

"rules":{
  "import/extensions":[
    "error",
    "ignorePackages",
    {
      "ts":"never",
      "tsx":"never"
    }
  ]
}

[ 참고글 ]
[React] Typescript + eslint + prettier 설정
리액트 프로젝트에 ESLint 와 Prettier 끼얹기

프로젝트 구조 설계 참고

이전 가계부 프로젝트를 진행할때는 UI를 그려놓고
상태값을 공유하는 데이터가 어떤것인지 분류하는 정도로 설계 후 작업을 시작했다.
자바스크립트 실력이 부족해서였을 수도, 좀 더 구체적인 설계를 하지 않아서일 수도 있지만
지금의 내가 보는 그때의 코드는 아주 새롭다. 😂

리액트 설계 가이드
처음에 명확한 설계 원칙을 세워 두지 않고 시작한다면
점차 프로젝트가 커질수록 의존성이 짙고 목적이 사라진 코드가 덕지덕지 작성된다.

[ 프로젝트 설계 원칙]

• 단일책임 설계 : 하나의 컴포넌트는 한가지 역할만 수행하도록 설계한다.
• 제어 위임 : 컴포넌트를 더 작게 만들어 제어를 메인 로직에 위임한다.
  다만 제어를 위임할수록 (컴포넌트를 작게 분리할 수록) 코드 이해 난이도는 높아지므로
  위임과 사용 용이성 사이의 정도를 조절할 필요가 있다.

프로젝트 설계에 대한 좋은 글을 찾았는데 내용을 완벽하게 이해하기는 어렵지만
대략 디렉토리를 어떻게 구성해야할지, 컴포넌트를 얼마나 나눠야할지 판단하는데 도움이 될 것 같다.