Essepage에서 현재 페이지 URL 가져오기 🌐✨

🖥 Essepage.basePath, Essepage.pagePath

Essepage에는 Essepage라는 전역 객체가 있습니다.

이 객체의 basePath와 pagePath 속성을 활용하면 현재 페이지의 URL을 간편하게 가져올 수 있습니다! 😎

🤔 basePath 또는 pagePath를 사용한 이유?

보통 JavaScript에서 현재 페이지의 URL을 가져올 때는 window.location.href를 사용하죠.
하지만 React, Svelte 같은 CSR(Client-Side Rendering) 기반 프레임워크에서는 페이지 이동 시 window.location.href가 올바른 값을 반환하지 않는 경우가 많습니다.😅

그래서 각각의 프레임워크에서는 이런 방법을 사용합니다.

✅ React → react-router-dom의 useLocation 훅 사용
✅ Svelte → SvelteKit의 $page store 활용

Essepage로 만든 웹페이지는 초기 로딩 시에는 SSR(Server-Side Rendering) 방식으로, 이후부터는 CSR(Client-Side Rendering) 방식으로 동작합니다.

따라서 window.location.href보다 Essepage의 basePath와 pagePath 를 사용하는 것이 더 정확하고 안정적입니다. 😇

✨ 내가 주로 사용하는 코드

현재 페이지의 URL을 가져올 때 저는 이렇게 사용합니다.

const currentUrl = Essepage.basePath + '/' + Essepage.pagePath;
console.log(currentUrl);

간단하죠?😆 이렇게 하면 어떤 페이지에서든 정확한 URL을 가져올 수 있습니다!

💡 마무리

Essepage 객체 안에는 유용한 속성이 많으니, 꼭 한 번 살펴보시길 추천드립니다! 저처럼 basePath와 pagePath를 활용하는 것도 좋지만, 여러 가지 방법을 찾아보면서 더 스마트한 코드를 만들어보세요~🚀✨

Essepage 전역 객체와 함께 더 편리하고 빠른 웹 개발을 즐겨보세요! 😁💻