해쉬뱅(HashBang)

  1. 정의
    • URL의 중간에 있는 #!을 해쉬뱅이라고 한다.
  2. 배경
    • 싱글 페이지 웹애플리케이션 구현에 사용되며, ajax의 한계를 극복하기 위해 도입된 과도기적 기술이다. (뒤로 가기 버튼 불가, 검색 문제 등)
  3. 원리
    • location.hash를 이용해서, URL의 #(hash) 뒤에 붙는 값을 이용해 ajax 처리를 한다.
      뒤로 가기 처리를 할 수 있고, 페이지 갱신없이 URL을 변경한다.
  4. 문제점
    • “자바스크립트에 과도하게 의존”
      자바스크립트가 동작하지 않으면 사이트 전체가 동작하지 않는다.
    • “웹 크롤링 문제”
      크롤러는 해시뱅으로 만들어진 사이트의 컨텐츠를 가져가지 않는다.
      자바스크립트를 실행시키지 않기 때문이다.
    • 캐시를 제대로 할 수 없게 된다.
  5. 결론
    • 웹의 근본에 어긋나기 때문에 현재는 잘 사용되지 않는다.
    • pjax가 대안 기술로 사용된다.

Pjax

  1. 소개
    • pushState + ajax의 합성어.
      pushState를 이용한 ajax 처리방식. jQuery 라이브러리로 제공되고 있다.
    • pushState는 HTML5에서 추가된 메소드이다.
      브라우저의 history를 조작할 수 있고, 뒤로/앞으로 가기 버튼을 이용할 수 있다.
    • IE9 이하 버전에서는 지원하지 않는다.
      (일반적인 페이지 이동이 발생하며 URL이 전환된다)
    • https://github.com/defunkt/jquery-pjax

  2. 기본 원리
    * 특정 셀렉터(앵커태그)에 pjax를 바인딩한다.
    * 해당 링크가 클릭되었을 때 타겟 주소에 대해서 서버에 요청한다.
    * 서버로부터 받아와서 바꿀 부분의 DOM을 수정한다.
    * pushState를 사용하여 브라우저의 주소를 변경한다.

  3. 결론
    Pjax는 Ajax의 한계를 거의 완전하게 보완한다. 현재 비동기 통신기술의 대안으로 널리 사용되고 있다.

더 공부할 것들

  • pjax 실습하며 익히기
  • pushState 구체적으로 알아보기

참고자료

“해시뱅(#!)에 대해서…” - Outsider’s Dev Story
“AJAX 와 HASHBANG 그리고 PJAX” - RKJUN’S BLOG
github.com/defunkt/jquery-pjax