!# 해쉬뱅 알아보기

hash bang, 해시뱅 이라는 개념이 있습니다.

트위터의 url에 #!이 들어간걸로 유명해졌는데 지금은 트위터에서는 사용하고 있지 않습니다.

작동원리 라고 하면

www.aaa.com/#!/bbb

이라는 url이 있다면

#!/bbb를 브라우저가 저장하고 있다가 서버에게 받은 HTML 구조의 name 값을 찾아가는 원리입니다.

단일 싱글 페이지를 작성하는데 유용하며, 앵커 기능을 활용한 것입니다.

이 해시뱅은 url의 변경없이 

단일 페이지에서 페이지를 이동한 것 같은 효과를 내기위해 사용되었습니다.

#뒤의 부분을

fragment identifier

라고 부릅니다.

장, 단점을 설명합니다.

장점	단점
- 애플리케이션의 상태 공유, 북마크, 검색엔진 색인 - HTML5의 표준성을 활용 할 수 있다. - 향상된 속도	- 스크립트 에러에 취약 - 광고에 붙어 있는 스크립트가 위험 - 크롤러에 탐색되지 않음

[ 웹 응용 프로그램의 URL은 웹 사이트의 자산이며, 이 기능은 클래스의 고유 기능입니다.

애플리케이션의 상태 공유, 북마크, 검색 엔진 색인 등의 이점을 누립니다.

단점도 있는데, 앱과 사이트가 동시에 될 수 없습니다. 이게 무엇을 의미하는가 하면

자바스크립트가 없는 브라우저는 URL 해시를 사용하여 공유된 컨텐츠에 접근할 수 없습니다.

웹페이지가 아니라 앱이기 때문입니다.

HTML5의 입장에서 보자면 더 좋은 점이 있습니다.

페이지를 새로고침 없이 URL경로와 쿼리 문자열을 바꿀 수 있는 것입니다.

이를 이용해 해시를 삭제하고 웹사이트의 이점을 얻을 수 있습니다.

해시뱅은 완벽하지는 않지만 유용합니다.

사용자는 향상된 속도의 이점을 얻을 수 있고 표준화 되면 

HTML5의 좋은 점에 합류 할 수 있습니다.

- 이상, http://www.adequatelygood.com/Thoughts-on-the-Hashbang.html 번역 ]

단점이라면

자바스크립트 소스에 문제가 생기거나 로드가 안될 경우 문제가 생깁니다.

광고에 자바스크립트가 붙어 있는 경우

그 광고의 스크립트에 의해 페이지가 악영향을 받을 수도 있습니다.

뿐만 아니라 스크립트에서 사소한 문법오류가 났을 경우 전체 페이지에

악영향을 미칩니다.

크롤러(검색엔진, 사이트의 내용을 탐색하는 봇)가 해시뱅으로 이루어진 사이트의

컨텐츠를 가져갈 수 없습니다. 구글 정도가 추가적인 조치를 통해서 제한적으로

크롤러가 작동하도록 했습니다. 또한 캐시 사용도 비슷한 맥락입니다.

해시뱅에 대해 긍정적인 입장도 있고 부정적인 입장도 있지만

부정적인 입장이 조금더 많이 있습니다.

그러면 대안은 무엇인가, 로 귀결되는데

pushState와 ajax를 결합시킨 pjax를 소개해드리겠습니다.

pjax 는 pushState 를 이용한 ajax 처리방식으로 jQuery 라이브러리로 제공되고 있고,

github 의 창립자이자, CEO 인 defunkt (Chris Wanstrath) 가 개발했습니다. 

pushState 를 지원하는 브라우저에서는 pushState 를 사용해서 동작하고, 

pushState 비지원 브라우저(IE9 이하) 에서는 지원하지 않는 대로 일반적인 페이지 이동형태로 처리가 이루어지기 때문에 

URL 은 동일하게 전환하게 됩니다.

<a href=’/explore’ class=’js-pjax’>Explore</a>

$(‘.js-pjax’).pjax(‘#main’);

의 간단한 형태로 사용하게 됩니다.

$.pjax의 형태에 .click .reload 등의 api 들과

각종 event들이 jqeury의 ajax처럼 준비되어 있습니다.

앞으로의 비동기 통신기술의 대안으로 여겨지고 있습니다.