재현 안 되는 버그를 쫓다가 CI 게이트 부재를 발견했다
동료가 제보한 타입 에러를 재현하려다 전혀 다른 에러를 만났고, 그 과정에서 저장소에 typecheck 스크립트 자체가 없었다는 사실을 발견한 이야기.
Blog
size-limit이 번들 크기를 온전히 재지 못했다 — 디자인 시스템 번들 게이트를 다시 세운 이야기
사내 디자인 시스템의 번들 CI 게이트가 컴포넌트 스텁 파일만 재고 의존 청크를 집계하지 못하던 결함을 발견하고, 측정 방식을 다시 세운 기록. 발행 후 실측으로 원인 서술을 정정했다.
결제는 됐는데 예약이 안 됐다 — '과금-미예약' 불일치를 구조로 막은 이야기
멀티테넌트 예약 SaaS에서 PG 결제와 예약 등록이 분리된 구조가 만드는 '돈은 나갔는데 예약은 없는' 불일치를, 서버 취소 연동·선저장·응답 판정 정교화로 닫은 기록.
토큰 시스템을 만들어놓고 아무도 안 쓰고 있었다 — Tailwind 임의값을 걷어낸 이야기
디자인 토큰 파이프라인을 갖춘 컴포넌트 라이브러리인데, 정작 컴포넌트 코드에는 Tailwind 임의값(`[16px]` 같은 대괄호 문법)이 100개 넘게 박혀 있었다. 전수조사로 토큰화 가능한 값과 예외로 남겨야 하는 값을 가른 과정.
URL에 예약번호를 실어야 했다 — 개인정보를 봉인 토큰으로 감춘 이야기
예약 완료 후 다음 화면으로 예약번호·이름·전화를 넘겨야 했다. 가장 쉬운 URL 쿼리스트링은 개인정보 평문 노출 + 위변조 위험. 서버 세션 대신 AES-256-GCM 봉인 토큰으로 '무상태 + 위변조 차단'을 동시에 잡은 과정.
누구나 인증 헤더를 붙여 보낼 수 있었다 — BFF 프록시에서 헤더를 지우고 다시 심은 이야기
BFF 프록시가 클라이언트 요청을 내부 API로 그대로 전달하면, 클라이언트가 실어 보낸 X-API-KEY·X-Auth 헤더도 함께 전달된다. 그 헤더를 신뢰하는 대신, 프록시 단에서 전부 삭제하고 서버가 가진 진짜 값으로 재주입해 위조 자체를 불가능하게 만든 과정.
썸네일을 저장할 때마다 가운데 선이 하나 생겼다 — html2canvas 캔버스 좌표 결함
브라우저에서 만든 썸네일을 PNG로 저장하면 이미지 정중앙에 원치 않는 가로선이 렌더링됐다. 도구의 핵심 산출물이 손상되는 결함을, 증상을 가리는 대신 캔버스 렌더 좌표라는 근본 원인까지 따라가 고친 과정.
인증 만료를 프론트가 판단하지 않기로 했다 — 서버 만료일 기준 재인증 플로우
임직원·법인 회원의 인증 만료를 프론트에서 계산하면, 서버 데이터와 어긋나는 순간 신뢰할 수 없는 판정이 된다. 만료 시점 자체는 서버가 내려주고, 프론트는 현재 시각과 비교만 하도록 역할을 나눈 재인증 플로우를 설계한 과정.
화면을 그대로 옮기지 않았다 — 이관 전에 대상 시스템의 컨벤션부터 읽은 이야기
별도로 운영되던 예약 백오피스를 사내 Portal로 이관하면서, 기존 화면을 그대로 복사하는 대신 대상 시스템의 디렉터리·라우팅·상태 관리 패턴을 먼저 읽고 그 컨벤션에 맞춰 재구현한 과정과 이유.
API 호출 순서가 조회 방향이 되어버렸다 — 순차 호출 3개를 파라미터 하나로 바꾼 이야기
상품마감·요금재고 화면이 3개 API를 순차 호출하는 구조였는데, 그 호출 순서 자체가 조회 방향을 결정하고 있었다. 첫 값이 자동 선택되면서 이후 단계의 전체 조회를 막던 구조를, 단일 API의 방향 파라미터로 재설계한 과정.