안녕하세요 👋
영원한 학습자의 성장 기록장, Codeslog입니다.
완벽한 튜토리얼보다 진실된 여정을,
작은 기록들이 모여 큰 자산이 되는 공간을 만들어갑니다.
접근성을 테스트에 녹이기 — role 기반 쿼리
「프론트엔드 테스트 제대로 하기」 시리즈의 10편입니다. 전체 목차 보기 · 용어집 “접근성 테스트"라고 하면 어떤 그림이 떠오르시나요? 전문 컨설팅을 의뢰하고, 별도의 검사 도구를 도입하고, 체크리스트 수백 개를 훑는… 그런 큰일처럼 느껴지기 쉽습니다. 그런데 놀랍게도, 접근성 검증의 절반은 컴포넌트 테스트를 “잘” 쓰는 것만으로 공짜로 따라옵니다. 이 글은 그 원리와 실전 방법입니다 — div 버튼 걸러내기, 아이콘 버튼에 이름 붙이기, 사라지는 포커스 지키기까지. ...
KISA 블록체인 누리단에 위촉되었습니다 — 블록체인 누리단 활동기 1편
우편함에 낯선 대형 봉투가 하나 도착했습니다. 열어보니 검은 하드커버에 금박으로 KISA 네 글자. 조심스럽게 펼치자, 이렇게 적혀 있었어요. 귀하를 한국인터넷진흥원에서 운영하는 ‘블록체인누리단’ 단원으로 위촉합니다. ...
사흘간의 인정교육 수강기, 그리고 이수 완료 — 정보통신설비 유지보수 관리자 취득기 2편
1편에서 대기 세 자릿수의 벽을 피해 제28기 신청 완료의 초록 글자를 확인했었죠. 그리고 지난 사흘 — 7월 13일부터 15일까지, 아침 9시부터 오후 늦게까지 — 그 교육을 다녀왔습니다. 아니, 정확히는 “접속"했습니다. 비대면 실시간 화상교육이니까요. ㅎㅎ ...
?? vs ||, 0이 사라지는 버그의 원인
퀴즈 서비스를 운영하던 어느 날, 항의 메일이 도착했습니다. “저 방금 시험 봤는데 왜 ‘점수 없음’이라고 나오죠?” 확인해보니 그분의 점수는 0점. 분명히 데이터베이스에는 0이 저장돼 있었고, API도 0을 잘 돌려주고 있었습니다. 범인은 화면 코드의 딱 한 줄이었어요. ...
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배 빨라졌습니다. ...