Post (ds01/draft) add draft contents, references

Author: gitgitWi

pages/posts/design-system/01.md

@@ -4,6 +4,109 @@
 
 - `Storybook`, `Vite`로 디자인 시스템 만들기
 
+## Contents
+
+- Storybook + React로 디자인 시스템을 만드는 튜토리얼은 물론 Airbnb, Github 등에서 실제로 사용중인 Storybook, 심지어 GitHub가 공개된 경우도 있음, 아래 references를 참고하자
+
+### Motivation
+
+- 요즘 차트 구현을 Storybook 기반으로 진행중인데, 많은 재미를 느낌
+  - 별도의 페이지를 구성하지 않아도 컴포넌트 구현을 바로바로 렌더링해서 볼 수 있고, 개발자 도구를 쓰지 않아도 컴포넌트 사이즈 등 확인 가능
+  - Docs로 한번에 여러 컴포넌트 렌더링 상태 확인 가능
+  - addon 생태계가 활성화되어있음, Jest 등 다양한 툴과의 통합 가능
+  - Storybook을 빌드, 배포 가능; 현재까지 개발 진행상황 공유 가능
+
+- 거의 1년째 방치 중인 개인 블로그는 물론이고 개인 프로젝트들을 빠르게 만들기 위해 디자인 시스템을 만들어보자
+  - 단기적으로, 1년 정도는 컴포넌트 라이브러리 구축하는 방향이 될 듯, 아무래도 디자인 철학이란게 없기 때문
+  - 장기 프로젝트로 디자인 시스템으로 발전시켜 나가자
+
+- 회사 업무에 적용하기 전 다양한 테스트를 위한 도구로 사용할 수 있음
+  - 하고 싶은 거 다하자!!
+  - 얼마전 `당근마켓 프론트엔드 개발자 라이브 QnA 세션`에서, 회사 코드를 포트폴리오로 사용할 수는 없으니 유사한 구현 내용을 개인 GitHub에 올려놓는 것도 방법이라는 조언에서 인사이트를 얻음!
+
+### 사용되는 기술과 패턴
+
+- Atomic Design
+  - 디자인 시스템이기 때문에 atoms, molecules, organisms 정도까지만 하면 될 듯
+  - 이 단계에 따라 각각의 패키지 구성; `atoms/button`, `atoms/text` 등
+
+- Storybook
+  - 구현된 컴포넌트들, 문서화
+
+- Vite + React
+  - 일단은 React 컴포넌트 위주 구성
+  - Vite [라이브러리 모드](https://vitejs-kr.github.io/guide/build.html#library-mode)로 빌드
+
+- CSS(SCSS) Module
+  - 개인적으로 CSS를 적용하는데 가장 선호하는 방식
+  - styled-component/emotion 보다 가벼우면서, JS 방식으로 className 적용을 컨트롤 할 수 있음
+    - 이번 대선 차트 구현에서도 IE에서 `grid`가 생각대로 컨트롤 하기 어렵다는 점 때문에, IE 전용 클래스()를 따로 만들어 `userAgent`에 따라 분기처리해 적용
+    
+    ```scss
+    // 모던 브라우저인 경우
+    .line {
+      @extend .line-default;
+      display: grid;
+      grid-template-columns: 13px minmax(36px, auto) minmax(46px, auto);
+    }
+
+    // IE인 경우
+    .line-ie {
+      @extend .line-default;
+      display: -ms-flexbox;
+
+      div {
+        margin-right: 5px;
+      }
+
+      p {
+        width: 47px;
+      }
+    }
+    ```
+
+    ```typescript
+    // ...
+      classNames: [IS_IE ? styles['line-ie'] : styles['line'], ...classNames]
+    // ...
+    ```
+
+
+### Problem & Solutions
+
+- vite 라이브러리 모드 빌드 -> 모노레포에서 사용시 CSS 파일 가져오지 않는 문제?
+  - HTML 파일을 생성하는 게 아닌, JS로 컴포넌트 렌더링 로직만 만드는 것
+  - 이전엔 Webpack 등 번들러가 HTML에 `link` 태그를 자동삽입, 
+  - JS에 클래스명은 가져오는데, `import 'styles.css'`가 포함되지 않음
+  - [vite-plugin-css-injected-by-js](https://www.npmjs.com/package/vite-plugin-css-injected-by-js?activeTab=readme) 사용
+    - `vite.config.ts`에서 플러그인 추가
+    
+    ```javascript
+    import cssInject from 'vite-plugin-css-injected-by-js';
+
+    export default defineConfig({
+      plugins: [react(), cssInject()],
+      
+      /** 기타 설정 */
+    });
+    ```
+
+    - 빌드시 아래와 같이 `style` 태그 생성 로직을 생성, 빌드된 파일 상단에 삽입
+    
+    ```javascript
+    // button.es.js 
+    (function(){ 
+      try {
+        var elementStyle = document.createElement('style'); 
+        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}`; 
+        document.head.appendChild(elementStyle);
+        } 
+      catch(e) {
+        console.error(e, 'vite-plugin-css-injected-by-js: error when trying to add the style.');
+        } 
+      })();
+    ```
+
 ---
 
 ### 참고자료
@@ -16,10 +119,12 @@
 #### Realworld Cases
 
 - [awesome-storybook](https://project-awesome.org/lauthieb/awesome-storybook)
+- [awesome-design-systems](https://github.com/alexpate/awesome-design-systems)
 - 쿠팡: [이커머스에 최적화된 디자인 시스템, RDS](https://youtu.be/g4f7p0YcVnc)
 - 토스
   - [TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까?](https://youtu.be/pfKuEuufgdc)
   - [Do more, with less. - 디자인 시스템, 그다음은?](https://youtu.be/LmLchZ4tCXc)
-- 배민: [[6월 우아한테크세미나] 디자인시스템이 가져온 변화 (2021.08.06.)](https://youtu.be/aVHLcQzcRbA)
-- LINE: [개발자와 디자이너의 협업을 위한 LINE 디자인 시스템, LDS 소개 (2021.06.01.)](https://engineering.linecorp.com/ko/blog/line-design-system/)
-- SOCAR: [[SOCAR FRAME 만들기 #1] 쏘카의 디자인 시스템 맛보기1~5 (2020.06.23.~2020.09.08.)](https://tech.socarcorp.kr/design/2020/06/23/socar-design-system-01.html)
+- 배민: [[6월 우아한테크세미나] 디자인시스템이 가져온 변화](https://youtu.be/aVHLcQzcRbA)
+- LINE: [개발자와 디자이너의 협업을 위한 LINE 디자인 시스템, LDS 소개](https://engineering.linecorp.com/ko/blog/line-design-system/)
+- SOCAR: [[SOCAR FRAME 만들기 #1] 쏘카의 디자인 시스템 맛보기1~5](https://tech.socarcorp.kr/design/2020/06/23/socar-design-system-01.html)
+- 카카오: [FE개발자의 성장 스토리 03 : 카카오 어드민 UI 컴포넌트를 모노레포로 개발하여 얻은 것들](https://tech.kakao.com/2020/12/03/frontend-growth-03/)