지식 지도 — Knowledge Index

새벽 배포 후 회원가입 플로우가 깨진 걸 유저가 먼저 발견했다. Playwright로 E2E 테스트를 구축하면서 배운 실전 패턴과 CI 연동 방법.

컴포넌트 내부 state를 직접 검사하는 테스트는 리팩터링마다 깨진다. Testing Library의 핵심 철학은 '사용자가 실제로 하는 것만 테스트하라'는 것이다. getByRole이 왜 최선인지, userEvent와 fireEvent의 차이가 뭔지 정리했다.

백엔드 API가 준비되지 않아 프론트엔드 개발이 멈추는 문제를 MSW(Mock Service Worker)로 해결했다. 네트워크 레벨 API 모킹의 원리와 실전 패턴.

유닛 테스트가 전부 초록불인데 QA가 클릭 몇 번 만에 버그를 찾아낸다. E2E 테스트가 없어서다. Playwright로 실제 브라우저에서 사용자 시나리오를 자동화하는 법을 처음부터 정리했다.

vi.mock()과 vi.spyOn()의 차이를 몰라 밤새 디버깅한 적이 있다. 스냅샷 테스트가 언제 독이 되고 약이 되는지, 커버리지 숫자가 왜 거짓말을 하는지 — 실전에서 배운 Vitest 심화 전략을 풀어본다.

프론트엔드 테스트를 처음 도입하면서 겪은 시행착오. Vitest와 Testing Library 조합으로 React 컴포넌트를 테스트하는 실전 패턴을 정리했다.

HTML5 Drag and Drop API로 만든 칸반 보드가 네이버 웨일에서만 동작하지 않았다. 브라우저 제스처가 네이티브 드래그 이벤트를 가로채는 문제, dnd-kit의 Pointer Events 기반 아키텍처로 해결했다.

오픈소스에 기여하려고 봤는데 README가 없어서 포기한 적이 있다. 그때 좋은 문서의 가치를 뼈저리게 느꼈다.

맥을 새로 사면 개발 환경 세팅에 이틀이 걸렸다. dotfiles과 자동화 스크립트를 만들고 나니 30분이면 끝난다.

정규표현식을 외계어처럼 느꼈는데, 실제로 자주 쓰는 패턴 20개만 익히니 텍스트 처리가 한 줄로 끝났다.

폼 검증 로직을 직접 작성하다가 엣지 케이스 지옥에 빠졌다. React Hook Form과 Zod 조합이 폼 개발의 최적해였다.

Redux가 너무 복잡해서 Zustand로 바꿨는데, 보일러플레이트가 90% 줄었다. 근데 제대로 쓰려면 알아야 할 패턴이 있었다.

SSR 페이지가 데이터 로딩 때문에 3초간 빈 화면을 보여주고 있었다. Streaming SSR로 준비된 부분부터 먼저 보여주니 체감 속도가 극적으로 개선됐다.

API 라우트 만들고, fetch 호출하고, 로딩 상태 관리하고... 폼 하나 처리하는 데 너무 많은 코드가 필요했는데, Server Actions로 획기적으로 줄었다.

Server Component에서 함수를 props로 전달했더니 에러가 났다. 직렬화 경계를 이해하고 나니 RSC의 진짜 패턴이 보였다.

공개 API를 운영하다 보면 예상치 못한 대량 요청에 시달릴 수 있다. Rate Limiting과 API Key 관리로 API를 보호하는 방법을 정리했다.

admin/user 두 역할로 시작했는데, 요구사항이 복잡해지면서 RBAC만으로 부족해졌다. ABAC까지 고려한 권한 설계를 정리했다.

서비스가 3개로 늘어나면서 각각 로그인을 구현하는 게 지옥이었다. SSO로 한 번의 인증으로 모든 서비스에 접근하게 만든 이야기.

비밀번호 찾기가 CS의 절반을 차지했는데, Passkey를 도입하니 비밀번호 자체가 필요 없어졌다. 근데 구현이 생각보다 복잡했다.

블로그 이미지가 전체 페이지 용량의 80%를 차지하고 있었다. 포맷 변환과 반응형 이미지로 로딩 속도를 극적으로 개선한 이야기.