HashBang(해시뱅)

 

- 해시뱅이란?

말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용하는 것으로 해시뱅을 사용하게 되면

페이지의 갱신없이 URL변경을 할 수 있습니다.

트위터의 URL에 들어가게 되면서 유명해졌는데 현재 트위터에서는 사용하고 있지 않습니다.

 

예를 들면

ex) http://javascriptHi.com/#home

이런식으로 사용을 하며 해시뱅의 # 뒤에 붙는 부분은 fragment identifier라고 부릅니다.

즉, 해시뱅은 웹 주소창에 URL과 해시뒤에 원하는 fargment identifier를 붙이게 되면 단일 페이지로 제작 된 홈페이지에서 페이지가 갱신되어 다른페이지로 넘어가는 것 처럼 보이게 합니다.

또한 ajax를 이용했을 경우 화면이 변경되도 히스토리 관리가 안되기 때문에 URL이 변경되지 않아 뒤로가기나 앞으로가기가 되지않는데 이 또한 해시뱅을 이용하면 ajax를 사용하더라도 구현이 가능하게 됩니다.

 

 

- 해시뱅이 동작하는 방법

해시뱅은 HTML 앵커기능을 이용한 방법으로 앵커와 같은 동작을 하게 됩니다.

HTML의 앵커(네임앵커)는 특정위치를 태그안에 name속성으로 지정하고

a태그를 통해서 href를 name속성에 적은 값으로 지정을 하면 원하는 위치로 이동을 하게 됩니다.

이것과 마찬가지로 hash라는 속성으로 값을 지정해 놓고 그 값을 찾아서 이동을 하게 되는 방식으로

로컬에 fragment identifier를 저장하고 fragment identifier를 파싱하여 지정한 값에 대한 정보를 서버에 요청하는 방식입니다.

 

 

- 자바스크립트에서의 해시뱅 구현방법

해시뱅을 구현하는 방법은 location.hash를 사용하는 방법입니다.

저는 카테고리 선택 시 화면의 일부분만 바뀌도록 ajax를 사용하였는데요. 그러다 보니 URL변경이 없어서 location.hash를 사용한 상황입니다.

선택한 카테고리의 메뉴번호(menuNum)을 DB에 넘겨 화면에 보여줄 게시물 리스트들을 받아옵니다.

그러면서 document.location.hash를 사용하여 #뒤에 붙을 fragment identifier를 작성해 줍니다.

적용을 하게 되면

실제 URL창에 작성한 값들이 나타나게 됩니다.

 

이제 해시뱅을 구현했으니 뒤로가기를 구현해보겠습니다.

뒤로가기는 jquery 이벤트인 hashchange로 구현하였습니다.

location.hash를 이용하여 지금 현재 받아오는 URL의 hash값을 받아오게 합니다.

만약 hash값이 #home이면 메인페이지로 넘어가고 hash값이 menuNum/301이면 301번 게시글로

cateNum/11이면 11번 카테고리로 넘어가게끔 작성했습니다.

이렇게 작성을 하게 되면 뒤로가기로 눌렀을 시 로컬에 hash가 저장되어있기 때문에 URL로 호출이 되면 자동으로 지정한 곳으로 넘어가게 됩니다.

 

정리를 하면 해시뱅은

- 장점

• ajax를 사용할 시 뒤로가기등 url변경이 가능하다.

- 단점

• 해시뱅은 웹의 기본에 위배가 되는 사항이고 자바스크립트의 function이 오류가 난다면 웹사이트의 모든 동작들이 멈추게 된다