담백한 웹 개발 이야기

서사 컴포넌트 Props에 tailwindcss의 클래스명을 받을 때가 있다. 타입 선언할 때 단순하게 string으로만 정의하기도 하는데, string으로 정의해서 의도하지 않게 버그가 발생하는 경우가 있었다. 예를 들어서 아이콘 컴포넌트에서 w-*, h-*를 함께 받아야 하는데, string으로만 정의하면 컴파일 타임에 알 수 없다. 타입스크립트의 탬플릿 리터럴과 infer를 활용하면 사용하면 안되는 클래스명과 쌍으로 사용해야 하는 클래스명을 타입을 통해 알 수 있다. Tailwind ClassName fill-* 대신 text- 사용하도록 처리 fill-*를 사용하면 text-*로 사용하라고 알려준다. T extends `${infer U}fill${infer V}` ? `${U}text${V}` ..

서사​ REST API에 HTTP 요청할 때 각 컴포넌트 파일에서 동시에 실행하는 경우가 있었다. 이때 사용측을 수정하는 것 보다는 함수 정의측을 수정하는 게 수정을 최소화 할 수 있다고 판단해서 debounce 함수를 만들어서 해결했다. 함수 인자가 없는 경우도 있고, 함수 인자를 필요한 경우도 있어서 콜백 타입 추론하도록 처리했다. ​ 타입 추론 코드 export const debounce = void, PropCallback = (prop: Prop) => void, >( callback: Callback extends (prop: Prop) => void ? (pr..