@dev.leekiseok/elice-storybook

0.1.26 • Public • Published

Chromatic

self 엘리스 pre-onboarding

🚅 무엇을 위한 repo 인가요? -> StoryBook 튜토리얼을 학습하고 만든 결과물 입니다"

안녕하세요 [신입] 프론트엔드 개발자로 지원한 이기석입니다. 면접 준비기간 5일동안 '나는 엘리스 팀들에게 어떤 팀원이 되야할까?' 고민했습니다. 신입 개발자로서 '스스로' '주도적' 인 자세가 중요하다고 생각되었습니다. 그래서 '미리' 준비 해봤습니다. 제가 무엇을 노력해야 할지 찾아보았습니다.

image image

이와 같은 정보를 바탕으로 StoryBook을 활용하여 자체 공통 컴포넌트를 제작하는구나 알게 되었습니다.

5일동안 StoryBook를학습하고 만든 결과물을 공유드립니다

목차

StoryBook이란 ?

StoryBook은 컴포넌트를 개발하고 문서화하며 시각적으로 확인하고 테스트할 수 있는 도구입니다. 이 도구를 사용하면 컴포넌트의 다양한 상태와 속성을 시뮬레이션하고 기능을 시각화하여 디버깅할 수 있습니다. 또한, chromatic을 통해 컴포넌트의 시각적인 변경 사항을 자동으로 확인하고 npmjs에 패키지를 게시하여 재사용 가능한 컴포넌트를 제공할 수 있습니다. StoryBook은 컴포넌트 개발을 위한 디자인 시스템과 일관성을 유지하는 데에도 도움이 됩니다.

StoryBook의 이점

  1. Storybook을 사용하여 컴포넌트를 개발하고 시각적으로 확인할 수 있습니다.

  2. chromatic을 사용하여 컴포넌트의 시각적인 변경 사항을 자동으로 스토리북과 비교합니다.

  3. npmjs에 패키지를 게시하여 다른 개발자들이 재사용할 수 있게 합니다.

  4. Storybook을 사용하여 컴포넌트를 문서화하고 예제와 함께 제공할 수 있습니다.

  5. Storybook을 통해 다양한 상태와 속성을 시뮬레이션하여 컴포넌트를 테스트할 수 있습니다.

  6. Storybook의 Addon을 활용하여 컴포넌트의 동작을 시각화하고 디버깅할 수 있습니다.

  7. 컴포넌트의 디자인 시스템과 일관성을 유지하며 개발할 수 있습니다.

컴포넌트 디자인 시스템 구축하기

StoryBook 보러가기

  1. 공통 컴포넌트 UI 확인할 수 있는 stories 제작
  2. 공통 컴포넌트에 대한 Docs를 제작
  3. 동료들이 확인할 수 있도록 크로마틱에 배포 ( Github Action 활용한 지속적 통합, 배포 ) image

npm 자동 릴리스 배포

git push -> npm 패키징 자동 릴리스 배포 (CICD) image npm 배포 보러가기

모두가 함께 하는 UI 리뷰

현재는 배포되었기 때문에 UI리뷰는 볼 수 없어요 대신 둘러보기 ㄱㄱ UI 컴포넌트 작업관련 동료직원들이 리뷰할 수 있도록하는 Chromatic 내장 기능 uitest PR 과정에서 관련 모든 동료들이 UI 리뷰를 Accept해야 최종 Merge 할 수 있다. image

엘리스 공통 컴포넌트 만들어보기

백문견 불여일코 : 백 번 듣는 것이 한 번 코딩하는 것만 못하다 src/stories/CustomEliceButton/EliceButton.jsx

code

code

만든 공통 컴포넌트 외부 Web에서 사용해보기

이제 공통 컴포넌트를 개인 production 에서 사용가능!<--보러가기

라이브러리를 사용할 곳에서 yarn add @.../learnstory 이런식으로 릴리즈한 패키지를 의존성 파일에 추가시킨 후 사용

image

import

느낀점

StoryBook을 활용하여 공통 컴포넌트를 제작하고 npmjs에 패키지를 게시하는 과정을 배웠습니다. StoryBook은 컴포넌트 개발과 테스트, 문서화에 매우 유용한 도구입니다. 또한, chromatic을 통해 시각적인 변경 사항을 자동으로 확인하고, npmjs를 통해 컴포넌트를 공유할 수 있게 되었습니다. 이를 통해 개발자들과 협업하고 재사용 가능한 컴포넌트를 만들 수 있다는 사실이 흥미롭고 재밌었습니다.

또한, 컴포넌트 디자인 시스템과 일관성을 유지하며 개발할 수 있는 장점을 발견했습니다. StoryBook을 통해 다양한 상태와 속성을 시뮬레이션하고 컴포넌트를 테스트할 수 있으며, Addon을 활용하여 컴포넌트의 동작을 시각화하고 디버깅할 수 있습니다. 이러한 기능들은 개발 과정에서 큰 도움과 더불어, 컴포넌트 개발에 있어서 효율성을 높일 수 있구나 라는 것을 알게 되었습니다.

앞으로는 컴포넌트 디자인 시스템 구축 팁과 npm 패키징 시 어려움 등에 대해 자세히 작성하고, StoryBook과 chromatic을 활용한 컴포넌트 시각화와 테스트, addon을 활용한 동작 디버깅 예제, 컴포넌트 UI 테스트 코드 예제, 그리고 StoryBook을 사용한 컴포넌트 문서화와 예제 제공에 대해 추가로 다룰 예정입니다.

🔎 폴더구조

.
├── node_modules
├── src
├── .babelrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── LICENSE
├── package.json
├── rollup.config.mjs
├── vite.config.js
├── yarn.lock
└── README.md
  1. node_modules: 이 디렉토리에는 프로젝트가 의존하는 모든 코드 모듈(예: npm 패키지)이 포함되어 있습니다.

  2. src: 이 디렉토리에는 애플리케이션에서 볼 수 있는 모든 코드가 포함됩니다.

  3. .babelrc.json: 이 파일은 코드 변환 시 babel이 사용할 프리셋과 플러그인을 지정합니다.

  4. .gitignore: 이 파일은 git에게 프로젝트 개발 과정 중 추적하거나 유지 관리하지 말아야 할 파일을 알려줍니다.

  5. .prettierignore: 이 파일은 prettier에게 포맷하지 말아야 할 파일을 알려줍니다.

  6. .prettierrc: 이 파일은 코드 포맷팅 시 prettier가 사용할 규칙을 지정합니다.

  7. LICENSE: 이 템플릿은 MIT 라이선스 하에 라이선스가 부여됩니다.

  8. package.json: Node.js 프로젝트를 위한 표준 매니페스트 파일로, 프로젝트의 이름, 저자 등 프로젝트 특정 메타데이터가 일반적으로 포함됩니다. npm은 이 파일을 기반으로 프로젝트에 필요한 패키지를 알 수 있습니다.

  9. rollup.config.mjs: 이 파일은 코드 번들링 시 rollup이 사용할 플러그인을 지정합니다.

  10. yarn.lock: 프로젝트를 위해 설치된 npm 의존성의 정확한 버전을 기반으로 자동 생성된 파일입니다. (수동 변경 X!!)

  11. vite.config.js: 이 파일은 Vite에게 코드 번들링 시 사용할 플러그인을 지정합니다.

  12. README.md: 프로젝트에 대한 유용한 참조 정보를 포함하고 있는 텍스트 파일입니다.

Readme

Keywords

none

Package Sidebar

Install

npm i @dev.leekiseok/elice-storybook

Weekly Downloads

27

Version

0.1.26

License

MIT

Unpacked Size

460 kB

Total Files

33

Last publish

Collaborators

  • dev.leekiseok