[TIL] 디자인 시스템 구현 강의

TIL

개인 공부 - 디자인 시스템 구현 강의

디자인 시스템 프로젝트

환경 구축

TSDX

TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease. It doesn’t even have to be a component library. TSDX takes care of all the tedious tasks of setting up a new project.

zero-config cli이다. 그래서 이것으로 모던 TS 패키지를 쉽게 개발하고, 테스트하고 배포할 수 있도록 해준다.
꼭 컴포넌트 라이브러리가 아니어도 되며, 새 프로젝트의 세팅, 환경 설정 등을 대신 해준다.

• TSDX의 기능

  Zero-config: 빌드 세팅을 하나부터 열까지 하지 않아도 된다.

  Rollup: TSDX는 Rollup을 사용한다. configuration 없이 CommonJS 와 ESM modules를 export 하도록 셋업되어 있다.

  Live Playground: 라이브 playground를 제공하여, 프로젝트를 import하여 바로바로 사용하여 테스트할 수 있다.

  Jest: writing test를 위해 Jest가 셋팅되어 있다.

  Project Templates: 템플릿을 제공한다. react, react-with-storybook 등

  Tree shaking: 트리 셰이킹 기능을 제공한다. 라이브러리에서 컴포넌트가 하나만 사용되었다면, 나머지는 앱 레벨에 포함되지 않는다.

  TSDX는 커스터마이징이 가능하다.

Storybook

storybook은 addon을 지원한다.

• control 기능
  컴포넌트에서 생성한 prop 들을 실시간으로 변경할 수 있다.

  

• actions 기능
  이벤트 핸들러를 이용해서 storybook 화면에서 이벤트를 트래킹할 수 있다.

  

• docs 기능
  컨트롤 기능과 코드의 주석을 통해서 쉽게 문서화가 가능하도록 한다.

  

• a11y 기능 (추가 addons)
  chrome 기능에도 존재하지만, 바로 accessiblity를 확인할 수 있다.

회고 (TIL)

2022.04.18 Daily 회고

✏오늘 한 일

• 마이너 업무
  • git / merge / deploy flow 익히기
• 디자인 시스템 공부
  • storybook 써보기

⁉느낀 점

storybook과 디자인 시스템의 내 나름 정의가 쌓여간다!
디자인 시스템도 어떻게 작업하면 되는지 왠지 알 것 같다.
강의 들어보면서 계속 작업해봐야겠다!

확실히 개발자는 신입부터 다른 것 같다.
아니지, 달라야 하는 것 같다.

원래 다른 직무였으면 몇 주 동안은 뭘 해야하는지도 몰라서 우물쭈물 했을 것 같은데.
지금은 어떤 일을 해야하는지 일단 알 수 있고(아직 그 일을 할 수 있다는 건 아니지만)
바로 실무에서 나름 참여하면서 눈치보면서 시간 떼우기식 업무가 아니라서 너무 좋다.

하지만… 기술적, 학습적 부채가 눈덩이처럼 쌓이는 중이다ㅋㅋ

🎃현재 나의 상태

먼 거리는 역시 다니는게 아니다… 너무 피곤하다…
일주일만 참자 참어

---