💻 history

이 글은 history 대해서 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다

📃 오늘 공부한 것

history

history는 브라우저의 세션 기록! 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 잇는 방법을 제공한다.
히스토리는 브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖는데 세션 히스토리는 페이지를 이동할 떄마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.

pushState

history.pushState(state, title, url)

state
새로운 세션 기록 항목에 연결할 상태 객체

title
지금은 대부분의 브라우저가 title 매개변수를 무시한다.

url
세션 히스토리에 새로 넣을 url입니다. a태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 화면이 리로드 되지 않는다

** state와 title은 보통 null을 넣어서 작업한다.

replaceState

history.replaceState(state, title, url)

state
새로운 세션 기록 항목에 연결할 상태 객체

title
지금은 대부분의 브라우저가 title 매개변수를 무시한다.

url
세션 히스토리에서 현재 url과 대체될 url. a 태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 이 url이 변경된다고 해서 화면이 리로드 되지 않는다

** state와 title은 보통 null을 넣어서 작업한다.

history api 사용 시 기억할 점

1. 현재 location의 pathname으로 어떤 것을 그려야 할지 결정하는 route 로직이 필요하다.
2. 실제로 화면이동은 아니지만 pushstate를 호출 시킬 이벤트 처리
3. 앞으로 가기 또는 뒤로가기 시에 popstate 이벤트를 처리해야한다.

정리

• history를 이용하면 화면 이동을 일으키지 않고도 브라우저의 url을 바꿀 수 있다.
• history api의 url을 변경한 후 새로고침하면, 변경된 url의 실제 파일을 찾으려고 하기 때문에 404에러가 난다. => 404일 경우 root의 index.html로 요청을 돌려주는 처리가 필요

🔥 오늘의 느낀점

history api에 대해서 다루었다. 아무래도 처음 알게 되었기 때문에 좀 낮설었달까..?😂 아 그리고리액트에서 라우터 처리를 어떻게 하는걸까?를 찾아 보면 좋을 것 같다고 하셔서 찾아보았다. React는 대부분 React-Router 라이브러리를 사용해서 라우팅을 해결하는데 라이브러리에서 location이나 history같은 브라우저 내장 api와 완벽하게 연동이 된다고 한다. 이 부분은 다시 자세히 찾아봐야겠다.

과제를 어제 새벽에 4시간동안 기능 한개를 스스로 구현해본 후에는 진도가 팍팍 나갔다.. 😂 기능 하나에 4시간이라니!ㅠㅠ
기업에서 바닐라JS로 과제를 볼 때 3시간 정도 주어지는 걸로 아는데 지금 실력이면 기능 하나 구현하면 끝일거라는 생각이 들었다. 다들 어떻게 그렇게 잘하시는지!! 나도 바닐라JS에 익숙해져야지!

요즘 정말 CSS를 잘 쓰고 싶다. 애니메이션이라던지 반응형이라던지 사용자가 느끼기에도 자연스럽게 연결되도록? 만들고 싶다.
다른 프롱이 분들이 과제 낼 때 이쁘게 꾸며서 제출하시는데 본받아야겠다. 나는 그냥 기본.. 강의..그대론데..ㅠㅠ
더욱 더 열심히 살아야지🔥🔥🔥

🗣 오늘의 TMI

할 것이 너무 많네요~~ 빙글빙글 😵‍💫 앞머리가 요즘 너무 거슬린다,, 괜히 잘랐나봐요😅

Refer

프로그래머스 데브코스
MDN - History

오늘의 내용 정리

데브코스 Day14 history