Routing

라우팅이란?

요청한 경로(URL)에 따라 다른 페이지(컴포넌트)를 렌더링하는 것을 의미한다.

SPA Routing

지정된 URL에 따라 보여줄 컴포넌트를 결정하는 프로세스

SPA(Single Page Application)는 초기에 서버에서 페이지(HTML)를 받아오고, 이후에 브라우저의 History API를 이용하여 URL을 수동으로 변경하면서 해당 URL에 매칭되는 컴포넌트를 렌더링한다.

이를 통해 페이지 전환 없이 URL에 따라 컴포넌트를 동적으로 렌더링 시킬 수 있다.

Web APIs

브라우저에서 제공하는 API로, 자바스크립트를 사용하여 브라우저의 다양한 기능에 접근할 수 있는 인터페이스를 제공한다. (DOM 제어, 브라우저 탐색 기록, 사용자 위치정보, URL 정보 등)

Window.history

브라우저의 탐색 기록을 조작할 수 있는 API

주소 표시줄, 뒤로가기, 앞으로가기 버튼 등 관련된 이벤트를 제어한다.

Methods

Methods
Arguments
Explain

.pushState(state, title, url)

  • state → 새로운 History 항목에 연결할 상태 객체, 값이 변경될 때마다 popstate 이벤트 호출

  • title → 아직 쓰이지 않는 기능, 미래를 위해 "" 라도 설정하라고 권고한다.

  • url → 이동할 URL, 실제로 브라우저는 pushState 후에 해당 URL로 탐색하지 않음, 즉 url만 수정

  • 브라우저의 세션 History Stack에 상태를 추가

  • 해당 URL로 이동

.replaceState(state, title, url)

  • 현재 History를 수정하고 인자로 전달된 값으로 대체

  • 해당 URL로 이동.

.back()

  • 이전 페이지로 이동

.forward()

  • 다음 페이지로 이동

.go(num)

  • num → 상대적인 page index

  • 지정한 페이지만큼 이동

popstate event

  • 사용자가 뒤/앞으로 가기 버튼을 클릭하거나, 브라우저의 세션 기록을 조작하면 호출된다.

  • popstate 이벤트가 호출되면 이를 이용해서, 컴포넌트를 동적으로 업데이트 시킨다.

const routes = {
  '/': homePage,
  '/dashboard': dashboardPage,
  '/order': orderPage,
};

window.onpopstate = () => {
  root.innerHTML = routes[window.location.pathname];
}

Window.location

현재 페이지의 주소(URL)에 대한 정보와 새로고침, 리다이렉션 메서드를 갖고 있는 객체

window.location은 현재 페이지의 위치 정보를 갖는 객체를 반환한다.

해당 객체는 브라우저의 전역 변수로 다양한 방법으로 접근 할 수 있다.

  • window.location

  • window.document.location

  • document.location

  • location

Properties

origin을 제외한 프로퍼티는 변경가능하다.

property가 변경되면 페이지 이동이 일어난다.

URL: https://devload.com/routing?filter=routing#window.location

window.location Property
Explain

.origin

  • Base URL에 대한 정보

  • protocol + host name + port number

  • https;//devload.com

.protocol

  • 프토토콜 (http:, https:)

  • https:

.host

  • 호스트 명 (도메인 명 + 포트 번호)

  • devload.com

.hostname

  • 도메인 명

  • devload.com

.port

  • 포트 번호

  • ''

.pathname

  • / 다음에 오는 경로

  • /routing

.search

  • ? 다음에 오는 query string

  • ?filter-routing

.hash

  • # 뒤에 오는 Fragment Ideintifier

  • #window.location

.href

  • URL 전체 값

  • https://devload.com/routing?filter=routing#window.location

Query String이란 브라우저에서 서버에게 추가적인 정보를 제공하기 위해(주로 GET 요청) 사용하는 문자열로 ? 뒤에 key:value 쌍으로 구분지어 나열한다.

Fragment Identifier란 URI 내에서 특정 리소스 조각을 가리키는 식별자이다. HTML 내에서 특정 부분을 가리킬 때 사용됨

Methods

Methods

.assign()

  • 지정된 URL로 이동 한다

.replace()

  • 지정된 URL로 이동 한다

  • 현재 페이지를 탐색 기록에서 지운다

.reload()

  • 현재 페이지를 새로고침

.toString()

  • URL 반환

  • window.location.href<readonly>

PreviousWeek 7NextRoutes

Last updated