[Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1

 

 

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기

(CRA + ESLint + TypeScript + Storybook + chromatic)

 

 

예전 프로젝트에서 디자인이 수시로 변경되었는데, 디자인 버전 관리 체계도 제대로 이루어지지 않아서 어느 것이 최신 버전인지, 유효한 디자인인지 확인하기 어려웠다. Theme이 세 가지나 다른 디자인에 대해 각각 컴포넌트와 페이지를 다루기가 너무 난감했다. 작성하고 있는 컴포넌트는 재사용을 위한다고 가면, 너무 많은 prop이 걸려서 번번히 테스트 코드도 없는 와중에 디버깅 하기가 힘들었다.

 

 

그래서 이번 프로젝트에서는 디자이너와 협업 효율도 높이고, 시각적으로 컴포넌트들을 따로 볼 수 있으며, 개별적으로 개발해서 bottom-up 방식으로 코드의 안정성에 주고 싶었다. 마침, 다른 개발자는 CI 를 위한 가이드라인을 작성 중이고, 나는 그동안 웹 프로젝트를 위한 프론트엔드 기본 프로젝트 설정을 템플릿화해서 사용할 수 있으면 어떨까 하고 이런 저런 테스트를 시도했다. Storybook은 위에서 언급한 문제점들을 어느 정도는 보충해줄 수 있을 것 같았다. 이번 template 프로젝트에서는 CRA를 통해 기본 리액트 프로젝트를 여는 것부터 시작해서, 다른 프로그래머와 협업 시에 같은 코드 포맷을 유지할 수 있게 도와주는 ESLint/Prettier 설정을 한다. 기본적으로 모든 프로젝트의 설정은 TypeScript를 기본으로 한다.

 

여기까지 협업을 위한 준비가 된다면, Storybook 환경을 시작할 것인데, 단계가 조금 많으니 시리즈로 작성할 예정이다. 나중에는 chromatic으로 정적 스토리북을 배포하는 것까지 해보려고 한다.

 

Create React App

Creact React App을 통해 bare project를 만들어줄 것인데, 여기에 typescript 플래그를 넣어서 인스톨한다.

우선 레파지토리를 하나 생성한다.

 

 

그리고 터미널에 가서, 생성하고자 하는 프로젝트의 경로로 들어가준 다음, 아래 명령어를 실행한다.

# 예) npx create-react-app react-typescript-storybook-template --template=typescript

npx create-react-app <프로젝트이름> --template=typescript 

필요한 디펜던시들을 다 받고 나면, 아래처럼 터미널 화면이 바뀐다.

해당 프로젝트로 진입하고, 코드 에디터를 열어준다.

사실 아래는 타입스크립트 플래그를 넣지 않고 인스톨했을 때의 폴더 구조이다.

📦src
 ┣ 📜App.css
 ┣ 📜App.js
 ┣ 📜App.test.js
 ┣ 📜index.css
 ┣ 📜index.js
 ┣ 📜logo.svg
 ┣ 📜reportWebVitals.js
 ┗ 📜setupTests.js

위 폴더 트리 구조에서 아래만 남기고, 아래 코드처럼 js->ts로 바꿔주고 JSX 문법이 있는 파일의 경우 tsx로 확장자 명을 변경해준다. 타입스크립트 템플릿으로 한 경우 생략해도 되는 과정이다.

📦src
 ┣ 📜App.test.js
 ┣ 📜App.tsx
 ┣ 📜index.tsx
 ┣ 📜reportWebVitals.ts
 ┗ 📜setupTests.ts

그리고 필요한 디펜던시를 아래와 같이 받아준다.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

자세한 내용은 이곳에서 더 확인할 수 있다. 기존 CRA 프로젝트에 타입스크립트 추가하기

 

Git initialization

다시 깃헙으로 돌아가서, 이제 원격 저장소를 연결해준다.

echo "# react-typescript-storybook-template" >> README.md  
git init  
git add README.md  
git commit -m "first commit"  
git branch -M main  
git remote add origin [https://github.com/hannah26hannah/react-typescript-storybook-template.git](https://github.com/hannah26hannah/react-typescript-storybook-template.git)  
git push -u origin main

 

TypeScript configuration

그대로 복사해서 실행해주고, 나머지 변경된 소스 코드들도 추가해서 커밋해준다.

tsconfig.json 파일이 없으니 프로젝트 루트에 echo "" > tsconfig.json 으로 파일을 생성해준 다음 아래 코드를 복사해 붙여넣는다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "noImplicitAny": true, // added
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "outDir": "./dist", // added
    "typeRoots": ["./node_modules/@types", "types"] // added
  },
  "include": ["src"]
}

Next : 이제 코드 포맷팅을 위해서 ESLint와 Prettier를 인스톨할 것이다. Git을 통해 소스를 올릴 때 자동으로 ESLint와 Prettier를 실행하게 도와주는 husky와 lint-staged도 같이 인스톨하고 설정해보려고 한다.

 

 

---

여기까지 전체 소스 코드가 궁금하다면, 아래 링크를 참고해주세요. 

 

Full Source Code

GitHub - hannah26hannah/react-typescript-storybook-template: React (TypeScript) project with basic Storybook configuration.