[React] Tiny UI Kit 만들어보기

 

1. Repo 생성

---

이번프로젝트에서는 yarn을 사용하겠습니다.

 

2. CRA 프로젝트 생성(typescript)

---

 

yarn create react-app . --template typescript

 

3. Eslint, Prettier, Husky 설정

---

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}

.prettierrc.json

useTabs를 사용하면서 코드를 코드블럭(블로그를 쓰기 위한 도구)에 붙여넣으면 너무 보기 힘들어서 이번에는 사용하지 않았습니다.

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "bracketSameLine": true,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "arrowParens": "always",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf"
}

husky

yarn -D husky lint-staged

# git hook를 활성화
npx husky install

package.json

package.json에 scripts와 lint-staged를 추가합니다. 

"scripts": {
    "precommit": "lint-staged",
    "prepare": "husky install"
    ...
 },
 
 ...
 
 "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  },

hook 생성

npx husky add .husky/pre-commit "npx lint-staged"

추가로 프로젝트에서 절대경로를 사용하기 위해서 

tsconfig.json에 baseUrl, paths를 추가합니다.

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

 

4. emotion 설치

---

yarn add @emotion/styled @emotion/react

 

 

5. storybook 설치 및 기본 설정

---

npx -p @storybook/cli sb init

# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 3000:
yarn start

yarn storybook

 

yarn start

 

emtion과 storybook의 버전 충돌로 .storybook/main.js에 아래와 같이 코드를 입력합니다.

const path = require('path');
const toPath = (_path) => path.join(process.cwd(), _path);

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  # 👇 를 emotion의 버전충돌로 추가해야합니다. 
  webpackFinal: async (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        '@emotion/core': toPath('node_modules/@emotion/react'),
        '@emotion/styled': toPath('node_modules/@emotion/styled'),
      },
    },
  }),
  # 👆를 emotion의 버전충돌로 추가해야합니다. 
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
};

다음에는 storybook으로 기본적으로 응용할 수 있는 컴포넌트들을 만들어 보겠습니다.