201212 웹 세미나

주제 : 나만의 디자인 시스템을 만들자

포트폴리오를 만들다 보면 자주 사용하는 컴포넌트들이 있다. 그러한 컴포넌트를 재활용할 수 있는 방법이 없을까? 이번 세미나에서는 자신만의 디자인 시스템을 만들고 배포해보는 시간을 가져보자

🖋 Written with 🔥 by Jod

실습하기 전 준비사항

1. Node.js

• Node.js 최신 버전 다운로드

2. 텍스트 에디터

• VS Code 다운로드

3. NPM 계정

• NPM 계정만들기 -> NPM 이메일 인증까지 완료

사용기술

번들러

• Rollup

스타일링 라이브러리

• Sass
• Styled Components

언어

• TypeScript

CI/CD

• CI : Git Actions
• CD : semantic-release, github pages

시작하기

0. 스토리북 세팅하기 시작하기
1. 첫번째 컴포넌트
2. 스토리북으로 docs작성하기
3. 스토리북 배포하기
4. NPM에 배포하기

배포 URL

• Storybook
• NPM

참고자료

• HarveyD
• Velopert 리액트 디자인 시스템 구축하기 시리즈
• zeke github