코멧을 구현하는 두 번째 방법은 롱폴링(Long Polling)이라고 하는 기법으로, 그 중에서도 금번 포스팅에서는 Ajax를 기초로 한 롱폴링 기법을 소개합니다. 이것은 지난 포스팅에서 소개한 Ajax 폴링 기법에서 일부분을 변형하여서, HTTP 통신이 일어나는 빈도를 줄인 것입니다. Ajax 폴링과 이 기법 사이의 결정적인 차이점은 서버측에서 특정한 상태값이 변하기 전까지는 응답을 미루는 것이라고 할 수 있습니다.
금번 포스팅에서는 지난 포스팅에서 Ajax 폴링으로 구현한 채팅방 예제를 롱폴링으로 수정하여, Ajax 폴링과 대조되는 롱폴링의 작동원리를 살펴볼 것입니다. 따라서 지난 포스팅을 읽어보지 않은 분께서는 금번 포스팅을 읽기에 앞서 일독을 권합니다.
(more…)이번 포스팅에서는 제가 작성한 jQuery 애니메이션 슬라이더(Slider) 모듈인 “Epiloum Slider”를 소개합니다.
웹 상에서 찾을 수 있는 수많은 자바스크립트 또는 jQuery 슬라이더는 필요 이상의 복잡한 HTML 태그 구조를 요구하거나, 사전에 CSS 작업 상당 부분 필요한 경우가 많습니다. 이처럼 애니메이션이라는 UX적인 부분을 위해 마크업을 희생하는 것은 의미론적 마크업의 철학에 위배되는 것이기도 합니다.
Epiloum Slider는 그와 같은 상황에 대한 안타까움으로부터 만들어졌습니다. 본 모듈의 가장 큰 특징은 1개의 <ul> 또는 <ol> 태그와, 그 아래에 나열된 <li> 태그들 만으로 적용 가능하다는 점입니다. 또한 스크립트를 이용해 CSS를 변경하는 일을 최소화하여, 실무에서 응용할 때 레이아웃에 영향을 줄 가능성을 최소화하였습니다. 간결한 마크업를 추구하는 많은 분들께 도움이 되시기를 바라겠습니다.
파일구성
아래 버튼을 눌러 다운로드 받은 zip 파일의 압축을 해제하면, 2개의 디렉토리를 만날 수 있습니다. 첫 번째 디렉토리인 Module 아래에는 자바스크립트 파일 epiloum_slider.js이 들어있으며, 실제로 본 슬라이더를 사용할 때에 임베디드해야 하는 파일입니다. 두 번째 디렉토리인 Example 아래에는 본 모듈의 사용예제가 들어 있습니다.
코멧을 구현하는 첫 번째 방법은 Ajax 폴링(Ajax Polling)이라고 하는 기법입니다. 이 기법은 모든 코멧 방법론 중에서 가장 직관적이고 구현이 간단하여, 코멧 방법론에 입문할 때에 처음 만나게 되는 기법입니다. 기본적인 아이디어는 일정시간마다 Ajax 통신을 하여 서버의 상태를 가져오는 것이라고 요약할 수 있습니다.
이 포스팅에서는 자바스크립트와 더불어 PHP, MySQL로 구현한 간단한 채팅방 예제를 통해 Ajax 폴링을 구현하는 방법을 알아봅니다.
(more…)JSONP는 한 웹페이지에서 도메인이 다른 웹페이지로 데이터를 요청할 때 사용하는 자바스크립트 개발 방법론입니다.
기본적으로 웹 브라우저는 도메인이 다른 웹 페이지로는 Ajax 등의 방법으로 접근하지 못하게 제한하고 있는데, 이것을 동일출처원칙(Same-origin policy)이라고 합니다. 그러나 실무에서는 부득이 다른 도메인에 연결된 서버로 데이터를 요청해야만 하는 상황을 만나게 됩니다. JSONP는 바로 이러한 경우에 동일출처원칙을 회피하는 일종의 편법 입니다.
JSONP는 동일출처원칙을 회피하기 위해 <script> 요소를 이용합니다. 본래 자바스크립트에서는 Ajax를 비롯한 어떠한 방법으로도 직접 다른 도메인의 웹페이지로 데이터를 요청할 수 없습니다. 그러나 <script> 요소는 도메인이 다른 스크립트 파일이라 하더라도 임베드할 수 있기 때문에, 이 성질을 이용하는 것입니다.
국내 웹에서 JSONP에 대해 검색을 하면, jQuery를 사용하여 간편하게 JSONP를 구현한 방법을 소개하는 포스팅이 주류를 이루고 있습니다. 이 방법은 Ajax를 구현할 때와 유사한 방식으로 쉽고 간편하게 JSONP를 구현할 수 있게 해주지만, 한편으로는 JSONP의 기본원리에 대해서는 소홀하게 만드는 양면성을 가지고 있습니다.
금번 포스팅에서는 JSONP의 기본원리를 설명하기 위하여, 순수 자바스크립트로 JSONP를 구현한 예제코드를 소개합니다. 또한 Ajax와의 비교를 통해 JSONP의 효용과 한계에 대해서 짚어볼 것입니다. 마지막으로 실무에서 활용하기 좋은 jQuery에서의 JSONP 구현방법까지 살펴보고 나면 글을 마치게 될 것입니다.
자바스크립트는 최상위에 1개의 전역객체(Global Object)를 가진다.
자바스크립트는 소스코드를 실행하기 전에, 최상위에 위치한 전역객체(Global Object)를 만듭니다. (Math나 Date를 비롯한 몇몇 특별한 객체를 제외한다면) 자바스크립트의 모든 객체와 값들은 이 전역객체의 아래에 자손(descendants)으로 위치하게 됩니다. 전역객체는 전체 코드에서 단 1개만 존재할 수 있으며, new 연산자를 이용하는 등의 방법으로 새롭게 만들 수 없습니다.
이 전역객체의 이름은 자바스크립트를 사용하는 환경에 따라 얼마든지 달라질 수 있습니다. 이를테면 웹 브라우저에서 사용되는 자바스크립트의 전역객체는 우리가 잘 아는 window라는 이름의 객체입니다. 한편 자바스크립트를 사용하는 서버인 Node.js에서는 global이라는 이름의 전역객체가 있습니다.