안녕하세요 👋
영원한 학습자의 성장 기록장, Codeslog입니다.
완벽한 튜토리얼보다 진실된 여정을,
작은 기록들이 모여 큰 자산이 되는 공간을 만들어갑니다.
MSW로 네트워크 모킹 — API를 격리하기
「프론트엔드 테스트 제대로 하기」 시리즈의 9편입니다. 전체 목차 보기 · 용어집 컴포넌트가 API를 부르기 시작하면 테스트가 흔들립니다. 서버가 느리면 같이 느려지고, 데이터가 바뀌면 깨지고, 오프라인이면 전멸이죠. MSW(Mock Service Worker) 는 네트워크 요청을 경계에서 가로채 준비된 응답을 돌려주는 도구로, 이 문제를 뿌리에서 해결합니다. 이 글 하나로 설치·핸들러·성공과 실패 시뮬레이션까지 정리해요. ...
접근성 71%는 접근성이 아니다 — 유럽 카르푸 판결과 EAA 1년
시험에서 71점을 받았다고 상상해보세요. “잘했다"고 하기엔 아쉽지만, “노력했다"고 하기엔 충분한 점수죠. ...
폼·상호작용·상태 테스트 — user-event로
「프론트엔드 테스트 제대로 하기」 시리즈의 8편입니다. 전체 목차 보기 · 용어집 버튼은 눌러봐야, 입력창은 타이핑해봐야 진짜 테스트예요. user-event는 Testing Library 가족 중 상호작용 재현을 맡는 도구입니다 — 클릭 한 번에도 포커스 이동과 키 이벤트 순서까지 실제 브라우저처럼 밟아서, “사용자가 하면 되는데 테스트에선 안 되는” 간극을 없애주죠. 이 글에서 타이핑·클릭 테스트를 처음부터 완성합니다. ...
Testing Library 철학 — 사용자처럼 쿼리하기
「프론트엔드 테스트 제대로 하기」 시리즈의 7편입니다. 전체 목차 보기 · 용어집 Testing Library는 React를 비롯한 컴포넌트 테스트의 사실상 표준 도구입니다. 그런데 이 도구의 진짜 알맹이는 API가 아니라 철학 하나예요 — 컴포넌트 테스트에 들어서면 “클래스 이름으로 찾을까? 내부 state를 들여다볼까?” 하는 유혹이 생기는데, Testing Library는 단호하게 말합니다. 사용자가 하는 대로 하라. 이 글에서 그 철학이 무슨 뜻인지, 쿼리를 고르는 순서, 그리고 왜 이 방식이 접근성과 한 몸인지를 검색 컴포넌트를 직접 만들며 확인합니다. ...
mock·stub·spy — 테스트 더블 제대로 이해하기
「프론트엔드 테스트 제대로 하기」 시리즈의 6편입니다. 전체 목차 보기 · 용어집 “mock 써서 테스트했어요"라는 말, 실은 서로 다른 네 가지 개념(stub·spy·mock·fake)을 뭉뚱그린 표현입니다. 이 글 하나로 네 용어의 차이, Vitest vi.fn() 하나로 전부 커버하는 법, 그리고 “어디까지 가짜로 바꿀 것인가"의 기준까지 정리합니다. 한 번 정리해두면 테스트 코드를 읽고 쓰는 눈이 훨씬 선명해져요. ...
타입스크립트 7 정식 출시 — 10배 빨라진 네이티브 컴파일러, 지금 갈아타도 될까
“tsc 돌려놓고 커피 타러 간다"는 농담, 프론트엔드 개발자라면 한 번쯤 해보셨을 거예요. 그 농담의 수명이 이제 끝날지도 모르겠습니다. 2026년 7월 8일, Microsoft가 TypeScript 7.0을 정식 출시했습니다. 컴파일러와 언어 서비스 전체를 Go로 포팅한 네이티브 버전 — 프리뷰 시절 tsgo(@typescript/native-preview)라는 이름으로 미리 써보신 분도 있을 그것의 정식판입니다. 프리뷰만으로 이미 주간 850만 다운로드를 넘겼던 물건이에요. 발표 기준으로 대형 프로젝트 타입 체크가 8~12배 빨라졌습니다. ...
비동기·타이머·에러를 테스트하는 법
「프론트엔드 테스트 제대로 하기」 시리즈의 5편입니다. 전체 목차 보기 · 용어집 현실의 코드는 기다립니다. API 응답을 기다리고, 타이머를 기다리죠. 그래서 비동기 테스트는 프론트엔드에서 가장 먼저 부딪히는 벽인데, 어렵게 느껴지는 이유는 사실 딱 하나예요 — “언제 검증하느냐”. 답이 도착하기 전에 채점하면, 빈 답안지를 채점하는 셈이 되거든요. 이 글 하나로 Promise 검증(resolves/rejects), 가짜 타이머, 실패 케이스까지 — 기다리는 코드를 다루는 무기를 전부 챙깁니다. ...
단위 테스트 기초 — 순수 함수·경계값·AAA 패턴
「프론트엔드 테스트 제대로 하기」 시리즈의 4편입니다. 전체 목차 보기 · 용어집 단위 테스트는 모든 테스트의 출발점입니다. 함수 하나를 앞에 두고 “이 입력이면 이 출력"을 못 박는, 가장 작고 가장 빠른 검증이죠. 이 글 하나로 단위 테스트가 무엇인지부터 순수 함수·AAA 패턴·경계값까지, 실전 코드로 기초를 완성합니다. ...
데모 앱에 Vitest 붙이기 — 첫 초록불까지
「프론트엔드 테스트 제대로 하기」 시리즈의 3편입니다. 전체 목차 보기 · 용어집 React + Vite + TypeScript 프로젝트에 테스트 환경을 붙이는 과정을 빈 폴더에서 첫 통과까지 통째로 따라 하는 글입니다. Vitest·Testing Library·jsdom을 설치하고, 설정 파일을 줄 단위로 이해하고, 첫 테스트를 초록불로 만들고, 세팅에서 자주 막히는 지점까지 — 이 글 하나로 끝나요. ...
무엇을 얼마나 테스트할까 — 커버리지 100%의 함정
「프론트엔드 테스트 제대로 하기」 시리즈의 2편입니다. 전체 목차 보기 · 용어집 지난 편에서 “왜 테스트인가"를 이야기했다면, 이번엔 현실적인 질문입니다. “그래서 뭘, 얼마나 테스트해야 하죠?” 시간은 유한하고, 모든 걸 테스트할 수는 없으니까요. ...