Storybook을 활용하여 본격적으로 디자인 시스템 구축하기

create-react-app, typescript, emotion으로 React 프로젝트 시작하기

CRA + Emotion + Storybook 구축하기

Typescript

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

yarn add @craco/craco
yarn add -D craco-alias

craco.config.js

babel 설정을 override를 해준다.

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        baseUrl: './src',
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
}

package.json

{
	//...
	"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
	//...
}

tsconfig.json

{
  **"extends": "./tsconfig.paths.json",**
  "compilerOptions": {
		//...
  },
  "include": [
    "src",
    **"tsconfig.paths.json"**
  ]
}

tsconfig.paths.json

절대 경로 별칭(alias)

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@atoms": ["./components/atoms"],
      "@molecules": ["./components/molecules"],
      "@organisms": ["./components/organisms"],
      "@templates": ["./components/templates"],
      "@screens": ["./components/screens"],

      "@api": ["./api"],
      "@contexts": ["./contexts"],
      "@hooks": ["./hooks"],
      "@navigation": ["./navigation"],
      "@styles": ["./styles"],
      "@utils": ["./utils"],
      "@/*": ["./*"]
    }
  }
}

emotion

yarn add @emotion/react
yarn add -D @emotion/babel-plugin

@emotion/babel-preset-css-prop 사용하면 the new JSX runtimes 을 사용 못한다.