HTML Academy · 강의

최신 브라우저의 Navigation API

Navigation API로 탐색을 가로채고 사용자 지정하기

최신 브라우저의 Navigation API은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

현대적인 대체 수단

내비게이션 API는 히스토리 API를 대체하는 더 새롭고 강력한 기능입니다. 이동을 일급 객체로 취급하므로 이를 가로채고, 중단하고, 완료될 때까지 기다릴 수 있습니다. 이는 2024년의 SPA가 실제로 라우팅을 처리하는 방식에 더 가깝습니다.

window.navigation 객체

window.navigation은 항목 목록, 현재 항목, navigate 이벤트를 제공합니다. navigation.entries()는 현재 히스토리의 모든 항목을 반환하고, navigation.currentEntry는 활성 항목입니다. 불투명한 길이와 읽을 수 없는 상태만 제공하는 히스토리 API와 비교해 보십시오.

navigate 이벤트

navigation.addEventListener("navigate", handler)를 수신하면 링크 클릭, 양식 제출, 뒤로 가기와 앞으로 가기, 프로그래밍 방식의 이동을 포함한 모든 동일 문서 이동을 가로챌 수 있습니다. 하나의 연결 지점으로 클릭 가로채기, popstate, 양식 제출 수신기를 따로 구성하던 방식을 대체할 수 있습니다.

navigation.addEventListener("navigate", (e) => {
  if (!e.canIntercept) return;
  e.intercept({
    handler: async () => {
      await renderPage(new URL(e.destination.url).pathname);
    }
  });
});

intercept와 handler

e.intercept({ handler })를 호출하면 해당 이동을 가로챕니다. handler는 프라미스를 반환합니다. 처리가 진행되는 동안 이동은 "진행 중" 상태이고 주소는 이미 업데이트되어 있습니다. 이를 통해 기존에 있던 주소 변경과 화면 렌더링 사이의 경쟁 상태를 하나로 통합할 수 있습니다.

canIntercept 확인

모든 이동을 가로챌 수 있는 것은 아닙니다(교차 출처 이동, 다운로드 등). intercept를 호출하기 전에 e.canIntercept를 확인하십시오. 이 방어적 검사는 SPA 이동과 실제 교차 출처 이탈을 구분하는 한 줄짜리 코드입니다.

navigation.navigate 메서드

navigation.navigate(url, options)는 클릭과 동일한 이동을 프로그래밍 방식으로 시작합니다. 반환된 객체에는 committed와 finished 프라미스가 있으므로, 주소 변경이 완료되거나 handler 처리가 완전히 끝날 때까지 기다릴 수 있습니다.

항목 상태와 키

각 이동 항목에는 안정적인 key(새로 고침 후에도 유지됨)와 세션별 id가 있습니다. 영속 상태(저장된 스크롤 위치, 양식 초안)에는 key를 사용하고 일시적인 상태에는 id를 사용하십시오. 히스토리 API에서는 상태가 불투명한 덩어리 하나뿐이었습니다.

뒤로 가기와 앞으로 가기

navigation.back()과 navigation.forward()는 traverseTo를 감싼 편의 래퍼입니다. 동일한 커밋 완료 및 처리 완료 프라미스 쌍을 반환하므로, 후속 작업을 하기 전에 뒤로 이동이 끝날 때까지 기다릴 수 있습니다.

페이지 이동 중단

첫 번째 링크가 아직 렌더링 중일 때 사용자가 두 번째 링크를 클릭하면 진행 중인 페이지 이동을 중단할 수 있습니다. 처리기는 e.signal을 통해 AbortSignal을 받습니다. 이를 가져오기 호출에 전달하면 새 페이지 이동이 시작될 때 더 이상 유효하지 않은 작업이 취소됩니다.

e.intercept({
  handler: async () => {
    const data = await fetch(url, { signal: e.signal });
    renderPage(await data.json());
  }
});

왜 기록 기능만 사용하지 않나요?

기록 기능은 작동하지만 다루기 불편합니다. 상태 변경과 화면 렌더링이 분리되어 있고, 클릭 처리를 직접 해야 하며, 여러 리스너의 조정은 취약하고, 스크롤 복원도 불완전합니다. 탐색 인터페이스는 처음부터 SPA의 요구 사항을 충족하도록 설계되어 이러한 문제를 모두 해결합니다.

브라우저 지원

Chrome과 Edge는 탐색 인터페이스를 지원합니다. Safari와 Firefox는 아직 지원이 늦습니다(2026년 초 기준). 기능을 감지하는 코드를 배포하고("navigation" in window), 사용할 수 없을 때는 기록 기능과 상태 변경 이벤트를 사용하는 대체 방식으로 전환하십시오. SvelteKit 및 TanStack 라우터와 같은 프레임워크는 이미 이러한 감지를 감싸서 제공합니다.

도입 시점

Chromium을 우선 지원하는 대상을 위한 새 프로젝트라면 지금 도입하고 기록 기능 대체 방식을 수용하십시오. 폭넓은 사용자를 대상으로 하는 공개 사이트라면 Safari와 Firefox가 지원할 때까지 기다리거나, 두 방식을 추상화하는 라우터 라이브러리를 사용하십시오. 더 단순한 인터페이스는 기다릴 가치가 있습니다.

지식 확인

기록 기능의 상태 변경 이벤트와 수동 클릭 가로채기를 조합하는 방식과 비교할 때, 탐색 인터페이스의 페이지 이동 이벤트가 제공하는 가장 큰 장점은 무엇인가요?

요약

탐색 인터페이스는 단일 페이지 이동 이벤트 아래에서 SPA의 페이지 이동을 통합하며, intercept/중단 동작, 안정적인 entry별 키, 비동기 처리기 대기를 제공합니다. 기록 기능+상태 변경 이벤트+클릭 가로채기를 조합한 임시방편을 대체합니다. 현재 Chromium 브라우저에서 지원되며, Safari와 Firefox가 따라올 때까지 여러 브라우저를 대상으로 하는 코드에서는 기능을 감지하고 기록 기능으로 대체하십시오.

자주 묻는 질문

“최신 브라우저의 Navigation API” 강의는 무료인가요?

네 — “최신 브라우저의 Navigation API” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“최신 브라우저의 Navigation API”에서 뭘 배우나요?

Navigation API로 탐색을 가로채고 사용자 지정하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“최신 브라우저의 Navigation API” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기