Backends Frontends Javascript PHP

코멧(Comet) #1 – 웹 페이지를 실시간으로 업데이트하는 방법

코멧(Comet)이란?

웹 페이지가 다시 로드되지 않고도 실시간으로 변동사항을 반영해 변화하게 하려면 어떻게 해야할까요. 이런 고민들은 의외로 많은 곳에서 만나게 됩니다. 웹에서 실시간 모니터링 도구를 만들어야 한다던가, 스포츠 실황중계처럼 매우 짧은 시간간격으로 변화하는 상황을 사용자에게 보여주어야만 하는 서비스를 만든다던가 할 때, 우리는 이와 같은 고민에 빠지게 됩니다. 함께 접속한 사용자들이 작성한 글을 거의 실시간에 가깝게 다른 사용자들에게 보여주어야만 하는 채팅 서비스에서도 물론 같은 고민에 직면할 것입니다.

만약에 서버가 모니터링하고 있다가 그 상태를 수시로 클라이언트 측에 전달할 수 있다면, 특별히 고민할 이유가 없을 것입니다. 이런 방식을 서버 푸시(Server Push)라고 부릅니다. 그러나 불행히도 웹에서 사용하는 HTTP로는 서버 푸시를 구현할 수 없습니다. HTTP는 기본적으로 클라이언트(웹 브라우저)가 서버에 요청(Request)을 하면, 서버가 그에 대해 응답(Response)을 한 후에 연결을 끊습니다. HTTP에서는 클라이언트가 먼저 요청을 하지 않는 이상, 서버는 결코 먼저 움직일 수 없는 것이지요.

하지만 궁하면 통하는 법! 이 문제를 해결하기 위해서 전세계의 많은 개발자들이 만들어놓은, 약간은 편법처럼 느껴지는 방법들이 있습니다. 이러한 방법을 묶어서 코멧(Comet)이라고 합니다.

(more…)

Continue reading

Javascript

beforeunload 이벤트를 이용한 웹페이지를 닫을 때의 메시지 표시

웹 페이지 상의 채팅화면이나 오픈마켓의 구매 페이지 등을 사용해보면, 웹 페이지를 닫거나 새로고침을 하기 직전에 “이 페이지에서 나가시겠습니까?”라는 메시지가 표시되는 경우가 있습니다. 구현하는 방법은 의외로 간단합니다. window 객체의 beforeunload 이벤트를 잡아, 메시지 창에 표시할 내용을 반환해주면 됩니다.

window.onbeforeunload = function() {
	return '표시할 메시지를 반환';
}

Opera에서는 작동하지 않지만, IE 각 버전을 포함한 여타의 브라우저에서는 잘 작동합니다. 중요도가 높아 새로고침을 하거나 창이 닫기 직전에 사용자의 확인을 구해야 하는 경우가 있다면 유용하게 사용할 수 있습니다.

Continue reading

Javascript

자바스크립트 샌드박스(Sandbox)와 BOM(Browser Object Model)

샌드박스의 의미

샌드박스는 아이들이 들어가 놀기 위해서 모래를 채워넣은 상자를 의미합니다. 모래상자 안에서 무엇을 하더라도 상관없지만, 모래상자 바깥으로 나와 집을 어지럽히지는 말라는 부모의 깊은 뜻이 숨겨진 물건이지요.

컴퓨터 보안에서도 샌드박스 환경이라는 단어가 사용됩니다. 이 단어는 실행한 프로그램이 접근할 수 있는 자원들을 제한하는 대신, 제한되지 않은 자원들에 대해서만은 자유롭게 접근하고 조작할 수 있도록 허락한 환경을 의미합니다. 샌드박스는 실행한 프로그램이 자원에 마음대로 접근하여 시스템에 영향을 미치는 심각한 오작동을 일으키거나 시스템을 공격하는 일을 미연에 방지할 수 있게 합니다.

(more…)

Continue reading