Skip to content

Commit 1400890

Browse files
author
gitgitWi
committed
Post (ds01) complete post, formatting
1 parent af3d0ff commit 1400890

File tree

2 files changed

+176
-88
lines changed

2 files changed

+176
-88
lines changed

‎pages/posts/design-system/01.md

Lines changed: 176 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,131 @@
1-
[***Draft***]
1+
# [FE쥬니어의 Design System] 01. Personal Design System, `Storybook`, `Vite`로 환경 설정하기
22

3-
# [Design System]
3+
> _`Storybook` + `React`로 DesignSystem/ComponentLibrary 만드는 튜토리얼은 이미 블로그, Youtube에 널려있다_
4+
>
5+
> _Airbnb, GitHub 등 개발팀에서 만든 `Storybook`은 물론이고, GitHub가 공개된 경우도 있다 *(아래 references 참고)*_
46
5-
- `Storybook`, `Vite`로 디자인 시스템 만들기
7+
[👉  구현 중인 `GetIt-UI` GitHub 보기](https://github.com/gitgitWi/getit-ui)
68

7-
## Contents
9+
## Motivation
810

9-
- Storybook + React로 디자인 시스템을 만드는 튜토리얼은 물론 Airbnb, Github 등에서 실제로 사용중인 Storybook, 심지어 GitHub가 공개된 경우도 있음, 아래 references를 참고하자
11+
- 요즘 차트 컴포넌트 구현을 `Storybook` 기반으로 진행중([zum-stock-line-stories](http://zum-stock-line-stories.surge.sh/))인데, 생각보다 엄청난 생산성 향상을 맛보며 재미를 느낌
1012

11-
### Motivation
13+
- 별도의 페이지를 구성하지 않아도 컴포넌트 구현 결과를 HMR로 볼 수 있음 (_이건 당연한 거!_)
14+
- **_개발자 도구 들어가서 ➡️ 메뉴를 클릭하고 ➡️ 뭔가를 조정해야 하는 수고들을 덜어줌!_**
15+
- [Measure & Outline](https://storybook.js.org/docs/react/essentials/measure-and-outline): 컴포넌트 사이즈, 아웃라인 등 확인 가능
16+
- [Viewport](https://storybook.js.org/docs/react/essentials/viewport): mobile viewport preset 가능
17+
- Docs로 한번에 여러 렌더링 상태 확인 가능
18+
- addon 생태계가 활성화되어있음
19+
- Jest, Cypress 등 다양한 툴과의 통합
20+
- `Storybook`을 따로 빌드, 배포 가능
1221

13-
- 요즘 차트 구현을 Storybook 기반으로 진행중인데, 많은 재미를 느낌
14-
- 별도의 페이지를 구성하지 않아도 컴포넌트 구현을 바로바로 렌더링해서 볼 수 있고, 개발자 도구를 쓰지 않아도 컴포넌트 사이즈 등 확인 가능
15-
- Docs로 한번에 여러 컴포넌트 렌더링 상태 확인 가능
16-
- addon 생태계가 활성화되어있음, Jest 등 다양한 툴과의 통합 가능
17-
- Storybook을 빌드, 배포 가능; 현재까지 개발 진행상황 공유 가능
22+
- 현재까지 개발 진행상황 공유 가능
23+
- 색상, 크기, 데이터값 등 **_속성들을 [`controls`](https://storybook.js.org/docs/react/essentials/controls)로 바꿔서 바로 확인 가능_** 👉 디자이너/기획자와의 보다 빠른 소통 가능할 듯?!
1824

19-
- 거의 1년째 방치 중인 개인 블로그는 물론이고 개인 프로젝트들을 빠르게 만들기 위해 디자인 시스템을 만들어보자
20-
- 단기적으로, 1년 정도는 컴포넌트 라이브러리 구축하는 방향이 될 듯, 아무래도 디자인 철학이란게 없기 때문
25+
![zum-stock-line-stori_2022-2-2](https://user-images.githubusercontent.com/57997672/156254919-f4795507-1ecf-4e88-b8ef-a037ab071169.gif)
26+
27+
<br />
28+
29+
- 거의 1년째 방치 중인 개인 블로그는 물론이고, **_셋팅만 열심히 했던 개인 프로젝트들_** 빠르게 완성도를 높이기 위해 디자인 시스템을 만들어보자
30+
31+
- 단기적으로 1년 정도는 **컴포넌트 라이브러리** 구축 위주 방향이 될 듯, 아무래도 디자인/UX에 대한 지식이 없기 때문
2132
- 장기 프로젝트로 디자인 시스템으로 발전시켜 나가자
2233

34+
<br />
35+
2336
- 회사 업무에 적용하기 전 다양한 테스트를 위한 도구로 사용할 수 있음
2437
- 하고 싶은 거 다하자!!
25-
- 얼마전 `당근마켓 프론트엔드 개발자 라이브 QnA 세션`에서, 회사 코드를 포트폴리오로 사용할 수는 없으니 유사한 구현 내용을 개인 GitHub에 올려놓는 것도 방법이라는 조언에서 인사이트를 얻음!
38+
- 얼마전 _`당근마켓 프론트엔드 개발자 라이브 QnA 세션`_ 에서 얻은 인사이트
39+
- _회사 코드를 포트폴리오로 사용할 수는 없으니 유사한 구현 내용을 개인 GitHub에 올려놓는 것도 방법이다!_
40+
41+
---
42+
43+
## Design Patterns & Techs I Used
44+
45+
- **Atomic Design Pattern & Monorepo**
46+
47+
- 기본적으로 컴포넌트 라이브러리이기 때문에, atoms, molecules, organisms 정도까지만 하면 될 듯
48+
- 이 단계에 따라 각각의 패키지 구성; `atoms/button`, `atoms/text` 등
49+
- 디자인 시스템 중 단일 Repo로 구성하는 경우도 많지만, 추후 `Svelte`, `Solid` 등 다양한 프레임워크/라이브러리 및 `rollup`, `esbuild` 등 다양한 빌드 툴 사용해볼 수 있도록 Monorepo로 구성
50+
- `Yarn berry` [PnP 모드](https://yarnpkg.com/features/pnp)에서 [workspace 플러그인 사용](https://github.com/yarnpkg/berry/tree/master/packages/plugin-workspace-tools)
51+
52+
```bash
53+
getit-ui/
54+
┣ atoms/ # atom packages
55+
┃ ┣ button/
56+
┃ ┃ ┣ src/
57+
┃ ┃ ┣ package.json
58+
┃ ┃ ┣ tsconfig.json
59+
┃ ┃ ┣ tsconfig.node.json
60+
┃ ┃ ┗ vite.config.ts
61+
┃ ┗ text/
62+
┃ ┣ src/
63+
┃ ┣ package.json
64+
┃ ┣ tsconfig.json
65+
┃ ┣ tsconfig.node.json
66+
┃ ┗ vite.config.ts
67+
┣ molecules/ # molecules packages
68+
┣ stories/ # storybook package
69+
┃ ┣ .storybook/
70+
┃ ┃ ┣ main.ts
71+
┃ ┃ ┗ preview.ts
72+
┃ ┣ src/
73+
┃ ┃ ┣ Introduction.stories.mdx
74+
┃ ┃ ┣ react-app-env.d.ts
75+
┃ ┃ ┗ setupTests.ts
76+
┃ ┣ .gitignore
77+
┃ ┣ package.json
78+
┃ ┗ tsconfig.json
79+
┃ # root configs
80+
┣ .editorconfig
81+
┣ .eslintignore
82+
┣ .eslintrc.js
83+
┣ .gitignore
84+
┣ .pnp.cjs
85+
┣ .pnp.loader.mjs
86+
┣ .prettierrc
87+
┣ .yarnrc.yml
88+
┣ Dockerfile.dev
89+
┣ README.md
90+
┣ package.json
91+
┣ tsconfig.components.json
92+
┣ tsconfig.json
93+
┗ yarn.lock
94+
```
95+
96+
<br />
97+
98+
- **`Storybook`**
2699

27-
### 사용되는 기술과 패턴
100+
- 구현된 컴포넌트들 시각 테스트
101+
- 회귀, E2E 등 다양한 테스트, 문서화
102+
- 별도의 전용 패키지(`stories`)를 만들어서 실행
28103

29-
- Atomic Design, Monorepo
30-
- 디자인 시스템이기 때문에 atoms, molecules, organisms 정도까지만 하면 될 듯
31-
- 이 단계에 따라 각각의 패키지 구성; `atoms/button`, `atoms/text` 등
32-
- 디자인 시스템 중 단일 Repo로 구성하는 경우도 많지만, 추후 Svelte, Vue 등 React 외 프레임워크/라이브러리 개별 빌드하기 쉽도록
33-
- yarn berry P&P 모드, workspaces
104+
<br />
34105

35-
- Storybook
36-
- 구현된 컴포넌트들, 문서화
106+
- **`Vite` + `React`**
37107

38-
- Vite + React
39-
- 일단은 React 컴포넌트 위주 구성
40-
- Vite [라이브러리 모드](https://vitejs-kr.github.io/guide/build.html#library-mode)로 빌드
108+
- 일단은 `React` 컴포넌트 위주 구성
109+
- `Vite` [라이브러리 모드](https://vitejs-kr.github.io/guide/build.html#library-mode)로 빌드
110+
111+
<br />
112+
113+
- **`CSS(SCSS) Module`**
114+
115+
- 개인적으로 `CSS`를 활용할 때 가장 선호하는 방식
116+
- `styled-component`/`emotion` 보다 `CSS` 그 자체를 사용하면서, `JS` 방식으로 `className` 적용을 컨트롤 할 수 있음
117+
- [Real-world CSS vs. CSS-in-JS performance comparison](https://pustelto.com/blog/css-vs-css-in-js-perf/); 성능 면에서 `CSS-in-JS`가 좋지 않다는 이야기도..
118+
- 특히 이번 대선 차트 구현할 때 이점을 크게 맛보게 되었는데, IE에서 `grid(-ms-grid)`가 생각대로 컨트롤 하기 어렵다는 점 때문에, IE 전용 클래스를 따로 만들어 `userAgent`에 따라 분기처리해 적용함
41119

42-
- CSS(SCSS) Module
43-
- 개인적으로 CSS를 적용하는데 가장 선호하는 방식
44-
- styled-component/emotion 보다 가벼우면서, JS 방식으로 className 적용을 컨트롤 할 수 있음
45-
- 이번 대선 차트 구현에서도 IE에서 `grid`가 생각대로 컨트롤 하기 어렵다는 점 때문에, IE 전용 클래스()를 따로 만들어 `userAgent`에 따라 분기처리해 적용
46-
47120
```scss
48-
// 모던 브라우저인 경우
121+
// 모던 브라우저 클래스
49122
.line {
50123
@extend .line-default;
51124
display: grid;
52125
grid-template-columns: 13px minmax(36px, auto) minmax(46px, auto);
53126
}
54127
55-
// IE인 경우
128+
// IE 전용 클래스
56129
.line-ie {
57130
@extend .line-default;
58131
display: -ms-flexbox;
@@ -68,74 +141,96 @@
68141
```
69142

70143
```typescript
71-
// ...
72-
classNames: [IS_IE ? styles['line-ie'] : styles['line'], ...classNames]
144+
// line 컴포넌트 (VanillaJS)
145+
classNames: [IS_IE ? styles['line-ie'] : styles['line'], ...classNames];
73146
// ...
74147
```
75148

149+
---
76150

77-
### Problem & Solutions
151+
## _Problem & Solutions_
78152

79-
- vite 라이브러리 모드 빌드 -> 모노레포에서 사용시 CSS 파일 가져오지 않는 문제?
80-
- HTML 파일을 생성하는 게 아닌, JS로 컴포넌트 렌더링 로직만 만드는 것
81-
- 이전엔 Webpack 등 번들러가 HTML에 `link` 태그를 자동삽입,
82-
- JS에 클래스명은 가져오는데, `import 'styles.css'`가 포함되지 않음
83-
- [vite-plugin-css-injected-by-js](https://www.npmjs.com/package/vite-plugin-css-injected-by-js?activeTab=readme) 사용
84-
- `vite.config.ts`에서 플러그인 추가
85-
86-
```javascript
87-
import cssInject from 'vite-plugin-css-injected-by-js';
153+
### `Vite` 라이브러리 모드 빌드 -> 모노레포에서 사용시 `CSS`를 가져오지 않는 문제?
88154

89-
export default defineConfig({
90-
plugins: [react(), cssInject()],
91-
92-
/** 기타 설정 */
93-
});
94-
```
155+
**_Problem_**
95156

96-
- 빌드시 아래와 같이 `style` 태그 생성 로직을 생성, 빌드된 파일 상단에 삽입
97-
98-
```javascript
99-
// button.es.js
100-
(function(){
101-
try {
102-
var elementStyle = document.createElement('style');
103-
elementStyle.innerText = `._button--default_11ozg_1{width:150px;height:60px;background-color:#007d0099;cursor:pointer}._button--default_11ozg_1:hover{background-color:#f009;cursor:grab}`;
104-
document.head.appendChild(elementStyle);
105-
}
106-
catch(e) {
107-
console.error(e, 'vite-plugin-css-injected-by-js: error when trying to add the style.');
108-
}
109-
})();
110-
```
157+
- HTML 파일을 생성하는 게 아닌, JS로 컴포넌트 렌더링 로직만 만드는 것
158+
- 일반적인 페이지를 빌드하는 경우, `Webpack` 등 번들러가 `HTML`에 `link` 태그를 자동삽입하고, 렌더링시 스타일을 반영함
159+
- 그런데 라이브러리 모드에서 빌드시 JS에 `CSS Module` 클래스명만 가져오고, CSS 파일(`import 'styles.css'`)을 가져오지 않음
160+
- **_다른 패키지에서 사용시 스타일 적용 안됨_**
161+
162+
![image](https://user-images.githubusercontent.com/57997672/156269529-6740dc85-674a-43b1-be44-badcdd9b6d4f.png)
163+
164+
<br />
111165

112-
- Storybook 전용 `stories` 패키지에서 Vite 사용시 빌드 오류
113-
- 현재 각각의 컴포넌트 패키지 + stories 패키지가 있는 상황
114-
- 컴포넌트 패키지들은 vite를 사용하고 있고, webpack 보다는 vite가 아무래도 빌드 타임이 짧기 때문에 [Vite 빌더](https://storybook.js.org/blog/storybook-for-vite/)를 써보려고 시도 함
115-
- 문제는 yarn berry 환경에서 vite 빌더가 의존성 제대로 못 찾고 빌드가 안됨
116-
- <https://github.com/eirslett/storybook-builder-vite/issues/141>
117-
- stories 패키지만 빌더를 Webpack5로 지정해 사용 중
118-
- 패키지를 별도로 분리하지 않고, 각각의 컴포넌트 패키지에서 story 파일를 만들고, root에서 preview를 실행하도록 하는게 베스트일 것 같은데 설정하기가 까다로웠음
119-
- *좀더 연구해봐야 할 듯*
166+
**_Solution_**
167+
168+
- [vite-plugin-css-injected-by-js](https://www.npmjs.com/package/vite-plugin-css-injected-by-js?activeTab=readme) 사용
169+
170+
- `vite.config.ts`에서 플러그인 추가
171+
172+
```javascript
173+
import cssInject from 'vite-plugin-css-injected-by-js';
174+
175+
export default defineConfig({
176+
plugins: [react(), cssInject()],
177+
178+
/** 기타 설정 */
179+
});
180+
```
181+
182+
- 빌드시 아래와 같이 `style` 태그 생성 로직을 생성, 빌드된 파일 상단에 삽입
183+
184+
![image](https://user-images.githubusercontent.com/57997672/156269833-c3533abf-75d6-4d09-923c-b1dd37b78ec8.png)
185+
186+
- 동일 컴포넌트를 여러개 호출하더라도 하나의 `style` 태그만 생성함
187+
188+
![image](https://user-images.githubusercontent.com/57997672/156270703-4cc60b4e-36c5-4b03-9e56-86c26d0d5347.png)
189+
190+
- _근데 이렇게 되면 `CSS-in-JS`를 쓰는 방식과 성능면에서 차이가 없어질 수도 있지 않을까하는 의문이.._
191+
192+
<br />
193+
194+
### Storybook 전용 `stories` 패키지에서 Vite 사용시 빌드 오류
195+
196+
**_Problem_**
197+
198+
- 현재 각각의 컴포넌트 패키지 + `Storybook` 전용 패키지가 있는 상황
199+
- 컴포넌트 패키지들이 이미 `Vite`를 사용하고 있고, (왠만하면) `Webpack` 보다는 `Vite`가 빌드 타임이 짧기 때문에 [Vite 빌더](https://storybook.js.org/blog/storybook-for-vite/)를 써보려고 시도 함
200+
- 문제는 `Yarn berry` 환경에서 `Vite` 빌더가 의존성 제대로 못 찾고 빌드가 안됨
201+
- <https://github.com/eirslett/storybook-builder-vite/issues/141>; '22.3.2. 현재 아직 해결되지 않은 이슈😭
202+
203+
**_Solution_**
204+
205+
- 아쉽지만 `stories` 패키지만 빌더를 `CRA` + `Webpack5`로 지정해 사용 중
206+
- 내 생각에 베스트는, `Storybook` 전용 패키지를 별도로 분리하지 않고, 각각의 컴포넌트 패키지에서 `story` 파일를 만들어서 root에서 preview를 실행하도록 하는 것
207+
- 다만 Monorepo 구조의 root에서는 뭔가 설정하기가 까다로움
208+
- `Storybook` 자체가 빈 프로젝트에서 실행하는 게 아니기 때문인듯
209+
> _Storybook needs to be installed into a project that is already set up with a framework. It will not work on an empty project.(<https://storybook.js.org/docs/react/get-started/install>)_
210+
- _좀더 연구해봐야 할 듯..?_
211+
- 한편 패키지를 분리했기 때문에, 다른 패키지에서 `import` 했을 때 잘 되는지 확인 할 수 있다는 장점은 있는 듯
212+
213+
<br />
120214
121215
---
122216
123-
### 참고자료
217+
### References
124218
125219
#### Design System Overview
126220
127-
- [Do you think your component library is your design system? Think again](https://uxdesign.cc/do-you-think-your-component-library-is-your-design-system-think-again-7e2c902b5275)
128221
- [토스, 에어비앤비로 알아보는 디자인 시스템의 내일](https://dewberry9.github.io/future-of-design-system)
222+
- [Do you think your component library is your design system? Think again](https://uxdesign.cc/do-you-think-your-component-library-is-your-design-system-think-again-7e2c902b5275)
129223
130-
#### Realworld Cases
224+
#### Real-World Cases
131225
132226
- [awesome-storybook](https://project-awesome.org/lauthieb/awesome-storybook)
133227
- [awesome-design-systems](https://github.com/alexpate/awesome-design-systems)
134-
- 쿠팡: [이커머스에 최적화된 디자인 시스템, RDS](https://youtu.be/g4f7p0YcVnc)
228+
- 쿠팡: [이커머스에 최적화된 디자인 시스템, RDS](https://youtu.be/g4f7p0YcVnc) - 주로 UX 디자인에 대한 이야기
135229
- 토스
136-
- [TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까?](https://youtu.be/pfKuEuufgdc)
137-
- [Do more, with less. - 디자인 시스템, 그다음은?](https://youtu.be/LmLchZ4tCXc)
138-
- 배민: [[6월 우아한테크세미나] 디자인시스템이 가져온 변화](https://youtu.be/aVHLcQzcRbA)
230+
- [TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까?](https://youtu.be/pfKuEuufgdc) - 토스 안드로이드
231+
- [Do more, with less. - 디자인 시스템, 그다음은?](https://youtu.be/LmLchZ4tCXc) - 토스 FE
232+
- 배민: [[6월 우아한테크세미나] 디자인시스템이 가져온 변화](https://youtu.be/aVHLcQzcRbA) - 배민 FE
139233
- LINE: [개발자와 디자이너의 협업을 위한 LINE 디자인 시스템, LDS 소개](https://engineering.linecorp.com/ko/blog/line-design-system/)
140234
- SOCAR: [[SOCAR FRAME 만들기 #1] 쏘카의 디자인 시스템 맛보기1~5](https://tech.socarcorp.kr/design/2020/06/23/socar-design-system-01.html)
141-
- 카카오: [FE개발자의 성장 스토리 03 : 카카오 어드민 UI 컴포넌트를 모노레포로 개발하여 얻은 것들](https://tech.kakao.com/2020/12/03/frontend-growth-03/)
235+
- 카카오: [FE개발자의 성장 스토리 03 : 카카오 어드민 UI 컴포넌트를 모노레포로 개발하여 얻은 것들](https://tech.kakao.com/2020/12/03/frontend-growth-03/)
236+
- AirBnB: [Building (And Re-Building) the Airbnb Design System | Maja Wichrowska & Tae Kim](https://youtu.be/fHQ1WSx41CA) - 2016년 이후 AirBnB에서 React 기반 디자인 시스템을 만들게 된 배경

‎pages/posts/til/css/scss-module-for-ie.mdx

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)