230809(수)

🚤 성장일지 6.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!
🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기!
🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기.

• 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자!
• 🍉 (6.2)<수정> 일지 카테고리 수정 변경!(경험 -> 고민 -> 회고 -> 교훈)

☀️ 오늘의 경험

pushState()와 popstate 이벤트

정말 단순하게 생각하면 history.pushState()는 어떤 상태와 함께 url을 변경하고 history stack에 새로운 상태를 추가하는 것이고, popstate 이벤트는 history stack에서 상태가 pop되었을 때 발생하는 이벤트이다.(뒤로가기, 앞으로가기 등) 이 둘을 잘 활용하면 SPA에서 브라우저의 뒤로가기, 앞으로가기를 구현할 수 있다. 말그대로 서버에 요청없이 JS 코드로만 브라우저의 라우팅을 제어할 수 있다.

🫧 오늘의 고민

history stack에서 빠져나간 state를 참조할 수는 없을까?

이 부분에 대해서 궁금하여 속해있는 디스코드에 올린 질문을 그대로 남긴다.

---

history.pushState()를 통해 history stack에 객체를 하나 집어넣은 뒤에, 뒤로가기를 했을 때(popstate 했을 때), pop되는 history 객체(위에서 집어넣었던)를 참조할 수 있는 방법이 없나요?

정말 단순한 예시를 들어보면

// popstate에 대한 리스너 등록 window.addEventListener(‘popstate’, (event) => { console.log(event); });

// pushState로 { number: 123 }이라는 state를 넘기면서 path는 /sinabro로 변경 history.pushState({ number: 123 }, ”, ‘sinabro’);

위의 코드를 호출하고 나서, 뒤로가기를 하게 되면 브라우저의 콘솔 창에 event 객체가 출력이 되는데, 저는 단순하게 popstate에 대한 event 객체이기 때문에 이 안에 이전에 push 했던 state, 즉 { number: 123 }이 들어있을 거라 생각했거든요..! 근데 이 때 event 객체는 지금 뒤로가기로 해서 보여지는 state를 참조하는 것 같더라구요..! 이 때, 이전에 push했던 state를 참조할 방법이 있을까요?

(추가) 생각해보면 페이지 이동 후에, 뒤로가기를 하고나서 이동했었던 페이지에서의 상태를 굳이 가져올 필요가 있나..? 싶기는 하네요..! 그럼에도 궁금해서 질문드립니다!

감사합니다. :)!

---

일단 결론과 답변은 참조할 수 없다는 것이다. 다만 몇몇 라이브러리가 monkey patching을 통해 이를 구현하고 있다고 한다.

monkey patching: 런타임에 동적으로 코드를 수정하는 기법

생각해보면 1, 2 페이지가 있다고 할 때 1에서 2로 state를 push 해놓고서는 2에서 1로 갈 때 다시 그 state를 2를 통해서 참조할 필요가 없다. 어차피 1에서 2로 갈 때 넘겨준 state니까..! 이렇게 간단한 문제였다니… 그래도 이제는 서버 사이드 라우팅과 클라이언트 사이드 라우팅이 어떻게 구분되고 어떻게 다르게 동작하는지 알 것 같다.

🌈 오늘의 회고

그래도 나름 이력서가 완성되어간다. 프로젝트 좀더 정리하고 자잘한 내용들 추가보충한 뒤에 피드백 받으면서 수정해나가면 될 것 같다. 그러면서 계속 회사에 지원해보도록 해야지! 말할 필요도 없지만, 너무 잘하고 있다!

🐾 오늘의 교훈

그냥 내가 가는 길을 묵묵히 잘 나아가면 모든 게 다 피가 되고 살이 된다.

🪵 참고

• MDN window location
• MDN history api