frontend
반쯤 깨진 UI를 막는 법: Next.js 에러 바운더리 경계 설계
핵심은 이거: 에러 바운더리는 ‘기능 경계’에 둬야 UX가 산다. Next.js에서는 라우트 세그먼트(error.js)와 컴포넌트 경계를 조합해 실패를 국소화한다.
nextjsreactclient-component
frontend
Category posts
frontend
끝까지 눌러서 검증하라: 프런트엔드 E2E 테스트 설계
E2E 테스트는 사용자의 핵심 흐름을 브라우저에서 끝까지 재현해, 유닛·통합 테스트가 놓치는 통합 지점을 조기에 잡아낸다.
프론트엔드javascriptquality
frontend
번들러는 최적화여야 한다: 웹 의존성 해석을 플랫폼으로 돌려놓기
한 문장 결론: 브라우저는 모듈을 URL로 로드하므로, 지정자(specifier)를 URL로 해석하는 규칙이 제품 수준으로 정리되지 않으면 번들러가 ‘필수 레이어’가 된다.
javascript프론트엔드workflow
frontend
"서버 없이 STT를 돌린다": 4B급 음성 인식을 브라우저(WebGPU)로 밀어넣는 설계
클라이언트 측 STT(음성→텍스트)는 "모델을 띄우는 것"보다 "메모리·로딩·스트리밍 UI"를 설계하는 순간부터 현실이 된다. WebGPU + WASM으로 브라우저에서 4B급 음성 인식을 돌리는 실전 설계.
aijavascript프론트엔드
frontend
디바운스·쓰로틀로 이벤트 폭주 다루기
연속 이벤트는 디바운스로 "마지막만", 쓰로틀로 "간격마다 한 번"만 처리하면 UI는 부드럽고 서버/브라우저 부담은 줄어든다.
javascript프론트엔드
frontend
필요한 만큼만 Hydrate하라: SSR과 Hydration의 진짜 비용
SSR이 빠르다고 느껴지는 이유와, Hydration이 실제로 어디에서 병목이 되는지. Next.js/Nuxt에서 바로 적용 가능한 전략까지.
javascript프론트엔드
frontend
JS 없이도 UI가 반응한다: scroll-state 쿼리와 타입 있는 attr()
스크롤 가능 방향(위/아래)과 HTML 속성 값(색/숫자/키워드)을 CSS가 직접 읽고 검증하면, "작은 UI 디테일"을 JS 없이도 안정적으로 구현할 수 있습니다.
프론트엔드css
frontend
ResizeObserver로 레이아웃 변화를 잡는 법
ResizeObserver는 요소(element)의 크기 변화를 콜백으로 받을 수 있어서, “컴포넌트 단위 반응형”이 필요할 때 가장 빠르게 답이 된다.
javascript프론트엔드
frontend
MutationObserver로 DOM 변경 감지
내가 직접 건드리지 않은 DOM 변경이 문제를 만든다면, MutationObserver로 “변경 지점”을 로그로 잡아내면 해결 속도가 빨라진다.
퍼블리싱javascript프론트엔드
frontend
File Drag & Drop 업로드 UX
드롭존(drop zone)만 만들지 말고, 페이지 전역에서 브라우저 기본 동작(파일 열기/탭 이동)을 먼저 차단하면 “뚱뚱한 손가락” 같은 실수도 안전하게 막을 수 있다.
javascript프론트엔드퍼블리싱
frontend
javascript: pseudo protocol 걷어내기
함수 실행은 <button>, 화면 이동은 <a>/<Link>로 분리하면 javascript:/# 같은 “이동 차단 꼼수”를 지울 수 있다.
javascript프론트엔드
frontend
필요한 연산만 더 빠르게: WebAssembly를 “브라우저 성능 옵션”으로 붙이기
자바스크립트로는 부담스러운 “순수 계산(컴퓨팅)” 구간을 WebAssembly로 분리하면, UI를 유지하면서도 연산 병목을 줄일 수 있다
javascript프론트엔드