안녕하세요 👋

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

화면의 색을 최대 대비로 바꿔 쓰는 사람들이 있습니다. 검은 배경에 노란 글씨, 파란 배경에 흰 글씨처럼요. 저시력 사용자에게는 이게 글자를 읽을 수 있느냐 없느냐의 문제고, 편두통이나 빛 과민이 있는 사람은 반대로 자극을 줄인 저대비 팔레트를 쓰기도 합니다. 공통점은 하나예요 — 색을 사용자가 직접 정한다는 것. 그리고 그 순간, 우리가 CSS에 적어둔 색은 상당수 무시됩니다. ...

다크모드를 켰더니 눈이 더 피로했습니다. 배경은 검은색인데 텍스트가 진한 회색이라 대비가 너무 낮았고, 링크는 기본 파란색(#0000ff) 그대로라 눈이 아팠어요. 이미지는 어두운 화면에서 홀로 눈부시게 빛났습니다. 버튼 하나는 배경과 같은 색이라 아예 보이지도 않았어요. ...

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

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

우편함에 낯선 대형 봉투가 하나 도착했습니다. 열어보니 검은 하드커버에 금박으로 KISA 네 글자. 조심스럽게 펼치자, 이렇게 적혀 있었어요. 귀하를 한국인터넷진흥원에서 운영하는 ‘블록체인누리단’ 단원으로 위촉합니다. ...

1편에서 대기 세 자릿수의 벽을 피해 제28기 신청 완료의 초록 글자를 확인했었죠. 그리고 지난 사흘 — 7월 13일부터 15일까지, 아침 9시부터 오후 늦게까지 — 그 교육을 다녀왔습니다. 아니, 정확히는 “접속"했습니다. 비대면 실시간 화상교육이니까요. ㅎㅎ ...

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

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

시험에서 71점을 받았다고 상상해보세요. “잘했다"고 하기엔 아쉽지만, “노력했다"고 하기엔 충분한 점수죠. ...