"프론트엔드" 태그 글 모음

픽스처·인증 재사용·병렬 실행

「프론트엔드 테스트 제대로 하기」 시리즈의 13편입니다. 전체 목차 보기 · 용어집 ...

로케이터와 auto-wait — flaky 테스트 줄이기

「프론트엔드 테스트 제대로 하기」 시리즈의 12편입니다. 전체 목차 보기 · 용어집 flaky 테스트 — 코드는 그대로인데 어떤 날은 통과하고 어떤 날은 실패하는 테스트. E2E를 처음 도입한 팀이 가장 먼저 앓는 병이고, 방치하면 “또 걔야? 그냥 다시 돌려"라는 무서운 문화로 이어집니다. 다행히 원인은 대부분 하나예요: 너무 일찍, 혹은 잘못된 방법으로 요소를 찾는 것. 이 글에서 Playwright의 로케이터와 auto-wait로 그 뿌리를 뽑습니다. ...

Playwright E2E 입문 — 첫 시나리오

「프론트엔드 테스트 제대로 하기」 시리즈의 11편입니다. 전체 목차 보기 · 용어집 Playwright는 진짜 브라우저(크로미움·파이어폭스·웹킷)를 코드로 조종하는 E2E 테스트 도구입니다. E2E(End-to-End)는 이름 그대로 끝에서 끝까지 — 사용자가 접속해서 검색하고 결과를 보는 흐름 전체를 실제 브라우저에서 재현하는 테스트고요. 이 글에서 설치부터 첫 시나리오 통과까지 한 번에 갑니다. ...

접근성을 테스트에 녹이기 — role 기반 쿼리

「프론트엔드 테스트 제대로 하기」 시리즈의 10편입니다. 전체 목차 보기 · 용어집 “접근성 테스트"라고 하면 어떤 그림이 떠오르시나요? 전문 컨설팅을 의뢰하고, 별도의 검사 도구를 도입하고, 체크리스트 수백 개를 훑는… 그런 큰일처럼 느껴지기 쉽습니다. 그런데 놀랍게도, 접근성 검증의 절반은 컴포넌트 테스트를 “잘” 쓰는 것만으로 공짜로 따라옵니다. 이 글은 그 원리와 실전 방법입니다 — div 버튼 걸러내기, 아이콘 버튼에 이름 붙이기, 사라지는 포커스 지키기까지. ...

?? vs ||, 0이 사라지는 버그의 원인

퀴즈 서비스를 운영하던 어느 날, 항의 메일이 도착했습니다. “저 방금 시험 봤는데 왜 ‘점수 없음’이라고 나오죠?” 확인해보니 그분의 점수는 0점. 분명히 데이터베이스에는 0이 저장돼 있었고, API도 0을 잘 돌려주고 있었습니다. 범인은 화면 코드의 딱 한 줄이었어요. ...

MSW로 네트워크 모킹 — API를 격리하기

「프론트엔드 테스트 제대로 하기」 시리즈의 9편입니다. 전체 목차 보기 · 용어집 컴포넌트가 API를 부르기 시작하면 테스트가 흔들립니다. 서버가 느리면 같이 느려지고, 데이터가 바뀌면 깨지고, 오프라인이면 전멸이죠. MSW(Mock Service Worker) 는 네트워크 요청을 경계에서 가로채 준비된 응답을 돌려주는 도구로, 이 문제를 뿌리에서 해결합니다. 이 글 하나로 설치·핸들러·성공과 실패 시뮬레이션까지 정리해요. ...

폼·상호작용·상태 테스트 — 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배 빨라졌습니다. ...