https://www.codeslog.com/categories/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C/ Recent content in 프론트엔드 on Codeslog https://www.codeslog.com/images/default-cover.png?v=20260114T1436 https://www.codeslog.com/images/default-cover.png?v=20260114T1436 Hugo -- 0.168.0 ko Sat, 24 Oct 2026 02:02:00 +0900 https://www.codeslog.com/posts/modal-dialog-implementation/ Sat, 24 Oct 2026 02:02:00 +0900 https://www.codeslog.com/posts/modal-dialog-implementation/ 모달 접근성을 dialog의 showModal()과 div 직접 구현으로 비교합니다. inert로 배경 막기, 포커스 트랩, ESC 닫기, 스크롤 막기, 포커스 복원 코드와 dialog에서 Tab이 주소창으로 나가는 이유까지 크롬 실측으로 정리했어요. https://www.codeslog.com/posts/form-ux-validation/ Tue, 15 Sep 2026 11:31:00 +0900 https://www.codeslog.com/posts/form-ux-validation/ 포커스만 줘도 에러부터 띄우는 폼, 다 입력해야 알려주는 폼 — 검증 타이밍이 전부입니다. blur 이후 검증, aria-describedby·aria-invalid 연결, role=alert와 aria-live 구분을 실전 코드로 정리합니다. https://www.codeslog.com/posts/spa-focus-management/ Tue, 15 Sep 2026 11:26:00 +0900 https://www.codeslog.com/posts/spa-focus-management/ SPA에서 라우트가 바뀌어도 스크린 리더가 조용한 이유와, 라우팅 후 포커스 관리를 제대로 하는 법을 React·Next.js 예제로 설명합니다. tabIndex -1 포커스 이동, aria-live 알림, 포커스 복원 패턴까지 다룹니다. https://www.codeslog.com/posts/safari-top-level-await-fix/ Thu, 03 Sep 2026 11:25:33 +0900 https://www.codeslog.com/posts/safari-top-level-await-fix/ 사파리 26.6과 iOS 26.5에서 top-level await 재현 코드를 돌려 ReferenceError를 확인하고, 뒤에 선언된 모듈까지 앞 TLA를 기다리는 직렬화 증상을 실측했습니다. Safari 27이 고친 것과 그 전 버전 대응법까지. https://www.codeslog.com/posts/aria-live-regions/ Wed, 02 Sep 2026 01:14:30 +0900 https://www.codeslog.com/posts/aria-live-regions/ aria-live를 분명히 달았는데 스크린 리더가 침묵합니다. 빈 컨테이너가 DOM에 먼저 있어야 하는 이유부터 스크린 리더별로 갈리는 동작, 알림 대신 포커스를 옮겨야 하는 경계까지, 라이브 리전이 안 읽히는 원인을 하나씩 짚습니다. https://www.codeslog.com/posts/scroll-driven-animation/ Wed, 12 Aug 2026 01:34:00 +0900 https://www.codeslog.com/posts/scroll-driven-animation/ 스크롤을 애니메이션의 시간 축으로 다루는 Scroll-Driven Animation을 정리합니다. 네이티브 CSS, IntersectionObserver, requestAnimationFrame 세 방식의 원리와 장단점, 브라우저 지원과 접근성 대응까지 봅니다. https://www.codeslog.com/posts/frontend-testing-wrap/ Sat, 08 Aug 2026 01:12:00 +0900 https://www.codeslog.com/posts/frontend-testing-wrap/ 프론트엔드 테스트 시리즈를 마치며. 작은 앱 하나에 쌓인 다섯 층을 결산하고, 테스트가 팀 문화와 면접에서 갖는 의미, 테스트 없는 레거시에서 시작하는 법, API 계약·뮤테이션 테스트로 뻗어갈 다음 단계를 정리합니다. https://www.codeslog.com/posts/frontend-testing-ai-pitfalls/ Fri, 07 Aug 2026 14:59:00 +0900 https://www.codeslog.com/posts/frontend-testing-ai-pitfalls/ AI가 짜준 코드는 그럴듯하게 틀립니다. 라벨 없는 입력·div 버튼처럼 반복되는 누락 일곱 가지를 짚고, role 쿼리와 axe로 잡아내는 법, 그리고 적어두지 않은 약속은 테스트도 못 잡는다는 실측까지 담았습니다. https://www.codeslog.com/posts/frontend-testing-ai-playwright/ Thu, 06 Aug 2026 01:11:00 +0900 https://www.codeslog.com/posts/frontend-testing-ai-playwright/ AI가 브라우저를 직접 조작하는 시대. Playwright codegen과 MCP 에이전트를 실무 기준으로 짚고, MCP가 스크린샷이 아니라 접근성 트리를 읽는다는 점, 자가치유 셀렉터가 왜 Playwright 기능이 아닌지까지 정리합니다. https://www.codeslog.com/posts/frontend-testing-ai-generate/ Thu, 06 Aug 2026 00:46:00 +0900 https://www.codeslog.com/posts/frontend-testing-ai-generate/ 「프론트엔드 테스트 제대로 하기」 시리즈 19편. ChatGPT·Claude 같은 LLM에게 테스트를 맡기면 경계·실패·접근성 케이스를 조용히 빼먹곤 합니다. 좋은 초안을 받는 요령부터 뮤테이션 테스트로 AI가 짠 테스트를 검증하는 체크리스트까지 다룹니다. https://www.codeslog.com/posts/browser-features-accessibility-2026/ Wed, 05 Aug 2026 15:07:00 +0900 https://www.codeslog.com/posts/browser-features-accessibility-2026/ 브라우저 지원표가 초록불이어도 접근성까지 초록불인 건 아닙니다. popover·앵커 포지셔닝·dialog·뷰 트랜지션 네 가지 기능을 2026년 8월 기준으로 점검하고, 브라우저가 대신 해주는 것과 개발자가 직접 챙겨야 하는 것을 실제 데모와 함께 정리했습니다. https://www.codeslog.com/posts/frontend-testing-coverage-metrics/ Tue, 04 Aug 2026 09:08:00 +0900 https://www.codeslog.com/posts/frontend-testing-coverage-metrics/ 커버리지 리포트의 Stmts·Branch·Funcs·Lines, 이 네 숫자 중 뭘 믿어야 할까요? 라인은 후하고 브랜치가 정직한 이유를 실제 리포트로 확인하고, flaky 비율·MTTR 같은 커버리지 너머의 팀 건강 지표까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-ci-github-actions/ Mon, 03 Aug 2026 01:59:00 +0900 https://www.codeslog.com/posts/frontend-testing-ci-github-actions/ PR을 열 때마다 단위·E2E·접근성(axe) 검사가 자동으로 도는 파이프라인을 GitHub Actions로 세팅합니다. 잡을 병렬로 나눠 속도를 올리고, branch protection으로 진짜 머지 게이트를 만드는 법까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-visual-regression/ Wed, 29 Jul 2026 15:01:36 +0900 https://www.codeslog.com/posts/frontend-testing-visual-regression/ '기능은 되는데 레이아웃이 깨졌어요.' Playwright의 toHaveScreenshot으로 baseline과 픽셀을 비교하는 시각적 회귀 테스트를 구현하고, 애니메이션·시간을 고정하는 법과 macOS·Linux 폰트 렌더링 차이라는 환경 복병까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-axe-e2e/ Mon, 27 Jul 2026 14:38:51 +0900 https://www.codeslog.com/posts/frontend-testing-axe-e2e/ 실제 브라우저에 그려진 화면을 axe-core 엔진으로 스캔해 접근성 위반을 자동으로 잡아냅니다. @axe-core/playwright로 E2E에 붙이고, 글씨 색을 살짝 흐리게 바꿔 color-contrast 위반이 실패로 잡히는 과정을 확인합니다. https://www.codeslog.com/posts/frontend-testing-playwright-debug/ Wed, 22 Jul 2026 01:30:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-debug/ 테스트가 CI에서만 깨질 때, 무엇을 봐야 할까요? Playwright 트레이스 뷰어로 실패 순간의 DOM·네트워크·콘솔을 되감아 보고, UI·디버그 모드와 리트라이를 '해결'이 아닌 flaky 신호로 읽는 법을 다룹니다. https://www.codeslog.com/posts/frontend-testing-playwright-fixtures/ Tue, 21 Jul 2026 01:25:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-fixtures/ 매 테스트마다 같은 준비를 반복하고 있나요? Playwright의 base.extend 커스텀 픽스처와 Page Object로 반복을 없애고, storageState로 로그인을 한 번만, fullyParallel 병렬 실행에서 테스트 격리 지키는 법까지 다룹니다. https://www.codeslog.com/posts/opacity-contrast-trap/ Tue, 21 Jul 2026 00:30:00 +0900 https://www.codeslog.com/posts/opacity-contrast-trap/ CSS에 진한 회색을 넣었는데 접근성 검사기는 대비 미달이라고 합니다. 범인은 opacity예요. opacity가 글자색을 배경과 섞어 대비를 깎는 원리와, 실제 블로그에서 겪은 사례·계산·해결법을 초보 눈높이로 정리합니다. https://www.codeslog.com/posts/frontend-testing-playwright-locators/ Sat, 18 Jul 2026 23:06:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-locators/ E2E가 가끔 실패하는 진짜 이유와 해법. getByLabel이 두 요소에 매칭돼 strict mode 위반이 났던 실제 사례로 로케이터의 지연 평가를 이해하고, auto-wait로 waitForTimeout(sleep) 없이 flaky 테스트를 줄입니다. https://www.codeslog.com/posts/high-contrast-mode/ Sat, 18 Jul 2026 22:47:00 +0900 https://www.codeslog.com/posts/high-contrast-mode/ 다크모드는 내가 색을 고르는 일이지만, 고대비 모드는 OS가 강제하는 색에 응답하는 일입니다. forced-colors 미디어 쿼리와 시스템 색 키워드, prefers-contrast로 저시력 사용자까지 지원하는 법을 실전 코드로 정리합니다. https://www.codeslog.com/posts/dark-mode-implementation/ Sat, 18 Jul 2026 02:44:00 +0900 https://www.codeslog.com/posts/dark-mode-implementation/ 다크모드를 색 반전으로 구현하면 오히려 읽기 어려워집니다. CSS 변수로 다크모드 전용 디자인 토큰을 설계하고, prefers-color-scheme과 JS 토글, 색 대비 검증, FOUC 방지까지 실전 코드로 다룹니다. https://www.codeslog.com/posts/frontend-testing-playwright-intro/ Sat, 18 Jul 2026 02:25:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-intro/ 진짜 브라우저에서 사용자 흐름 전체를 검증하는 E2E. Playwright를 설치하고 webServer로 dev 서버를 자동 실행해, getByRole로 찾고 검증하는 첫 시나리오를 통과시킵니다. 단위·컴포넌트 테스트와 역할을 어떻게 나눌지도 정리합니다. https://www.codeslog.com/posts/frontend-testing-a11y-queries/ Fri, 17 Jul 2026 01:37:00 +0900 https://www.codeslog.com/posts/frontend-testing-a11y-queries/ 「프론트엔드 테스트 제대로 하기」 시리즈 10편. 잘 짠 컴포넌트 테스트는 그 자체로 접근성 검증이 됩니다. role 기반 쿼리와 접근 가능한 이름(accessible name)으로 div 버튼, 사라지는 포커스 같은 접근성 회귀를 잡는 법을 다룹니다. https://www.codeslog.com/posts/javascript-nullish-coalescing/ Tue, 14 Jul 2026 23:52:00 +0900 https://www.codeslog.com/posts/javascript-nullish-coalescing/ ?? 연산자(nullish coalescing)와 ||의 결정적 차이 — 0과 빈 문자열이 기본값에 먹히는 버그의 원인입니다. falsy의 함정, ??= 할당, 옵셔널 체이닝 조합, 그리고 둘을 섞으면 SyntaxError가 나는 이유까지 정리했습니다. https://www.codeslog.com/posts/frontend-testing-msw/ Tue, 14 Jul 2026 01:05:00 +0900 https://www.codeslog.com/posts/frontend-testing-msw/ 테스트에서 진짜 API를 부르면 느리고 불안정합니다. MSW(Mock Service Worker) v2로 네트워크 경계를 가로채 성공·실패 응답을 마음대로 시뮬레이션하고, fetch를 직접 모킹하지 않는 이유까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-user-event/ Mon, 13 Jul 2026 23:39:00 +0900 https://www.codeslog.com/posts/frontend-testing-user-event/ 타이핑, 클릭, 지우기 버튼까지 — user-event로 실제 사용자의 상호작용을 재현합니다. 검색 컴포넌트를 서버 연동으로 업그레이드하며 findBy로 비동기 로딩을 기다리고, 포커스 이동까지 검증해 fireEvent와 다른 이유를 확인합니다. https://www.codeslog.com/posts/frontend-testing-testing-library/ Fri, 10 Jul 2026 01:27:00 +0900 https://www.codeslog.com/posts/frontend-testing-testing-library/ React Testing Library의 핵심 철학 '사용자처럼 테스트하기'. getByRole 중심의 쿼리 우선순위와 getBy·queryBy·findBy 3형제를 익히고, htmlFor를 지워도 눈으로는 멀쩡하지만 테스트는 빨간불이 되는 이유까지 확인합니다. https://www.codeslog.com/posts/frontend-testing-test-doubles/ Fri, 10 Jul 2026 00:44:00 +0900 https://www.codeslog.com/posts/frontend-testing-test-doubles/ mock, stub, spy, fake… 헷갈리는 테스트 더블 용어를 정리합니다. Vitest vi.fn() 하나로 셋을 다루는 법(Jest도 거의 동일)과 의존성 주입으로 분석 로거를 테스트하며, 어디까지 가짜로 바꿀지의 경계 원칙까지 짚습니다. https://www.codeslog.com/posts/typescript-7-native-compiler/ Thu, 09 Jul 2026 23:05:00 +0900 https://www.codeslog.com/posts/typescript-7-native-compiler/ Go로 다시 태어난 TypeScript 7이 정식 출시됐습니다. VSCode 125초→10초 실측 벤치마크, strict 기본값 등 달라진 설정, 6.x 병행 설치 마이그레이션까지 — 지금 갈아타도 되는지 판단 기준을 정리했습니다. https://www.codeslog.com/posts/frontend-testing-async/ Wed, 08 Jul 2026 00:27:00 +0900 https://www.codeslog.com/posts/frontend-testing-async/ Promise, setTimeout, 그리고 실패 케이스. Vitest의 resolves·rejects 매처와 가짜 타이머(fake timers)로 디바운스 같은 비동기 코드를 테스트합니다. await를 빠뜨리면 왜 거짓 초록불이 뜨는지도 직접 확인해봅니다. https://www.codeslog.com/posts/frontend-testing-unit-basics/ Mon, 06 Jul 2026 00:20:00 +0900 https://www.codeslog.com/posts/frontend-testing-unit-basics/ 가장 튼튼한 기초, 단위 테스트. filterByQuery 순수 함수로 경계값·AAA(Arrange-Act-Assert) 패턴을 Vitest 실전 예제로 익히고, trim()을 일부러 지워 빨간불을 확인하며 toBe·toEqual의 차이까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-setup-vitest/ Sun, 05 Jul 2026 00:05:00 +0900 https://www.codeslog.com/posts/frontend-testing-setup-vitest/ React + Vite + TypeScript 데모 앱에 Vitest·Testing Library·jsdom을 설치하고 vite.config.ts로 설정해 첫 테스트를 초록불로 만듭니다. document is not defined 같은 흔한 세팅 오류도 짚습니다. https://www.codeslog.com/posts/frontend-testing-strategy-coverage/ Sat, 04 Jul 2026 22:34:00 +0900 https://www.codeslog.com/posts/frontend-testing-strategy-coverage/ 테스트는 많이 짤수록 좋은 걸까요? 무엇을 먼저 테스트할지 고르는 기준과, assert 없는 테스트·스냅샷 남발·구현 박제처럼 커버리지 숫자만 올리고 사용자는 못 지키는 함정들을 데모 코드로 짚고, 단위-컴포넌트-E2E로 쌓는 이 시리즈의 전략을 정리합니다. https://www.codeslog.com/posts/frontend-testing-glossary/ Sat, 04 Jul 2026 22:30:00 +0900 https://www.codeslog.com/posts/frontend-testing-glossary/ 단위 테스트부터 flaky, 픽스처, MCP까지 — 「프론트엔드 테스트 제대로 하기」 시리즈에 나오는 용어를 학습 순서대로 초보자도 이해할 수 있게 풀어 정리했습니다. 읽다가 낯선 단어를 만나면 언제든 이 페이지로 돌아오세요. https://www.codeslog.com/posts/frontend-testing-why-now/ Fri, 03 Jul 2026 22:40:00 +0900 https://www.codeslog.com/posts/frontend-testing-why-now/ AI가 코드를 쏟아내는 시대일수록 테스트가 더 중요해졌습니다. 「프론트엔드 테스트 제대로 하기」 시리즈의 첫 글로, 테스트가 주는 것과 피라미드·트로피 전략을 정리하고, Vitest·Playwright·axe-core로 함께 만들 커리큘럼을 소개합니다. https://www.codeslog.com/posts/javascript-promise-methods/ Wed, 08 Apr 2026 01:00:00 +0900 https://www.codeslog.com/posts/javascript-promise-methods/ Promise.all은 하나라도 실패하면 전체가 날아갑니다. 대시보드가 통째로 흰 화면이 된 경험 있으신가요? Promise.all과 Promise.allSettled의 핵심 차이를 실무 예제로 살펴보고, 언제 어떤 걸 써야 하는지 정리합니다. https://www.codeslog.com/posts/javascript-function-hoisting/ Sat, 04 Apr 2026 02:30:00 +0900 https://www.codeslog.com/posts/javascript-function-hoisting/ 함수를 선언 전에 호출했는데 왜 어떤 코드는 되고 어떤 코드는 TypeError가 날까요? 함수 선언식과 표현식의 차이, 호이스팅(Hoisting) 동작 원리, 화살표 함수까지 실무 예제와 함께 한 번에 정리합니다. https://www.codeslog.com/posts/code-block-accessibility-improvement/ Fri, 09 Jan 2026 20:00:00 +0900 https://www.codeslog.com/posts/code-block-accessibility-improvement/ Hugo PaperMod 블로그의 코드 블록을 개선한 기록입니다. 라인 넘버를 table 태그 대신 CSS Counter로 다시 구현해, 스크린 리더 사용자가 불필요한 표 정보 없이 코드를 읽을 수 있도록 더 시맨틱하고 접근성 높게 바꾼 과정을 정리합니다.