Routing
라우팅이란?
요청한 경로(URL)에 따라 다른 페이지(컴포넌트)를 렌더링하는 것을 의미한다.
SPA Routing
지정된 URL에 따라 보여줄 컴포넌트를 결정하는 프로세스
SPA(Single Page Application)는 초기에 서버에서 페이지(HTML)를 받아오고, 이후에 브라우저의 History API
를 이용하여 URL을 수동으로 변경하면서 해당 URL에 매칭되는 컴포넌트를 렌더링한다.
이를 통해 페이지 전환 없이 URL에 따라 컴포넌트를 동적으로 렌더링 시킬 수 있다.
Web APIs

브라우저에서 제공하는 API로, 자바스크립트를 사용하여 브라우저의 다양한 기능에 접근할 수 있는 인터페이스를 제공한다. (DOM 제어, 브라우저 탐색 기록, 사용자 위치정보, URL 정보 등)
Window.history
브라우저의 탐색 기록을 조작할 수 있는 API
주소 표시줄, 뒤로가기, 앞으로가기 버튼 등 관련된 이벤트를 제어한다.
Methods
.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
지정한 페이지만큼 이동
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
.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
Methods
.assign()
지정된 URL로 이동 한다
.replace()
지정된 URL로 이동 한다
현재 페이지를 탐색 기록에서 지운다
.reload()
현재 페이지를 새로고침
.toString()
URL 반환
window.location.href<readonly>
Last updated