TIL

Storybook v7, 컴포넌트에 대하여

✨ 6월 돌아보기

  1. 몰아치는 신사업의 쓰나미. 코드를 더 많이 짜고싶당.
  2. 방통대 편입 원서 넣었다. (결과: 설마가 사람 잡음 ㅋㅋ)
  3. 테오의 스프린트 15기: 구글 스프린트라는 방법론을 짧은 시간 밀도 높게 경험할 수 있었음.

2023.06.19

Web Worker로 인한 메모리 누수

여러분은 모던 브라우저의 메모리가 터지는 것을 본 적이 있으신가요? 웹 워커를 잘못 사용하면 그럴 수 있으니 조심하라.. 동기적 실행을 위해 워커 스레드를 돌렸다면 반드시 꺼줄 것. close() 메소드를 실행하거나, worker.terminate()하면 끌 수 있음.

2023.06.18

Storybook test runner

Storybook test runner는 당신이 작성한 모든 스토리를 실행 가능한(executable) 테스트로 전환한다.

Storybook interaction test

@storybook/addon-interactions를 이용하여 사용 가능.

2023.06.15

Chromatic

Storybook 배포를 Chromatic으로 하면 컴포넌트 스토리 변경 후 배포시마다 review 과정을 거칠 수 있다.

2023.06.11

Storybook v7.0

2년만에 스토리북 메이저 버전 업데이트. 주요 변경사항:

  • CSF v3 (보일러플레이트 코드 심플해짐)
  • 타입 안전성 향상
  • MDX2 지원
  • First-class Vite 지원
  • Improved interaction testing

2023.06.05

컴포넌트란 무엇인가?

  • Component 일 수도, Web Component 일 수도, React Component 일 수도..

CDD란?

Component Driven Development. 프론트엔드 개발 시 컴포넌트를 기준으로 사고한다.

상향식 vs 하향식 컴포넌트 개발

  • 상향식: 가장 작은 단위의 하위 컴포넌트를 먼저 개발. 숙련도가 부족하면 YAGNI에 빠지기 쉽다.
  • 하향식: 전체 시스템의 큰 구성요소를 먼저 개발. 르블랑의 법칙 주의 (한 번 작성한 쓰레기 코드를 나중에 수정하는 일은 결코 없다)

비제어 컴포넌트 vs 제어 컴포넌트

  • 제어: 단일 진실 원천, 늘 입력된 값과 상태가 동일 (push component)
  • 비제어: 필요한 시점에 입력된 값을 트리거하여 가져옴 (pull component)