자바스크립트로 웹 사이트를 구성하는 혁신적인 방법!

자바스크립트는 넷스케이프로부터 개발된 웹 브라우저 기반의 프로그래밍 언어이다. 엇? 잠깐만.. 웹 브라우저 기반의 프로그래밍 언어? 이렇게 잠시 갸우뚱 할지 모른다.

그도 그럴것이 자바스크립트는 그 태생이 초기 브라우저 전쟁 당시 있었던 넷스케이프사로부터 개발된 것이기 때문이다. 사실 자바스크립트의 옛 이름은 라이브스크립트였다. 하지만 넷스케이프사 임직원들은 이 이름을 내켜하지 않았고 1995년 당시 제임스 고슬링이 만들었던 자바 언어와의 통신 기능을 추가해서 자바스크립트로 이름이 변경되었다.

역사까지 세세하게 따져본다면 자바스크립트는 자바 언어를 스크립트 형태로 만든 녀석은 분명 아니라는 건데, 이름이.. 뭔가 자바의 영향을 심하게 받은 듯한 느낌을 받게 한다. 실제로는 아니지만 말이다.

자바스크립트는 브라우저에서 동작하는 만큼 브라우저마다 자바스크립트를 동작시키는 엔진이 다 다르다.

Microsoft Internet Explorer : JScript
Google Chorme: V8
Mozilla Firefox: Rhino, TraceMonkey, JagerMonkey
Apple Safari: JavascriptCore(renamed Nitro)

우리가 알고 있는 자바스크립트는 하나인데 자바스크립트 엔진이 다 다르니 자연스럽게 브라우저 사이에 자바스크립트의 동작 속도가 구현 기능이 다 달라지게 되었다.

이런 이유로 자바스크립트의 표준을 제정하자는 의견이 있어서 ECMAScript가 제정되기 했지만 아직까지는 자바스크립트 엔진에 따라 구현이 다른 경우가 종종 있다.

"자바스크립트 웹 애플리케이션"은 단순히 폼 검사 용도가 아니라 실제로 완전하게 동작하는 자바스크립트 기반의 웹 애플리케이션을 만드는데 필요한 기초 기술과 응용 기술을 소개한다.

자바스크립트로 완전한 웹 애플리케이션 개발은 가능한가?

실제 웹 애플리케이션은 자바스크립트 뿐만 아니라 HTML과 서버 기술(PHP, .NET, Java, Python 등)이 함께 맞물려야 한다.

이와 같음에도 불구하고 HTML과 서버 기술로만 웹 애플리케이션을 구현하기엔 사용자의 요구가 조금 더 고급을 지향하며 반응성이 뛰어난 웹 애플리케이션 수요가 높아지고 있다. 게다가 응용 애플리케이션에서 항상 고민되는 것은 데이터와 뷰의 분리가 강조되고 있다는 사실이다.

데이터와 뷰의 분리는 MVC(Model-View-Controller)로 불리우는 애플리케이션 모델이 선호되는데 데이터는 뷰에 간섭하지 말아야 한다는 것이 이 모델의 핵심적인 내용이다.

"자바스크립트 웹 애플리케이션"은 바로 이 MVC 모델을 기본으로 풀어나간다.

MVC와 이벤트

1장에선 MVC에 대해 이야기하며 자바스크립트에서 MVC를 어떻게 구현할 수 있는지 그 예를 들어 설명해보인다.

자바스크립트에서 MVC는 Model은 데이터, View는 HTML, Controller는 데이터를 읽어서 뷰에 출력해주는 역할을 하는 것으로 구분해볼 수 있다.

뷰에 출력해줄 데이터는 그 종류가 무척 다양하며 그 데이터를 일관된 하나의 방법으로 다룰 필요가 있는데 이를 Model이라는 이름의 구조를 생성하여 데이터를 하나의 일관된 구조의 객체에 담아 데이터를 읽거나 쓰고 서버에 데이터를 저장할 수 있는 구조를 가지게 한다.

이처럼 데이터를 모델을 통해 자유롭게 조작할 수 있게 되었다면 뷰를 생성해야 한다. 뷰는 HTML로 구성하는 것이 일반적이지만 자바스크립트로 동적인 뷰를 구성하는 방법도 있다.

뷰에서 하는 역할은 컨트롤러에서 데이터를 보내주면 이를 표시해주는 역할을 한다. 뿐만 아니라 모델에 변경사항이 생기면 뷰는 이 변경사항을 반영하기도 한다. 그 역도 가능하다.

컨트롤러는 뷰와 모델을 연결하며 상태 등의 관리를 하는 역할을 맡는다.

그렇다면 이벤트는 무엇일까? 윈도우 프로그래밍을 해본 사람이라면 클릭, 이벤트라는 말에 익숙할텐데 이벤트는 어떤 것의 행동을 표현하는 말이다.

가령 승마를 한다고 했을때 말에 올라타 말을 때리면 말이 움직인다. 이것을 이벤트라는 용어로 풀어내면 다음과 같아진다.

행동 : 말을 때린다(때찌 이벤트 발생)
때지 이벤트 : 말이 달린다(둥둥둥둥)

설명이 유치한가? 설령 그렇더라도 애플리케이션에서 이벤트는 무척 중요한 부분을 차지한다. 이벤트는 한국어로 '사건'으로 번역된다(프로그래밍을 처음 배울때 이 용어 때문에 경찰의 사건을 말하는 줄 알았다).

MVC 모델을 적용한 애플리케이션에서 모델의 데이터를 변경하거나 뷰의 데이터를 변경할 경우 이를 서로에게 알려야 하므로 이벤트는 MVC에 있어 필수 요소라고 볼 수 있다.

자바스크립트의 모듈화와 파일 관련 작업하기

자바스크립트는 웹 브라우저 내에서 동작하도록 설계되다보니 모듈화에 어려운 점이 있었는데, 이점을 개선하기 위하여 사용되는 여러 라이브러리를 소개한다. 게중엔 실제로 프로젝트에 적용하여 사용중인 라이브러리가 있는데 이러한 라이브러리를 "자바스크립트 의존성 라이브러리"라고 한다.

의존성 라이브러리가 개발되지 않았더라면 아직도 하나의 웹 페이지에서만 동작하는 자바스크립트를 만들 수 밖에 없었을 것이다.

그리고 웹 애플리케이션은 브라우저 내에서의 드래그앤드롭과 파일 업로드 작업이 무척 제한적으로 구현하거나 구현이 어려웠으나 HTML 5에선 드래그앤드롭 이벤트와 파일 업로드를 바로 할 수 있도록 여러 자바스크립트 API를 제공한다.

이러한 자바스크립트 API의 제공은 실시간 웹을 만드는데 큰 공헌을 한 것이 사실이다.

물론 파일 업로드에 있어선 자바스크립트의 특성상 파일의 읽기 작업만 제공하고 있으나 앞으로 제한적인 접근을 통해 쓰기도 가능하지 않을까 하는 개인적인 바람도 있다.

웹 애플리케이션의 영원한 화두인 실시간 웹

웹이 전통적인 응용 애플리케이션의 텃밭을 하나씩 시도함에 따라서 사용자들은 응용 애플리케이션에서 제공하는 실시간 서비스를 웹 애플리케이션에도 바라기 시작했다.

그러나 Ajax 이전에선 실시간 웹은 브라우저 플러그인을 통해서만 제한적인 구현만 가능해졌을 뿐더러 여전히 웹 자체적으론 구현이 불가능했었다.

그러던 것이 Ajax 의 출현으로 화면의 새로고침없이 데이터를 주고받는 것이 가능해졌다. 완전한 의미에서의 실시간 웹은 아니었지만 대부분 Ajax를 거부감 없이 받아들이게 되었다.

이후 클라이언트와 서버간 연결 유지를 위해선 Ajax 요청을 서버로 계속 던져야 하는 부담이 있었다. 이는 다수의 요청을 주고받을때 요청량이 많다는 문제가 있고 서버에서 데이터를 클라이언트(브라우저)에게 보내어 클라이언트가 바로 데이터를 갱신할 수 없다는 문제가 발견되었다.

이후, 이 문제를 해결하기 위해 Long Ajax로 불리우는 Comet 기술이 먼저 나오고 HTML 5에서 이를 규격으로 만든 웹소켓 기술이 제정되기도 했다.

8장에선 바로 이러한 웹소켓 기술과 Comet 기술 등과 같이 실시간 웹을 구성할 수 있는 방법을 알아본다.

테스팅, 디버깅, 배포는 개발자의 오랜 벗

어떤 언어로 애플리케이션을 제작하든 중요하게 부각되는 것은 테스트, 디버깅, 배포이다. 테스트는 애플리케이션이 제대로 동작하는지 원하는 대로 행동하는지 알아볼 수 있다.

디버깅은 애플리케이션 개발에 있어 가장 중요한 요소로 특히 자바스크립트로 개발함에 있어선 이는 피할 수 없는 숙명적 요소가 아닐까? 디버깅도 IE 5, 6, 7까진 Firefox의 Firebug를 통한 스크립트 디버깅처럼 쉽지 않았다. 물론 IE에서도 필요하다면 Script Debugger를 쓸 수 있었지만 일반 웹 애플리케이션 개발자가 쓰기엔 다소 어려웠던 것이 사실이니 말이다.

개발이 완료되면 애플리케이션을 배포해야 한다. 특히 자바스크립트 기반의 웹 애플리케이션은 브라우저에 기반하여 동작하므로 캐싱을 통해 성능을 강화하고 Gzip을 통해 크기를 줄이고 감사 프로그램을 사용하여 제대로 동작하는지 검사해볼 필요가 있다.

자바스크립트 웹 애플리케이션을 도와주는 프레임워크와 함께 하기

맨손으로 자바스크립트 웹 애플리케이션을 개발할때 우리는 조금 더 쉽게 개발을 도와주는 여러 프레임워크와 만나서 친구 관계를 맺을 필요가 있다.

저자가 직접 개발한 스파인 라이브러리와 백본, 자바스크립트MVC 라이브러리를 통해 자바스크립트 웹 애플리케이션을 조금 더 쉽게 구현할 수 있도록 안내하며 독자는 여러 프레임워크와의 만남을 통해 자바스크립트 웹 애플리케이션을 만드는데 도움을 얻을 것이다.

jQuery 그리고 CSS에 익숙해지기

jQuery는 현존하는 자바스크립트 라이브러리 중에 가장 널리 쓰이는 라이브러리가 되었다. 본질적으로 jQuery는 DOM을 조작하는 라이브러리며 다른 여러 자바스크립트 프레임워크와 함께 사용할 수 있어 자바스크립트 기반의 웹 애플리케이션 개발시에 조금 더 빨리 프로그램을 개발할 수 있을 것이다.

그리고 CSS는 웹 페이지를 조금 더 아름답고 예쁘게 구성할 수 있는 언어이다. 부록을 통해서 저자는 CSS의 확장과 CSS 3 사용을 통해서 웹 애플리케이션을 보기 좋게 만드는데 필요한 기술을 소개한다.

앞으로 웹은... 어떻게 변할까?

"자바스크립트 웹 애플리케이션"은 자바스크립트로 웹 애플리케이션을 만드는 새로운 방법을 제시한다. 하지만 HTML 5가 뒷받침되지 않는다면 Ajax가 그래왔던 것처럼 정체기에 접어들지도 모른다.

웹의 미래는 아직 무궁무진하다. 독자가 꿈꾸는 만큼 구현하는 만큼 이루어지는 새로운 세상이니 한번 쯤 도전해 보는 것이 좋다고 생각한다.

웹은 어떻게 변할까?라는 화두보다 웹은 독자 자신의 성장과 함께 변하지 않을까? 라는 새로운 화두를 던져본다.