프론트엔드
4만 페이지의 내부 링크 설계 — 고아 페이지와 크롤 깊이를 관리하는 법
페이지가 수만 개로 늘어난 사이트에서 내부 링크를 설계하는 방법을 정리합니다. 크롤 깊이 측정, 고아 페이지 탐지, 허브 페이지의 링크 예산, 사이트맵 분할, 그리고 중복 판정을 피하는 구조까지 다룹니다.
studio-web-craft.xyz — frontend · perf · dx
웹 프론트엔드 연구실
빌드·배포·관측을 실무 실험과 문서화로 병행합니다. 짧은 메모와 긴 분석을 같은 블로그에 올립니다.
웹 프론트엔드·렌더링·번들·성능·DX를 브라우저 제품 관점에서 정리한 기술 블로그입니다. React·Next·TypeScript, 테스트·CI는 인용·출처를 우선합니다.
프론트엔드
더보기프론트엔드
사이트 내 검색 화면 구현 — URL 상태, 하이라이트, 그리고 빈 결과
서비스 안에 검색 기능을 붙일 때 프론트엔드가 처리해야 하는 것들을 정리합니다. 입력과 URL 동기화, 요청 취소와 경쟁 상태, 결과 하이라이트, 키보드 조작, 그리고 검색 결과 페이지의 색인 정책까지 다룹니다.
프론트엔드
주제 × 지역 조합 페이지의 URL 설계 — 중복 없이 확장하기
카테고리와 지역을 곱해 페이지를 만드는 정보 사이트에서 URL 구조와 중복 처리를 어떻게 설계할지 정리합니다. 조합 폭발 억제, canonical 지정, 필터 파라미터 처리, 빵부스러기와 내부 링크, 그리고 페이지 생성 기준까지 다룹니다.
성능
더보기성능
HTTP 캐시·브라우저·CDN·엣지: 무엇을 어디서 캐시할지 실무 결정표
Cache-Control 한 줄이 기대와 다르게 동작할 때가 많습니다. 브라우저 캐시·공유 CDN·원본·엣지 함수의 역할을 나누고, GET과 변이 요청, 재검증까지 한눈에 정리합니다.
성능
번들 분석과 코드 스플리팅 — 실무에서 통하는 접근
번들 시각화로 거대 의존성을 찾고, 라우트·기능 단위 dynamic import, 트리셰이킹 친화 설정을 점검합니다.
성능
Core Web Vitals 실무 — LCP·INP 디버깅 순서
필드 데이터와 랩 데이터를 나눠 보고, LCP 요소·상호작용 지연의 흔한 원인을 좁히는 절차를 정리합니다.
## latest
최신 글