[펌] URL에 사용되는 특수문자 #!

---

 * 출처

 : http://mkseo.pe.kr/blog/?p=2269

 : https://okky.kr/article/295289

---

요즘 몇몇 웹사이트들이 다음과 같은 URL패턴을 사용하기 시작했습니다.
http://twitter.com/#!/search/twitter

혹 모르고 지나가고 계신분들을 위해 이 URL에 있는 #!의 의미를 설명드릴까 합니다.

1) #
#은 브라우저가 리로딩 없이 자바스크립트를 불러오기위한 방법입니다. 동시에 URL을 브라우저 히스토리에 남깁니다. 예를들어, http://twitter.com/# 을 방문한다음 http://twitter.com/#!/search/twitter 링크를 클릭하면 이 URL은 (#이 있으므로) 서버로 요청이 전송되지 않습니다. 그러나 URL이 이렇게 change되면 url change에 따른 이벤트 핸들러 자바스크립트를 호출 할 수 있습니다. (예를들어 http://benalman.com/projects/jquery-hashchange-plugin/ 같은 플러그인 사용) 그리고 그 이벤트 핸들러가 AJAX로 요청을 처리하게 합니다.

이렇게 한번 돌아가는게 좋은점은 브라우저의 REFRESH가 없으면서도, URL이 각 동작마다 바뀌고, 그 URL이 브라우저 히스토리에 남는다는 겁니다. 그래서 손쉽게 브라우저의 앞으로, 뒤로를 클릭할 수 있도록 만들어주는 것이죠.

(아시는 분은 아시겠지만 브라우저 BACK/FORWARD가 먹히도록 히스토리에 URL을 남기는 AJAX를 만들어보자는 노력은 5년도 더 전부터 해왔던 것입니다..)

2) #!
문제는 # 은 본래 서버에 요청을 보내는 형태의 URL이 아니기때문에 크롤러가 그 URL을 아무리 서버로 보내봤자 정상적으로 데이터를 크롤할 수 없다는 것입니다. 그리고 이걸 해결하기위한 기법이 바로 #! 이죠.

http://code.google.com/web/ajaxcrawling/docs/getting-started.html를 보시면 알 수 있듯이, 앞서 예의 http://twitter.com/#!/search/twitter는 http://twitter.com/?/search/twitter와 같은 컨텐츠라는 것을 선언하는 의미입니다. 그리고 ? 가 들어간 URL은 아무 문제 없이 서버가 응답을 하게 되고, 따라서 크롤러는 아무 문제 없이 해당 URL을 크롤할 수 있게 되는것이죠.

정리하면,
1) AJAX에서 브라우저 BACK/FORWARD 버튼이 먹게하고,
2) 크롤러에 친절한 웹사이트를 만들기 위해서 만들어진 패턴입니다.

---

해시태그는 원래 책갈피(Anchor) 용도로 사용되었고, 특정 태그 ID 요소로 페이지가 자동 이동되는 역할을 수행합니다.
지금도 그렇게 지원하고 있지요.

예를 들어 <div id="overhere">내용</div> 이 있다고 했을 때, <a href="#overhere">내용으로 이동</a> 태그를 만들어 생성된 링크를 클릭하면, 내용이라고 써있는 곳으로 페이지 이동 없이 화면이로 이동하는 역할을 수행합니다.

이 해시태그의 특징은 클라이언트에만 표시되고 서버에 주소를 전달할 때 해시태그는 빼고 전달됩니다.

즉, 해시태그는 님만 볼 수 있다는 거죠.

이를 이용해 특정 클라이언트에게 해시태그 내용에 따라 자바스크립트를 통해 인식해서 특정 컨텐츠를 제공하고, 해당 링크를 공유하여 다른 사용자도 해시 태그에 따른 컨텐츠를 페이지 이동 없이 제공할 수 있는 용도로 쓸 수 있는 이점이 있습니다.

이게 가능한 이유가 바로 Ajax 기술이고, 현재 History API로 해시태그 없이, 페이지 이동 없이 컨텐츠를 동적으로 제공하고, 해시태그를 다시 책갈피 용도로 되돌리려 하지만, 아직 지원하지 않는 브라우저 (특히 IE ㅅㅂ)를 위해서 해시태그를 통해 페이지 이동 없이 새로운 컨텐츠를 제공할 수 있습니다.