React + Typescript 프로젝트 직접 세팅하고 템플릿화하기

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/*"] } } }

typescript가 지정해준대로 사용하기 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. template

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

반응형

from http://coding-heesong.tistory.com/35 by ccl(A) rewrite - 2021-10-07 00:00:27