개요

스토리북을 이용해 재사용하기 좋은 컴포넌트를 만드는 연습을 시작했다.
이를 위한 프로젝트 생성 과정을 기록했다.

세팅할 스택들

React, TS, Emotion, Storybook

세팅 과정

1. React, typescript

Yarn을 이용해서 typescript를 사용하는 Create React App을 생성한다

yarn create react-app [project-name] --template typescript

2. Emotion

2-1. Emotion이란?

Emotion은 styled Component와 더불어 가장 유명한 css-in-js 스타일링 라이브러리다.

2-2. emotion 설치

• 우선 react에서 사용할 것이므로 @emotion/react를 설치했다.
• 또한 styled component로 만드는 것 또한 연습해보고 싶어서 @emotion/styled를 설치했다.

yarn add @emotion/react @emotion/styled

2-3. emotion 설정

• Emotion을 사용하기 위해서는 babel preset이나 JSX Pragma가 필요하다.
• 이 작업을 통해 컴파일되는 jsx코드가 react.createElement 대신 emotion에서 제공하는 jsx 함수를 사용할 수 있게 된다.
• 우선 babel preset을 이용해서 해결해보려 공홈에서 알려준대로 바벨 플러그인을 설치한다.

yarn add --dev @emotion/babel-plugin

2-4. 에러❗

그런데 CRA에서는 babel 설정을 커스텀할 수 없는 환경에서는 사용할 수 없고 JSX Pragma를 사용하라는 에러가 발생한다❗

• 따라서 아래와 같은 JSX Pragma를 파일마다 최상단에 작성해야 오류가 해결된다.

/** @jsxImportSource @emotion/react */

• 하지만 이는 매우 번거롭기 때문에 craco를 이용해 babel 설정을 커스터마이징하기로 했다.
• craco는 Create-React-App Configuration Override의 약자로 CRA 설정을 override 할수 있게 도와주는 라이브러리다.

2-5. Craco 세팅

• carco 설치

yarn add @craco/craco

• craco의 설정을 사용할 것이기 때문에 package.json의 react-scripts를 craco로 바꿔준다

{
 ...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
}

• 이제 craco 설정 파일을 만들어야한다. 이를 위해 한 가지 라이브러리를 더 설치한다.

yarn add --dev @emotion/babel-preset-css-prop

• craco 설정 파일인 craco.config.ts를 만들자

const config = {
  babel: {
    presets: [
      [
        '@babel/preset-react',
        { runtime: 'automatic', importSource: '@emotion/react' },
      ],
    ],
    plugins: ['@emotion/babel-plugin'],
  },
};

export default config;

• src/index.ts 맨 앞에 컴파일러 지시어를 넣어준다

///<reference types="@emotion/react/types/css-prop" />

• 마지막으로 tsconfig.json에서 compilerOptions내부의 jsx옵션과 jsxImportSource옵션을 바꿔줍니다.

  "jsx": "react-jsx",
  "jsxImportSource": "@emotion/react",

2-6. Emotion 세팅끝!

• App.tsx에 Emotion 공홈의 예제를 입력해보자.

import { css } from '@emotion/react';

const color = 'white';

function App() {
  return (
    <div
      css={css`
        padding: 32px;
        background-color: hotpink;
        font-size: 24px;
        border-radius: 4px;
        &:hover {
          color: ${color};
        }
      `}>
      Hover to change color.
    </div>
  );
}

export default App;

정상적으로 작동한다!

3. Storybook

다음으로 스토리북을 설치할 차례다

3-1. Storybook 설치

npx storybook@latest init

3-2. 경고 및 해결

• 아래와 같은 경고가 발생해서 @babel/plugin-proposal-private-property-in-object를 개발 의존성으로 설치했다.

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

• 라이브러리 추가 설치

yarn add -D @babel/plugin-proposal-private-property-in-object 

3-3 실행

yarn storybook

정상적으로 작동한다!

참고
https://ssocoit.tistory.com/257