[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)

회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다.
그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다.
각각의 역할은

Storybook : UI 컴포넌트 모음 레포, UI 컴포넌트 명세서
Bit : UI 컴포넌트 공유. 개별 컴포넌트 단위 관리(import, export, version) Cloud 이다.

다시말해 Storybook 은 UI 컴포넌트 단위로 만들어 놓고, Bit은 개별 컴포넌트를 공유하는 클라우드의 역할을 한다.

시연해볼 구조

Setting & Start

$ yarn
$ yarn storybook

Work Flow 시연

대상 Bit 레포 주소
Export 해볼 레포 주소
Import는 로컬에서
Bit 계정에 로그인하지 않고 CLI만 설치하면 가져다 쓸 수 있음. Bit으로 Export 만 로그인 필요.

1. Storybook 시연

$ yarn storybook

2. Bit 시연

Export to Bit

Bit의 컬렉션과 컴포넌트 설명 : 주소

로그인

Storybook 레포지토리(여기)에서 Bit cloud로 export할 대상 컴포넌트를 아래의 명령어로 추가

추가시 파일내에서 Import한 것들도 추가해주어야함.

 $ bit add <Bit에 추가할 대상 컴포넌트 path> --id <컴포넌트 이름 설정>

 // 예시
 $ bit add ./src/components/Button/Button.vue --id virnect-button
 $ bit add src/utils/color.js

태그 입력
```
 $ bit tag --all 1.0.0
```
상태 확인
```
 $ bit status
```

푸시

 $ bit export <유저명>.<컬렉션 이름>

 // 예시
 $ bit export seunghyum.virnect-test

import from Bit

로컬 프로젝트 만들기

  $ vue create test-storybook-bit
  $ cd test-storybook-bit
  $ yarn
  $ yarn serve

Bit에서 필요한 컴포넌트만 가져오기

 $ bit import <유저명>.<컬렉션명>/<컴포넌트 이름>

 // 예시
 $ bit import seunghyum.virnect-test/virnect-button

node_modules 파일안의 @bit 폴더에 저장됨.
import 콜렉션이름 from ‘@bit/…‘으로 가져와 쓸 수 있음.

참고

UI 컴포넌트 참고 사이트 : https://bit.dev/lusaxweb

2023 1
2022 2
2019 45
2018 1

2023

Flutter 맛보기 1

3 분 소요

직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다

2022

D3.js 차트 개발 Hands on lab

5 분 소요

직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다

직방이 사용자 행동 로그를 관리하는 방법. ZAMS

최대 1 분 소요

직방에서 작성했던 블로그 글을 공유합니다.

2019

[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)

1 분 소요

회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...

[Scaffold] Scaffold Module 개발

최대 1 분 소요

도입 이유

[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계

2 분 소요

작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...

[Git] Git Command 정리

3 분 소요

Git 시스템 이해하기

[Design Pattern] Monorepo 공부

2 분 소요

결론

[Methodology] CDD(Component Driven Development) - 테스트(2/2)

1 분 소요

Intro

[Methodology] CDD(Component Driven Development) - 계획(1/2)

1 분 소요

CDD(Component Driven Development)란?

GraphQL, Prisma, Apollo 공부

2 분 소요

GraphQL? RESTful?

[CodingTest] Combination(조합) 문제풀이 2

최대 1 분 소요

문제

[CodingTest] Combination(조합) 문제풀이 1

1 분 소요

문제

[ESlint & Prettier] 개발 관습 설정 in Visual Studio

1 분 소요

회사 프로젝트를 작업하기 전 프론트엔드 개발자들 간의 코드 규칙을 Eslint와 Prettier 설정을 맞춰 관리해가는 방향을 정했다. 아직 협업을 할 경우는 없지만 미래에 인수인계 받거나 협업을 진행할 경우 코드관습이 달라 고생할 경우를 대비하기로 했다. 설정은 작업을 진행하며 ...