민규의 개발블로그
Typescript + react, webpack 프론트 세팅하기 본문
강의를 보고 Typescript+React+React-route+emotion 등으로 이루어진 프로젝트를 수동으로 세팅해보았습니다.
Source
github.com/Gyumong/ts-react-boilerplate
Gyumong/ts-react-boilerplate
Contribute to Gyumong/ts-react-boilerplate development by creating an account on GitHub.
github.com
첫 시작
npm init으로 생성 그 후
- npm i react react-dom
- npm i typescript @types/react @types/react-dom

ESLint ,Prettier 설정
협업 시 코드 스타일 통일!
eslint - 코드 문법 점검
prettier - 코드 자동 정렬
그다음 eslint와 prettier 연결해주는 모듈 설치
- npm i -D eslint prettier
- npm i -D eslint-plugin-prettier eslint-config-prettier
.prettierrc , .eslintrc 파일 생성 (확장자는 json이든 js 든 자기 마음)
.eslintrc 는 이렇게 작성, 더 복잡하게 설정할 수도 있지만 현재는 prettier한테 코드 모양을 전부 맡길 거라서 이렇게 해둠
prettier 설정은 내 취향대로 이렇게 했다.


typescript 설정
ts > js로 직통으로 바꿔주는 게 아닌 ts > babel > js로 바꿔주는 이유
bable이 css, html , img 파일들을 다 js로 변환해주기 때문
- tsconfig.json 생성
- 언어 문법과 자바스크립트 결과물이 어떻게 나와야 하는지 설정하는 파일
- esModuleInterop: true 설정은 import * as React from 'react'로 가져오는 걸 import React from 'react'로 가져올 수 있게 해 준다.
- sourceMap: true는 에러 났을 때 에러 경로 찾기 쉬워짐
- lib은 ES2020, DOM(브라우저), module은 esnext처럼 최신 설정이지만 target은 es5로 IE 브라우저에서도 돌아갈 수 있게 변환
- jsx는 리액트 개발하니가 다른 프로그램이라고 오인 안 하게 지정해둠
- module: esnext 최신 모듈을 쓰겠다는 의미
- moduleResolution: import, export Node가 해석할 수 있게 하겠다.
- target:es5, 소스코드를 es2020으로 작성하더라도 es5로 변환
- strict: true를 켜놓아야 타입 체킹을 해줘서 의미가 있음.
- resolveJsonModule, import json 하는 거 허락
- path는 import 할 때 경로 편하게 하기 위해서 미리 저렇게 설정해둠

babel 설정
webpack.config.ts 생성 client.tsx 생성 index.html 생성
alias 설정 한번더 해주는 이유? 소스코드 typescript로 치는 동안 typescript 검사기는 tsconfig.json을 보고 검사하고
js로 바꿔 줄때는 webpack에서 검사해주기 때문
entry에서 파일을 선택하면 module에 정해진 rules대로 js로 변환하여 하나의 파일로 합쳐줌(output). plugins는 합치는 중 부가적인 효과를 줌
index.html에 style 태그 안에 작성한 css가 js 파일 실행 이전에 적용되므로 핵심 공통 css 작성
- npm i -D webpack @types/webpack @types/node
- entry에서 파일을 선택하면 module에 정해진 rules대로 js로 변환하여 하나의 파일로 합쳐줌(output). plugins는 합치는 중 부가적인 효과를 줌
- ts는 babel-loader로, css는 style-loader와 css-loader를 통해 js로 변환
- babel에서는 @babel/preset-env(최신문법 변환) @babel/preset-react(리액트 jsx 변환), @babel/preset-typescript(타입 스크립트 변환)
- npm i -D css-loader style-loader @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript
- publicPath가 /dist/고 [name].js에서 [name]이 entry에 적힌 대로 app으로 바뀌어 /dist/app.js가 결과물이 됨.
- index.html 작성
- #app 태그에 리액트가 렌더링됨.
- ./dist/app.js로 웹팩이 만들어낸 js파일 불러옴
- tsconfig-for-webpack-config.json
- webpack 할 때 webpack.config.ts를 인식 못하는 문제
- npm i cross-env
- package.json의 scripts의 build를 cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack
- npm run build
- index.html 실행해보기
폴더 구조
- pages: 서비스 page들의 진입점을 따로 만들어둠
- components: 공통되거나 page들의 자잘한 컴포넌트들을 빼둠
- layousts: 공통 레이아웃
- hooks: 커스텀 훅
- typings: 타이핑 들
- utils: 기타 함수
그리고 폴더를 만들고 그 안에 index.tsx와 styles.tsx로 나눠준다.
Router 설정
Switch 태그 안에 태그들 중 하나만 실행
Redirect path 주소로 끝나게 되면 to="경로"로 이동
사용자 경험을 위해 라우트 별로 코드 스플리팅
npm i @loadable/component @types/loadable__component
CSS In JS > emotion
- npm i @emotion/react @emotion/styled