뮤테이션 테스트: 테스트의 품질을 테스트하다
코드 커버리지 100%인데 버그가 새나간다면? 테스트가 있다고 다 좋은 테스트가 아니다. 뮤테이션 테스트가 테스트 스위트의 진짜 품질을 드러내는 방법을 알아봤다.

개발과 기술에 대한 이야기를 기록합니다.
코드 커버리지 100%인데 버그가 새나간다면? 테스트가 있다고 다 좋은 테스트가 아니다. 뮤테이션 테스트가 테스트 스위트의 진짜 품질을 드러내는 방법을 알아봤다.

한국어로만 서비스하던 블로그에 영어를 추가하면서 next-intl을 도입했다. App Router 환경에서 다국어를 구현하며 겪은 시행착오와 패턴.

서비스를 만들었는데 아무도 오지 않았다. 마케팅 예산 없이 검색 유입을 만드는 기술적 SEO를 Next.js에서 직접 구현한 경험.

TDD와 BDD는 둘 다 '테스트 먼저'라는 철학을 공유하지만, 초점과 사용 방식이 다르다. Red-Green-Refactor 사이클부터 Gherkin 문법까지, 실전 TypeScript 예제로 비교해봤다.

서비스가 죽었는데 12시간 동안 몰랐다. 1인 개발자가 최소한의 비용으로 서비스 상태를 감시하는 모니터링 스택을 구성한 경험.

처음 코드 리뷰를 받았을 때 느끼는 그 두려움, 누구나 겪는 거다. PR 올리는 법부터 건설적인 피드백 주는 법까지, 리뷰 문화를 제대로 만들어가는 실전 가이드.

유저가 카카오톡으로 '안 돼요'라고 보내기 전에 에러를 먼저 감지하고 싶었다. Next.js 프로젝트에 Sentry를 연동하면서 배운 실전 설정과 알림 구성.
테스트에서 fetch를 직접 모킹하거나, axios를 vi.mock()으로 교체하다가 실제 API와 차이가 생겨 고생한 적 있다. MSW는 네트워크 레벨에서 요청을 인터셉트해서 그런 문제를 근본적으로 해결한다. 설정부터 Vitest, Storybook 통합까지 정리했다.

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

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

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

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

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

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

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

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

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

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

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

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