아래의 환경을 포함하는 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에 라우터적용

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

---

Storybook 설치

단일 컴포넌트 개발과 테스트에 용이한 툴인 storybook을 설치한다.

npx sb init

init을 하고나면 src/stories, .stories 라는 디렉토리와 많은 파일들이 생성된다.

src/stories 디렉토리는 storybook에서 사용할 story 들을 별도의 디렉토리로 관리한다면 유지하고, 만약 컴포넌트파일과 스토리파일을 함께 위치하는 구조라면 삭제해도 된다.

오핸만하면 cra가 생성한 디렉토리구조, 파일을 변경하기 전에 진행하자.
그렇지않으면 storybook이 cra로 생성한 react 프로젝트임을 제대로 인식하지 못하는 듯 하다.

나의 경우 cra에 세팅해놓은 웹팩버전과 storybook이 세팅한 webpack의 버전이 다른 이슈가있었다.

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5", // 이 옵션을 확인하자.
  },
};

---

SCSS 적용

scss를 적용한다.
node-sass가 설치되어있다면 알아서 로드되도록 cra가 세팅을 해놓았으므로, 웹팩에 별도의 로더세팅을 할 필요 없다.

> npm i node-sass

---

Redux 설치, 적용 (RTK)

RTK를 이용하여 Redux를 적용해본다.

> npm install @reduxjs/toolkit
> npm install react-redux

---

참고

https://toby2009.tistory.com/40