실무개발·2026년 1월 26일
Template Literal Types: 문자열 패턴을 타입으로 잡기
CSS 클래스명을 string으로 받다가 오타 버그가 계속 났는데, Template Literal Types로 문자열 패턴 자체를 타입으로 만들 수 있었다.
#TypeScript#Template Literals#Advanced Types#String Types
개발과 기술에 대한 이야기를 기록합니다.
CSS 클래스명을 string으로 받다가 오타 버그가 계속 났는데, Template Literal Types로 문자열 패턴 자체를 타입으로 만들 수 있었다.
함수의 반환 타입이 입력에 따라 달라져야 했는데, 조건부 타입을 알기 전까지는 any로 때우고 있었다.
API 응답이 성공일 수도, 에러일 수도 있는 유니언 타입을 다룰 때, 타입 가드를 알기 전과 후가 완전히 달랐다.
매번 비슷한 타입을 새로 만들고 있었는데, 유틸리티 타입을 알고 나니 기존 타입을 재활용하는 방법이 보였다.
새 팀원이 올 때마다 '로컬 세팅 문서' 보내주는 게 지쳤다. docker compose up 하나로 DB, Redis, 앱 서버를 한 번에 띄우는 방법.
ESLint와 Prettier 설정 충돌로 삽질한 경험, 누구나 있을 것이다. Biome는 이 둘을 하나로 합치고 속도까지 잡았다.
node_modules가 1GB를 넘어가고 npm install이 5분 걸리던 프로젝트가, pnpm으로 바꾸니 용량도 속도도 절반이 됐다.
프론트엔드, 백엔드, 공통 라이브러리를 각각 다른 레포에서 관리하다가 동기화 지옥을 겪었다. Turborepo로 모노레포를 구성한 이야기.
npm install이 3분 걸리던 프로젝트가 bun install로 10초. 빠르다는 건 알겠는데, 실제로 프로덕션에 쓸 수 있을까?
느리다고 느껴서 감으로 최적화했는데 오히려 더 느려졌다. 프로파일러로 병목을 정확히 찾는 법을 배운 이야기.
앱을 오래 쓰면 느려지는 이유가 메모리 누수였다. Chrome DevTools Memory 탭으로 범인을 찾는 과정을 정리했다.
배포 후 '잘 되는데요?' 했는데 사용자만 에러를 겪고 있었다. Sentry 도입 후 에러를 실시간으로 잡게 된 이야기.
빨간 에러 메시지가 뜨면 당황해서 그냥 구글에 복붙했는데, 스택 트레이스를 읽는 법을 알고 나니 디버깅 속도가 10배 빨라졌다.
React 앱이 느린 이유를 찾지 못해 코드만 뒤지고 있었는데, React DevTools의 Profiler와 Components 탭이 범인을 바로 찾아줬다.
API 응답이 이상한데 코드 문제인지 서버 문제인지 구분이 안 될 때, 브라우저 네트워크 탭 하나로 원인을 찾는 방법.
console.log 100개 찍어가며 디버깅하던 시절을 끝내고, 브라우저 debugger와 breakpoint로 효율적으로 버그를 잡는 방법.
검색창에 글자 하나 칠 때마다 API 콜이 날아가고, 스크롤할 때마다 이벤트가 폭주하는 문제를 디바운스와 스로틀로 해결한 이야기.
복잡한 페이지 깊숙이 있는 컴포넌트를 수정할 때마다 로그인을 다시 하고 클릭을 5번 해야 하나요? Storybook으로 컴포넌트를 격리(Isolation)해서 개발하는 CDD 방법론.
컴포넌트 하나에서 에러가 났는데 전체 페이지가 흰색이 됩니다. `react-error-boundary`로 에러를 격리하고, 우아한 폴백 UI를 보여주는 방법.
TypeScript만 믿고 있다가 런타임 에러로 앱이 터졌습니다. 컴파일 타임이 아닌 '런타임'에 데이터를 검증해야 하는 이유와 Zod 활용법.
