TIL - Day16

정태호·2023년 6월 22일

JavaScript TIL 데브코스

TIL

목록 보기

11/23

history api

브라우저에서 페이징 로딩을 하면, 세션 히스토리를 갖는다.

세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기나 앞으로 가기 등의 이동을 할 수 있다.

자바스크립트는 싱글 페이지인데?

pushState, replaceState 함수를 이용해 화면 이동 없이 현재 url을 업데이트 할 수 있다!!
그렇기 때문에 실제 페이지 이동없이 페이지를 다시 그릴 수 있다..

특징

hashbang으로 했던 url을 아래처럼 바꿔줄 수 있다.
- / -> HomePage
- /list -> ListPage
- /last/1 -> LastPage
일반 url 형식을 따르기 때문에 queryString도 자유롭게 붙일 수 있다.

hashbang 이란?
queryString 이란?

queryString

사용자가 입력 데이터를 전달하는 방법 중 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 의미한다.
http://host:port/path?queryString
qureyparameters를 url 뒤에 덧붙여서 추가적인 정보를 서버에 전달한다. (? 뒷 부분에)
- 클라이언트가 어떤 특정 리소스에 접근하고 싶은지의 정보를 담는다!

history.pushState

history.pushState(state, title, url)

state : history.state에서 꺼내쓸 수 있는 값
title : 대부분의 브라우저에서 지원하지 않아 null이나 빈 스트링 값을 넣는다!
url : 세션 히스토리에 새로 넣을 url (가장 중요)
- url이 변경된다고 해서 화면이 리로드 되진 않는다!

history.replaceState

history.replaceState(state, title, url)

state : history.state에서 꺼내쓸 수 있는 값
title : 대부분의 브라우저에서 지원하지 않아 null이나 빈 스트링 값을 넣는다!
url : 세션 히스토리에 새로 넣을 url (가장 중요)
- url이 변경된다고 해서 화면이 리로드 되진 않는다!

차이점이 없는데?

게시물 작성을 예로 들면 작성을 다한 후 history.pushState는 작성이 끝난 페이지로 이동시킬 것이다. 이 때 이전버튼을 누르다면 다시 작성페이지로 돌아가 재작성 해야한다.. 하지만 history.replaceState는 작성된 페이지의 url로 대체해버리기 때문에 작성하는 페이지로 돌아가지 않는다!!
ex) 뒤로가기로 이동이 불가능 하도록 처리할 때 사용 (replace)

실습

브라우저 콘솔에 history 찍어보기

length : 쌓여있는 history의 갯수
scrollRestoration : 뒤로 가기 했을 때 이전에 있던 스크롤로 돌아갈 것이냐!

위 그림에서 pushState를 통해 url이 바뀐 걸 볼 수 있다!
history의 length 또한 1 증가하였다.
location.href = '/product/1'를 사용하면 이 url로 이동을 해버리기 때문에 콘솔 입력이 날아간다... (! 주의)

product1, 2, 3을 넣고 뒤로 가기 앞으로 가기 등을 해본 결과 history length 자체에는 변화가 없지만 자유롭게 뒤로 가기, 앞으로 가기가 가능했다 😀

product4를 push로 product/new를 replace로 생성하고 뒤로가기를 눌러보았는데 바로 이전인 product4로 돌아가는게 아니라 그 전인 3으로 돌아갔다! history의 length에도 replace로 생성한 new가 반영되지 않았다. (4를 new로 대체..?) 로그인이나 장바구니? 같은 페이지를 구축할 때 매우 유용할 것 같다!!

pushstate로 url 변경 후 새로고침 하면 404 Error?

history api로 url을 변경한 후 새로고침 하면 변경된 url의 실제 파일을 찾으려고 하기 때문에 404 에러가 난다.
404 에러가 났을 경우 root의 예:index.html로 요청을 돌려주는 처리가 필요하다.
npx serve -s

function Route(){ // 1번 조건
	const {pathname} = location
	const $container = document.querySelector('#container')

	if(pathname === '/'){
 		$container.innerHTML = '<h1>Home</h1>'
        }else if(pathname === '/product-list'){
        	$container.innerHTML = '<h1>상품 목록</h1>'
        }else if(pathname === '/article-list'){
            $container.innerHTML = '<h1>게시글 목록</h1>'
        }
    }

    Route();

    window.addEventListener('click', e => {
     	if(e.target.className === "linkItem"){ // 2번 조건
        	e.preventDefault()
                
            const {href} = e.target //http://127.0.0.1:5500/product-list
            const path = href.replace(window.location.origin, '') /// product-list 앞에 url을 짤라버림
                
            history.pushState(null, null, path) //이동 없이 url이 바뀐다.
            Route()
        }
    })
	// 3번 조건
    window.addEventListener('popstate', Route) //이전이나 다음버튼을 눌렀을 때 멈춰있지 않고 Route에 따라 변하도록 설정