들어가기 전에..

한달 안에 프로젝트를 끝내야 하는 상황에서 메인프로젝트 멘토님께서 타입스크립트를 사용하는게 공부가 많이 돼고, 앞으로 개발 공부에 도움이 많이 될거라는 조언을 주셨다.
사실 프리프로젝트에서 자바스크립트로 클론코딩을 하는 도중에 배포하는데 실패한 경험도 있고, 2주 라는 짧은 시간이였지만, 거의 밤을 샌 적이 많아서.. 새로운 언어를 사용한다는데 부담이 많이 되었다..😢
하지만 팀원들이 원했고, 나도 부담은 됐지만, 부딪혀보자 라는 마인드로 타입스크립트를 쓰기로 결정했다!!
사실 시작도 전에 초기 환경 설정에서 CRA하는 것과 다르고, 여러가지 라이브러리를 타입스크립트로 install하는 것 부터 삐걱였지만..?🥲 나는 혼자가 아니고, 같은 메인팀원들과 함께 할 생각을 하니 매우 든든하다! 화이팅!!💪💪🦾🦾

메인프로젝트에서 React Vite를 사용한 이유

• 빠른 esbuild쓰고, 라이브러리를 설치하자마자 미리 번들을 만들어 놓고, 소스코드를 필요한 것만 건들고, 파일하나가 수정하면 변경사항만 반영해서 번들링하기때문에 빌드시간이 웹팩과 비교해서 빠르다.

React Vite

Vite란?

• 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구
• 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공한다.

프로젝트 초기설정(Typescript, React,Vite)

• 이미 리엑트 앱을 만들었을 경우

1. npm create-react-app
2. npm install typscript 
    @types/node 
    @types/react 
    @types/react-dom 
    @types/jest
    @types/react-router-dom

• 처음부터 typescript react app 실행할 때

1. npm create vite@latest 
  # - ok to process ? (y) => y
  # - project name - viteProject => 자신의 프로젝트 이름 작성
  # - select a framework => React
  # - select a variant => Typescript
2. cd test
3. npm install
4. npm run dev -> http://127.0.0.1:5173/ (localhost)

• App.tsx 정리
  • 일단은 다 지우고 다음만 남겨둔다. import 문도 모조리 날려도 됨

   function App () {
   return (
     <h1>hello</h1>
   )
  } 
   export default App 

• 폴더 정리
  • creat-react-app 보다는 지워야 할 파일이 더 적음
  • App.css는 삭제
  • maim.tsx 살려두기

eslintrc 설치, 설정

eslintrc 설치

 npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

eslintrc 설정

• .eslintrc.json

{
  "root": true,
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/strict",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:testing-library/react",
    "prettier"
  ],
  "plugins": [
    "react",
    "react-hooks",
    "jsx-a11y",
    "import",
    "@typescript-eslint"
  ],
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    },
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "no-console": "error",
    "import/prefer-default-export": "off"
  },
  "overrides": [
    {
      "files": "**/*.+(ts|tsx)",
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "extends": ["plugin:@typescript-eslint/recommended"]
    },
    {
      "files": ["**/__tests__/**/*", "**/*.{spec,test}.*"],
      "env": {
        "jest/globals": true
      },
      "plugins": ["jest", "jest-dom", "testing-library"],
      "extends": [
        "plugin:jest/recommended",
        "plugin:jest-dom/recommended",
        "plugin:testing-library/react"
      ]
    }
  ]
}

prettier 설정

• .prettierrc.json

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