Ajax의 URL

Ajax기술을 사용했을 때 직면할 수 있는 아쉬운 부분들이 있습니다. 바로 페이지별로 url관리가 되지 않아 사용자는 자신이 보고 있는 페이지 정보를 다른 사람에게 공유할 수 없다는 점입니다.

이 부분을 보완할 수 있는 방법들에 대해 살펴보도록 하겠습니다.

1. Hash

어떠한 페이지에서 특정부분에 url을 통해 접근 하고 싶은 경우 Hash 기능을 사용할 수 있습니다. 식별하고 싶은 값에 id값을 준 후 주소의 뒷부분에 /#id값을 주는 경우 지정한 특정부분으로 이동을 할 수 있습니다.

<a href="#three">three</a>

<p id="three">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</p>

해시뱅

#(hash)은 북마크 기능이기 때문에 용도를 구분하기 위해 관습적으로 !(bang)을 붙여 href="#!three"(해시뱅)으로 사용합니다.

이렇게 hash기능을 이용해 어떠한 페이지의 특정부분의 url을 복사해 다른 사람에게 공유를 할 수 있고, 특정페이지로 초기렌더링을 할 수도 있습니다.

페이지의 hash정보 알아내기

window.location.hash를 통해 페이지의 hash정보를 알아낼 수 있습니다.

console.log(window.location.hash)

문제점

하지만 해시뱅 스타일의 웹 주소는 웹 주소체계를 복잡하게 만들 뿐만 아니라 실제로는 존재하지 않은 웹주소라는 점에서 아쉬운 부분이 있습니다. 따라서 해시뱅보다는 이러한 아쉬운 부분을 보완한 pjax방식을 이용합니다.