CRA-typescript 로 프로젝트 초기 세팅

CRA Typescript 버전으로 프로젝트 초기 세팅을 한 뒤 기록한다.

++cra로 프로젝트 생성 시 npm i @types/react 해줘야 한다. 왜 그런지는 모르겠다 cra로 제대로 안 깔리는 것 같다 

 

폴더 구조

Source

Gyumong/cra-typescript-boilerplate

---

 

첫 번째

 

cra로 프로젝트를 생성해준다.

npx create-react-app my-app --template typescript

 

두 번째 

ESlint와 prettier 설정

ESLint와 Prettier를
가장 유명한 컨벤션인 airbnb style guide를 적용하여 설정해보려 합니다.

 

npm i -D eslint prettier
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i -D eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-config-airbnb

 

프로젝트 루트 경로에 .prettierrc 파일 생성

 

 

또다시 프로젝트 루트 경로에 .eslintrc 생성

 

 

craco를 이용한 alias 절대 경로 적용

첫 번째 필요 모듈 설치

npm i @craco/craco
npm i craco-alias -D

 

두 번째 package.json scripts 부분 수정

 

 

세 번째 루트 경로에 tsconfig.paths.json 파일을 생성하고 paths 설정

 

 

네 번째 루트 경로에 craco.config.js 파일 생성 

 

 

 

다섯 번째 tsconfig.json 파일에 extends를 추가, include에 tsconfig.paths.json 추가

 

 

SPA 형식에서 페이지를 나눠주기 위해 react-router 적용 후 페이지별로 코드 스플리팅

 

첫 번째 필요 모듈 설치

 

npm i react-router-dom @types/react-router-dom
// 코드스플리팅을 위한 loadable 설치
npm i @loadable/component @types/loadable__component

 

두 번째 src/index.tsx에 라우터 적용을 위해 App 컴포넌트를 아래와 같이 감싸준다.

 

 

세 번째 App 컴포넌트에서 필요 페이지 가져와서 라우터 적용

페이지 단위로 코드 스플리팅 하기 위해 loadable 적용함.

 

 

 

CSS-In-JS 는 이모션을 사용하였다.

npm i @emotion/react @emotion/styled

참고 문서

 

www.npmjs.com/package/craco-alias

craco-alias

loadable-components.com/docs/getting-started/

Loadable Components

• React + TypeScript 환경에서 ESLint, Prettier 설정하기
• React Typescript | 절대 경로 적용하기(feat.React-CRA)
• CRA 환경에서 alias 설정 방법 (craco)