카테고리 · 9편
프론트엔드 함정
CSS·번들러·타입스크립트·브라우저가 문서대로 동작하지 않을 때. 원인이 비자명했던 것만.
증상이 원인과 다른 곳을 가리키는 문제들을 모았습니다. 계산된 스타일은 정상인데 화면에만 안 나오거나, 번들은 되는데 타입체크만 죽거나, 500 응답이 성공으로 처리되는 식입니다.
검색해서 바로 나오는 문법 실수는 넣지 않았습니다. 스펙대로 동작하는데 그 스펙이 직관과 어긋나서 생긴 것 위주입니다.
한글 디스플레이 폰트 + -webkit-text-stroke 에서 없던 점이 생긴다
Google Fonts Gugi 로 바꾸자 글자 사이에 작은 점이 렌더링됐다. stroke 를 빼면 사라진다. 글리프의 분리된 서브패스에 외곽선이 독립적으로 그려지기 때문으로 보인다.
transform: scale 로 줄인 iframe 이 flex 부모를 밀어낼 때 — min-width: auto
transform 은 레이아웃에 영향을 주지 않는다. 고정폭 iframe 의 원래 폭이 flex item 의 min-content 크기로 잡혀 flex-basis 를 무시하고 컬럼을 아래로 떨어뜨린다.
z-index: -1 배경 레이어가 안 보인다 — body 배경색이 캔버스로 승격될 때
position:fixed + z-index:-1 로 깐 배경이 Chromium 에서 body 배경색에 덮인다. getComputedStyle 로는 전부 정상으로 보여서 스크린샷 없이는 못 잡는다.
Vite ssrLoadModule 로 브라우저 없이 앱 모듈 통합테스트 — 그리고 잡아낸 tombstone 버그
import.meta.env 를 참조하는 앱 소스는 plain node 로 import 하면 터진다. Vite dev 서버의 ssrLoadModule 로 실제 소스를 Node 에서 그대로 실행하면 브라우저 없이 함수 단위 검증이 된다.
30MB JSON 을 import 했더니 tsc 가 heap OOM — ?url + fetch 로 우회
resolveJsonModule 은 JSON 값에서 리터럴 타입을 통째로 추론한다. 런타임과 번들링은 멀쩡한데 타입체크만 죽고, 힙을 키워도 해결되지 않는다.
next/og 아이콘을 폰트 주입 없이 굽기 — SVG data-URI 트릭
Satori 는 시스템 폰트 폴백이 없어 넘긴 fonts 에 없는 글자를 두부로 그린다. 아이콘이 글자가 아니라 도형이면 폰트가 아예 필요 없다.
orval 의 fetch 클라이언트는 500 을 성공으로 넘긴다 — mutator 로 throw 주입
httpClient fetch 로 생성한 코드는 res.ok 를 확인하지 않고 status 무관하게 resolve 한다. react-query 는 throw 해야 에러로 인식하므로 4xx/5xx 가 전부 isSuccess 가 된다.
라이브러리 없이 칼럼 드래그 정렬 만들기 — 행 기반 그리드에서
dnd-kit 없이 Pointer Events 만으로 칼럼 순서 변경을 구현했다. 칼럼이 단일 DOM 이 아닌 row-major 그리드에서, 리렌더 없이 60fps 를 유지하는 방법.
LLM 이 만든 UI 가 "AI스러워" 보이는 이유와, 단계를 쪼개는 전략
카드 남발·과한 라운드·보라 그라데이션은 우연이 아니다. 원인 패턴을 정리하고 ground-up 과 redesign 두 상황에서 각각 다른 워크플로를 쓴 기록.