React + Typescript 프로젝트 수동 세팅 및 템플릿화

이번 포스팅은 React + Typescript 프로젝트를 직접 빌드업하면서 뜯어보고, Github에 템플릿화 시켜놓기.

1. package.json

$npm init
$npm i react react-dom
$npm i typescript @types/react @types/react-dom

• package.json
• package-lock.json: 내가 의존하고 있는 패키지가 사용하는 혹은 또 의존하는 패키지의 정확한 버전링을 확인할 수 있음.

2. ESLint

코드 검사 도구.

$npm i -D eslint 
$vi .eslintrc

// .eslintrc
{
  "extends": ["plugin:prettier/recommended", "react-app"]
}

3. Prettier

코드 자동 정렬.

$npm i -D prettier eslint-plugin-prettier eslint-config-prettier
$vi .prettierrc

// .prettierrc
{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

4. tsconfig

{
  "compilerOptions": {
    "esModuleInterop": true, // import * as React from 'react' -> import React from 'react'
    "sourceMap": true, // 에러난 위치 찾아줌
    "lib": ["ES2020", "DOM"],
    "jsx": "react",
    "module": "esnext",
    "moduleResolution": "Node",
    "target": "es5",
    "strict": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    }
  }
}

1. typescript가 지정해준대로 사용하기
2. typescript가 지정해준걸 바벨로 커스텀해서 사용하기 (v)
   프론트할 때 바벨을 또 사용하는 이유.
   html, css, image를 코드를 짧게 그리고 한 파일로 합쳐서 전부 자바스크립트로 만들어주기 때문이다.

5. webpack.config.ts

$npm i -D webpack @types/webpack @types/node
$vi webpack.config.ts

• new webpack.EnvironmentPlugin:
  노드 런타임에서 사용할 수 있는 process.env.*를 사용할 수 있도록 해줌.
• [name].js:
  output.filename에 name을 [, ]로 감싸주면 entry.app을 여러개 만들 수 있다.

6. index.html 파일 생성

typescript, css도 js로 변환해주는 webpack을 설정해줬는데, 
html은 직접 만들어줘야함.

7. template

https://github.com/poburi/poburi-react-ts-template