1회차
정보
TIL 블로그 제작, Storybook 라이브러리 학습
TIL 블로그 제작
- facebook에서 제작한 'docusaurus' 라이브러리를 통해 간단하게 TIL 블로그를 제작하였습니다.
- 개인용 블로그와 모각소용 TIL 블로그를 따로 만들어서 세분화하였습니다.
- 추후에 개인용 블로그에 모각소용 TIL 블로그를 Link할 계획입니다.
다음은 docusaurus를 사용해가면서 학습한 내용을 정리해보았습니다.
package.json
- 'package.json'을 통해 특정 라이브러리 및 프레임워크를 설치를 할 때
npm i을 이용하여 모듈을 최신화할 수 있습니다.
배포 (deploy)
- 현재 정적 페이지에 배포를 하므로 데이터 관리는 크게 들어가지 않았습니다. 추후에 JS를 이용하여 API 통신 개념을 학습하려고 합니다.
- 배포에는 주로 '깃허브 페이지', 'Netfily'을 이용하여 쉽게 정적 페이지를 배포할 수 있습니다.
- 배포 방법은 주로 공식 홈페이지를 참고합니다.
Storybook 학습
- 2022-1학기에 진행한 파란학기 '유클러버스' 프로젝트에서 이용했던 디자인 시스템을 정리하려고 합니다. 이는 'Storybook'을 통해 구체화할 계획입니다.
- 배포를 할 때는 React 기반이며 'CRA'를 이용해 주로 배포해왔습니다. 하지만, React Webpack 자체가 빌드 시간이 오래걸리므로 빌드 시간이 많이 단축되는 Vite를 이용해 배포해보았습니다.
- 깃허브 페이지(gh-pages)를 통해 임시로 배포를 해보았습니다만 production build 과정에서 path 이슈가 있어 정확하게 배포되진 않았습니다.
스터디 시간에 해결이 되지 않아 추후에 환경 세팅을 지속적으로 공부하려고 합니다.
development 단계에서만 이용
- Storybook 자체는 디자인 협업 툴이므로 사실상 FE와 디자이너 간의 개발 과정 속에서 효율적으로 사용되어야 합니다.
- 그러므로 굳이 배포까진 안하더라도 development 단계에서만 확인해도 됩니다.
- 실제 프로젝트 내에선 이렇게 사용해도 무방하다고 생각하지만, 추후에 디자인 시스템을 기록화하기 위해선 배포된 디자인 시스템을 저장해 둘 필요성이 있다고 생각하였습니다.
결과
노트
- TIL Blog 만들기 (개인 TIL)
- 기본적인 세팅 진행
- UI 및 스타일 정리
- 이전 학기에 진행했던 파란학기 '유클러버스' Storybook 디자인 시스템 정리