아래의 환경을 포함하는 React 개발환경을 구성해본다.

• typescript
• react-router
• redux
• jest
• storybook
• scss

---

React App 생성

cra로 프로젝트 생성

CRA를 이용하여 typescript를 지원하는 react-app을 만든다.

> npx create-react-app --template typescript ./my-app
> cd my-app

craco 설치

cra로 생성한 리액트앱은 tsconfig나 웹팩과같은 설정을 사용자가 변경하더라도, 실행할때마다 초기화된다.
수정을 위해선 eject를 해야하는데, 그러면 CRA의 장점이 사라진다.
eject 없이 환경설정을 customize 하기위해 craco 도 설치해준다.

> npm install @craco/craco
> npm install --save-dev craco-alias

typescript paths 추가

상대경로로 import path를 잡게되면 디렉토리구조가 복잡해질수록 import 경로가 복잡해진다.
이를 방지하기위해 craco를 이용하여 typescript paths 정보를 추가해주자.

tsconfig.extend.json 추가

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

tsconfig.json 수정

{
  "extends": "./tsconfig.extend.json", // 생성한파일을 extends 시켜준다.
  "compilerOptions": {
   //...
  },
  "include": [
	//...
  ]
}

carco.config.js 생성, alias 적용

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src", // tsconfig.paths.json에 있는 baseUrl 경로값 맞춰준다.
        tsConfigPath: "tsconfig.extend.json",
        debug: false, //carco.confi 에러가 발생할 경우 true로 바꾸고 콘솔에서 디버깅을 진행한다.
      },
    },
  ],
};

package.json 에서 script 변경

{
  //...
	"scripts": {
      "start": "craco start",
      "build": "craco build",
      "test": "craco test",
      "eject": "react-scripts eject",
      "storybook": "start-storybook -p 6006 -s public",
      "build-storybook": "build-storybook -s public"
    },
  //...
}

---

Rotuer 설치, 적용

라우팅을 위한 React Router 를 설치해주자.

> npm i react-router react-router-dom

lazy loading을 위한 loadable을 설치해주자. 참고

> npm i @loadable/component
> npm i --save-dev @types/loadable__component # TS 사용 시

Route의 적용

• RouterView 컴포넌트 생성
  RouterView는 Vue의 <router-view>에 영감을 받아 직접 만든 컴포넌트다.
• routes 정보 세팅 (lodable 사용)
• App에 라우터적용

단계로 이루어지며, 적용된 코드는 아래와 같다.