HashBang

오늘은 HashBang(해쉬뱅)에 대해 작성해보겠습니다.

 

해시뱅은 #(hash) + !(bang) 인데요.

해시뱅을 사용하는 이슈는 SPA(Single Page Application)으로 웹 어플리케이션을 구성하기 위해서입니다.

전체 페이지를 로딩하는 대신에 페이지 하나만 두고 자바스크립트만으로 모든 메뉴를 다루는 것입니다.

이를 구현하기 위해선 URL변경 없이 구현해야하는데, 이를 위해 해시뱅을 사용합니다.

# 뒤에 붙은 부분을 fragment identifier 라고 부릅니다.

정확하게 사용하기 위해서 아래 작동 원리를 살펴보겠습니다.

 

작동 원리

1) 사용자가 https://127.0.0.1/#!/device 요청

2) 브라우저가 # 뒤의 !/device를 로컬에 저장 후 https://127.0.0.1 서버를 호출합니다.

3) 서버는 해당 페이지의 html을 대량의 자바스크립트 링크와 같이 사용자에게 리턴합니다.

4) 브라우저가 자바스크립트를 실행시키고 저장해뒀던 /device를 파싱해서 device 에 대한 데이터를 서버에 요청합니다.

5) 서버에서 받은 데이터를 배치합니다.