Til

flexbox 는 직계 자식에만 적용되기 때문에, 그룹핑용 wrapper div 를 추가하는 순간 레이아웃이 깨지고 wrapper 안에 같은 flexbox 코드를 또 써야 했다. display: contents 한 줄이면 wrapper 를 레이아웃 흐름에서 지워서 자식들이 원래 flex 컨테이너의 아이템처럼 배치된다. 대신 wrapper 의 시각적 스타일이 전부 사라지는 함정을 알아야 한다.

유니온 타입으로 충분한데 제네릭을 쓰고 있진 않은가? Matt Pocock 은 한 가지 질문으로 판단하라고 한다 — "함수를 만드는 시점에 모든 요소를 알고 있는가?" 알고 있다면 유니온, 입력에 따라 반환 타입이 달라져야 하는 순간부터 제네릭이다.

'a' | 'b' | 'c' 에서 'c' 만 빼고 싶다. 객체나 배열은 map 으로 순회하면 되는데, 유니온의 iterator 는 뭘까? 답은 "직접 순회할 필요가 없다" — 조건부 타입이 유니온을 만나면 TypeScript 가 멤버 하나하나에 자동으로 분배(distribute)해 준다. Matt Pocock 의 영상을 보고 정리했다.

이벤트 타입에 따라 payload 가 필수이기도, 아예 없어야 하기도 한 함수. 옵셔널 인자(?)로는 이걸 표현할 수 없다. Matt Pocock 의 영상을 보고 제네릭 + 조건부 타입 + named tuple 로 함수 시그니처 자체를 동적으로 바꾸는 패턴을 정리했다.