Typescript

리액트에서 memo를 사용하다 보면 조금 이상한 상태에 놓인다. 컴포넌트는 같은 prop을 받으면 다시 렌더링하지 않도록 만들었는데, 정작 타입만 봐서는 그 prop이 다음 렌더링에서도 같은 참조로 전달될지 알 수 없다. Item[]은 배열 안에 무엇이 들어 있는지는 알려주지만, 그 배…

Webpack, Babel, TypeScript를 한 프로젝트에서 함께 쓰다 보면 역할이 겹쳐 보인다. Webpack도 코드를 변환하고, Babel도 자바스크립트를 출력하며, tsc 역시 타입스크립트를 자바스크립트로 바꾼다. 설정 파일만 보면 같은 일을 세 번 하는 것 같고, 그래서 하…

저장소 메서드 위에 붙은 @ZodSchemaParse를 다시 보게 된 것은 API 응답의 has_next를 hasNext로 바꾸고 싶어서였다. 스키마에 transform을 붙이면 런타임 값은 바뀐다. 그렇다면 호출부의 호버도 자연스럽게 hasNext를 보여줄 것 같았다. 하지만 커서를…

Zustand로 스토어를 만들다 보면 처음에는 코드가 꽤 단정해 보인다. 상태 타입을 만들고, create()에 생성 함수를 넘기고, 필요한 미들웨어를 하나씩 감싸면 된다. persist를 붙이면 새로고침 뒤에도 값이 남고, devtools를 붙이면 Redux DevTools에서 변경을…

상황 어느날 서비스를 살펴보시던 팀장님께서 이런 말씀을 slack에 남기셨다. 진호님, 예측 차트에서 zoom을 계속하면 어느 순간 라인 차트가 아니라 단일 스캐터 차트처럼 보이는 데, 이거 수정하면 좋을 거 같아요. 어느정도 zoom을 하면 그 이후로는 zoom이 안 되도록 할 수 없…

프로그래밍을 하다 보면 개발자가 의도한 선택지를 에디터가 자동완성으로 얼마나 잘 안내해 주느냐가 개발 경험에 큰 영향을 미친다는 사실을 자주 체감하게 된다. 특히 문자열 기반의 옵션을 다룰 때는 이 차이가 더욱 극명하게 드러난다. 예를 들어 HTTP 메서드를 표현할 때 "GET" | "…

사람이 무언가를 집중해서 바라보다 보면, 어느샌가 주변부가 흐려지고 가끔은 집중하고 있던 그 대상조차 보이지 않게 된다. 처음엔 분명하게 인식되던 경계가 서서히 사라지고, 오히려 애써 무시했던 주변이 본질을 가릴 때도 있다. 잘 보려 애쓰는 행위가, 역설적으로 시야를 좁히는 순간이다.…

타입스크립트에서는 조건부 타입의 분배 과정에서도 타입 추론 컨텍스트가 유지된다. 이 특성 덕분에 단순한 분기 수준을 넘어, 상당히 복잡한 조건부 타입에서도 개발자가 의도한 방향으로 타입 추론을 유도할 수 있다. 실제로 이러한 특성은 고급 유틸리티 타입을 설계할 때 매우 강력한 도구로 작…

프론트엔드 개발을 하다 보면 컴포넌트의 props로 number 타입을 받을 때가 많다. 하지만 단순히 number 타입만 지정하면 값의 범위를 제한할 수 없다는 점이 아쉽다. 예를 들어, 페이지네이션의 currentPage는 1 이상의 값만 허용해야 하고, 슬라이더의 value는 최소…

TypeScript를 사용하다 보면, 겉보기에는 동일해 보이지만 실제로는 다르게 평가되는 타입을 마주치는 경우가 있다. 특히 객체 타입과 인터섹션 타입을 함께 다룰 때 이런 차이가 분명하게 드러난다. 다음 두 타입을 살펴보자. type A = { x: string; y: string }…

언젠가 동생이 내게 이런 질문을 한 적이 있다. “형은 어떨 때 type을 쓰고 어떨 때 interface를 써?” 당시의 나는 대부분의 경우 type을 쓴다고 대답했다. 선언 병합을 제외하면 interface가 제공하는 기능적 이점을 크게 느끼지 못했기 때문이다. 실제로 타입스크립트에…

요즘 다른 전역 상태 라이브러리 대신 caro-kann 3 버전을 적극적으로 사용하고 있다. 여러 기능을 미들웨어 단위로 분리할 수 있어 번들 크기를 700B대까지 줄일 수 있었고, zustand, useReducer, useState 스타일을 상황에 따라 선택할 수 있다는 점도 다른…

라이브러리를 개발하다 보면 객체 타입의 구조는 그대로 유지하면서, 일부 프로퍼티의 값 타입만 교체해야 하는 상황이 자주 발생한다. 특히 상속이나 오버라이드 패턴을 사용해 메서드의 동작 일부를 변경하는 경우가 대표적이다. 구현 관점에서는 기존 로직을 재사용하되, 외부에 노출되는 인터페이스…

아래는 전역 상태 관리 라이브러리 Caro-kann의 persist 미들웨어 내부에서 사용되는 유틸리티 함수들의 타입 정의이다. 세 타입 모두 storageKey와 storageType이라는 동일한 파라미터를 요구하고 있으며, 이 둘은 저장소의 위치와 종류를 식별하기 위한 핵심 정보라는…

나는 꽤 오래 전부터 타입스크립트를 사용해 특정한 컴포넌트만을 걸러낼 수 있을지 궁금했다. 만약 이게 가능하다면 특정한 컴포넌트만을 children으로 받게 만들 수 있어 프로젝트의 전체적인 구조가 단단해질 거라 생각했다. 실제로 특정 컴포넌트를 걸러내기 위해서 나는 타입스크립트를 가지…

내가 개인적으로 사용하는 독후감 기록 및 공유 서비스가 하나 있다. 이름은 onef다. 홍보에는 거의 신경 쓰지 않았기 때문에 실제 사용자는 나와 몇몇 후배들 정도에 불과하다. 하지만 전혀 문제는 없다. 이 서비스는 사용자 수를 늘리기 위한 제품이라기보다는, 구현해보고 싶은 기능을 부담…

상황 Button과 Link 및 여러 컴포넌트를 인자로 받아서 통일된 스타일을 처리해주는 Clickable 컴포넌트를 만들고 난 직후의 일이다. 로그인 페이지에서 Clickable 컴포넌트가 문제 없이 동작하는 걸 확인한 뒤 코드를 커밋했고, github action이 동작하며 라이브…

form 관리 라이브러리 sicilian을 만들면서 입력 이벤트를 타입 안전하게 다루기 위해 여러 타입을 정의했다. 그 과정에서 아래와 같은 Input<K> 타입을 만들었다. export type Input<K> = ChangeEvent<HTMLInputElement> & { targe…

이 포스트는 Dominik Dorfmeister가 자신의 블로그에 올린 Array types in TypeScript 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. 올해(23년) 초에 있었던 일입니다. Total Ty…