본문에 들어가기에 앞서, 이 글에서 분석할 소스코드를 먼저 보겠습니다. 아래의 예제 소스코드는 과거 이 블로그에서 실제로 사용되었던 것으로, 메뉴의 각 항목을 선택하는 경우, 실제로 페이지 이동이 발생되지 않으면서, 페이지의 내용만 변경하는 기능을 합니다. 페이지를 완전히 새로 불러오는 것이 아니기 때문에, 이 방법은 속도면에 있어서 매우 큰 장점이 있습니다. 하지만 이 방법으로는 자바스크립트의 결과 값까지 가져오지는 못 하기 때문에 구글 애드센스와 같이 자바스크립트로 만들어진 문서가 있는 경우에는 오류가 발생합니다. 따라서 이 글에서 설명하는 소스코드는 HTML만으로 구성된 페이지를 불러올 때에만 사용해야 합니다.
위의 소스코드를 세 부분으로 나누어 분석해보도록 하겠습니다. 가장 먼저 이 스크립트의 핵심적인 함수인 goToFromHash() 함수에 대한 자세한 설명을 할 것이고, 그 다음으로는 HEAD의 이벤트 부분과 BODY 내용 출력 부분을 설명할 것입니다.
goToFromHash() 함수
이 함수는 사용자가 요청한 앵커(해시태그)를 분석하여, 어떠한 페이지를 불러와야 하는가를 분석할 때 사용됩니다. 이 함수는 앵커(해시태그)가 변경되는 것을 모두 감지하고, 각각의 앵커에 맞는 페이지를 불러오는 기능을 하기 때문에, 위의 예제 소스코드에서 가장 중요한 역할을 담당하고 있다고 보면 됩니다. 예제 소스코드에서는 블로그 홈, 태그 페이지, 글 목록 페이지, 방명록 페이지를 불러오는 기능을 구현하였습니다.
방문자가 해당되는 페이지의 앵커(해시태그)를 웹브라우저에 직접 입력할 수도 있습니다. 그리고 이 예제에는 띄어쓰기와 이중 주소에 대한 처리를 위하여 앵커(해시태그)를 따로 처리하는 스크립트가 포함되어 있습니다.
이중 주소를 처리하기 위하여 위 예제 소스코드에서는 자바스크립트 정규표현식을 활용하였습니다. 이중 주소로 표현할 수 있는 것으로는 태그 페이지, 글 목록 페이지 등이 있습니다. 웹브라우저에 따라 지원여부가 달라지지만 몇몇 웹브라우저에서는 URL에 포함되어 있는 공백을 지원하지 않기 때문에, 위의 예제에서는 띄어쓰기를 %20으로 강제로 변환하여 크롬 이외의 브라우저에서도 잘 작동할 수 있도록 하였습니다.
jQuery를 꼭 필요로 하는 이유는 jQuery의 load() 메소드를 사용하기 때문입니다. jQuery의 load() 메소드는 같은 도메인 내의 다른 페이지의 내용을 불러올 때 사용합니다. 이 메소드는 최근 많이 사용되고 있는 Ajax 기술을 구현할 때 사용되는 가장 대표적인 메소드입니다. 특히 jQuery에서의 load() 메소드는 해당 페이지의 아이디 또는 클래스만 지정하여 해당되는 내용만 불러올 수 있기 때문에 매우 유용합니다. 이 예제에서는 각 페이지의 #content 즉, ID가 content인 부분만 불러오고 있습니다. 이렇게 하면 방문자는 모든 내용을 전부 불러올 필요 없이 content 부분만 불러오면 되기 때문에 더 신속하게 블로그나 사이트를 검색할 수 있게 됩니다.
HEAD 이벤트 부분
위의 예제에서는 총 두 개의 이벤트가 사용되었습니다. 하나는 웹브라우저의 앵커(해시태그)가 변경되었을 때 발생되는 해시체인지 이벤트이고, 다른 하나는 윈도우가 모두 로드되었을 때 발생되는 윈도우 로딩 이벤트입니다. 웹브라우저의 앵커는 #으로 표현되는데 # 이하의 내용이 변경되는 경우 자바스크립트의 해시체인지 이벤트가 발생됩니다. 그리고 윈도우가 모두 로드되었을 때에는 window.load() 이벤트가 발생됩니다. 윈도우가 모두 로드된 후 위의 스크립트를 실행하는 이유는 해시체인지에 의하여 변경되는 HTML DOM 요소는 content를 아이디로 가지는 DIV 태그 부분인데, 이부분을 수정하기 위해서는 모든 웹페이지가 로드되어 있어야 하기 때문입니다. 따라서 웹페이지가 모두 로드된 후에 이 스크립트가 실행되어야 하는 것입니다.
jQuery에서 이벤트를 감지하기 위한 메소드로는 on()이 있습니다. jQuery.on([이벤트명], 함수)와 같은 방법으로 사용하며, 위의 예제 소스코드에서 필요로 하는 해시체인지 이벤트와 윈도우 로드 이벤트의 이벤트명은 각각 hashchange와 load입니다. 통제하길 원하는 이벤트가 있다면 jQuery.on() 메소드의 첫 번째 매개변수에 적당한 이벤트명을 넣은 후 두 번째 매개변수에는 함수명을 넣든지 직접 함수를 정의하면 됩니다. 위 예제에서는 직접 함수를 정의하는 방법을 사용하였습니다. 직접 함수를 정의하는 방법은 일반적으로 가(짜)함수를 사용한다고 말합니다.
BODY 부분
HTML의 BODY 내부에는 모두가 알고 있듯이 홈페이지의 내용이 들어갑니다. 이 예제에서는 BODY 내부에 간단하게 몇 개의 링크와 방문자가 요청한 내용이 표시되는 구역인 DIV 태그를 넣었습니다. 각각의 링크는 앵커 해시태그(#)로 이루어졌기 때문에 HEAD 부분의 스크립트 부분이 없다면 눌렀을 때 아무런 반응도 나타나지 않을 것입니다.ID가 content인 DIV 태그는 jQuery.load()에 의해서 사용자가 요청한 페이지의 내용이 들어가는 영역입니다. 방문자가 링크의 클릭을 통하여 앵커 해시태그를 변경하면 이 DIV의 내용이 바뀌게 됩니다.
※ 위의 예제 소스코드를 적용한 실제 페이지입니다. 이 글에서 소개하는 소스코드가 어떻게 작동되는지 직접 체험할 수 있습니다.
마무리
지금까지 jQuery와 자바스크립트, 해시 체인지 이벤트를 활용하여 동적으로 페이지를 불러오는 방법에 대해서 알아보았습니다. Ajax 라는 동적 서버 네트워크 기술이 발전하면서, 이 글에서 설명한 방법은 점점 인터넷에서 많이 사용되고 있는 추세입니다. 물론 이 글에서 설명했던 소스코드가 완벽한 것은 아닙니다. 하지만 동적으로 페이지를 불러오는 알로리즘이 어떻게 구성되어 있는가를 이해하는 데에는 크게 도움이 되었으리라 생각합니다. 앞으로도 jQuery와 자바스크립트를 활용한 다양한 예제 소스코드에 대한 글을 많이 작성해보도록 하겠습니다.
