[JavaScript] 프로 자바스크립트 테크닉 (10장 ~ 14장) - 4/4

개요

jQuery를 만든 존 레식이 집필한 "Pro JavaScript Techniques"의 번역한 서적이다. JavaScript가 같고 있는 특성을 기준으로 객체지향적인 요소에 대해서 잘 설명하고 있다. jQuery의 기본적인 기술을 확인해 볼 수 있다. 

책 소개

자바스크립트를 한동안 다뤘던 개발자라면 아는 기본적인 문법이나 문장 구조 같은 기본적인 사항들을 배제하고, 곧바로 자바스크립트에서의 객체지향이라는 개념과 테스트를 위한 도구, 배포와 브라우저 지원에 대한 주의사항 등 현대적인 자바스크립트 개발에 필요한 기술들을 실용적인 예와 소스코드를 통해 설명한다.

 

자바스크립트로 개발해 본 사람이라면 누구나, 어떻게 해야 더 깔끔하고 사용하기 쉬운 코드를 작성할 수 있을지, 객체지향 언어답게 자바스크립트를 사용하는 방법은 무엇인지 고민했을 것이다. 또, 내가 개발한 애플리케이션을 테스트할 적절한 도구는 없는지, 배포 전에 주의해야 할 사항은 없는지, 혹시 내가 테스트하지 못한 브라우저에서 오류가 발생하는 건 아닌지 걱정했을 수도 있다.

 

이 책은 자바스크립트를 한동안 다뤘던 개발자라면 이미 알고 있을 기본적인 문법이나 문장 구조 같은 기본적인 사항들을 배제하고, 곧바로 자바스크립트에서의 객체지향이라는 개념과 테스트를 위한 도구, 배포와 브라우저 지원에 대한 주의사항 등 현대적인 자바스크립트 개발에 필요한 기술들을 실용적인 예와 소스코드를 통해 설명한다.

 

이 책의 저자인 존 레식(John Resig)은, 최근 주목받는 라이브러리인 jQuery를 개발한 자바스크립트 전문가이기도 하며, 그 경험을 살려 라이브 블로깅(Live Blogging)이나 끝이 없는 블로그(Never-Ending Blog) 같이 실무에 바로 적용할 수 있는 예들도 이 책에서 선보였다.

 

이 책을 읽은 독자라면 자신만의 라이브러리를 구축할 수 있을 정도의 도구들을 얻게 될 뿐만 아니라, 현대적인 기술로 무장한 자바스크립트 전문가가 될 수 있을 것이다.

 

저자

존 레식 (John Resig)

소개: 자바스크립트 프로그램 언어에 열정을 품은 프로그래머이며 기업가다. 자바스크립트 라이브러리인 jQuery의 창시자이자 jQuery의 리드 개발자(lead developer)이고, 2008년 현재 웹을 기반으로 하는 다른 많은 프로젝트에서도 리드 개발자로 활동한다.

 

10장 Ajax 소개

    Ajax는 Adaptive Path의 제시 제임스 개릿이 처음 사용한 용어이다.

    XMLHttpRequest 객체를 통해 클라이언트와 서버 사이의 비동기적 통신이 가능하다.

 

10.1 Ajax 사용하기

    간단한 Ajax 구현에는 많은 코드가 필요하지 않다.

    Ajax에서 중요하면서도 가능하면 일관되어야 하는 것은 HTTP 요청이다.

    비동기적으로 데이터를 서버로 전송하고 필요할 때마다 데이터 블록을 받아오는 것이다.

    XMLHttpRequest 객체에는 서버에 접속하고 데이터를 읽는 데 사용할 수 있는 메서드가 많다.

 

    서버에 데이터를 전송하기 전에 먼저 서버가 쉽게 읽을 수 있게 데이터를 서식화 해야 한다.

    데이터를 직렬화하는 데 사용한 포맷은 HTTP 요청에 전달인자를 건네는 데 사용하는 표준포맷이다. 

 

    GET 요청 보내기

    var xml = new XMLHttpRequest();
    xml.open("GET", "/some/url.cgi?" + serialize( data ), true);
    xml.send();

 

   POST 요청 보내기

    var xml = new XMLHttpRequest();
    xml.open("POST", "/some/url.cgi", true);
    xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    if ( xml.overrideMimeType )
    {
        xml.setRequestHeader("Connection", "close");
    }
    xml.send( serialize( data ) );
    or xml.send( "<items><item id='one'/><item id='two'/></items>" );

 

    POST 요청은 큰 부피의 데이터를 전송할 수 있다.

    XML-RPC나 SOAP 등 여러 종류의 통신 프로토콜을 구현할 수가 있다.

 

    requestXML과 requestText는 각자 알맞은 서식의 데이터를 담고 있다.

    XMLHttpRequest 객체에는 서버 에러를 처리하는 어떠한 내장 장치도 존재하지 않는다.

    성공적으로 처리된 HTTP 응답인지 검사하는 단계는 매우 중요하다.

 

    적은 노력으로 XMLHttpRequest 구현에 서버에 요청한 작업시간 초과를 검사할 수 있다.

 

10.2 응답 데이터 처리하기

    서버에서 반환한 데이터 포맷의 종류가 다양하기 때문이다.

        XML : 모든 최신 브라우저에서 자체적으로 XML 문서를 처리하기 위한 훅들을 제공한다.

        HTML : 일반적으로 HTML 코드 조작을 담은 텍스트 문자열로만 제공한다.

        JSON : 가공 이전의 실행 가능한 코드와 JSON 데이터 포맷을 포함한다. 

    function httpData(r, type) {
        var ct = r.getResponseHeader("content-type");
        var data = !type && ct && ct.indexOf("xml") >= 0;

        data = type == "xml" || data ? r.responseXML : r.responseText;
        if ( type == "script" )
            eval.call( window, data );
        return data;
    }

 

10.3 완전한 Ajax 패키지

    한 페이에서는 다른 도메인에 속한 페이지들을 요청할 수 없음을 유의하라.

  

    function ajax( options )  {

        ..(중략)..

    } 

 

10.4 다른 데이터의 사용 예

    최신 브라우저들은 자체적으로 XML 문서를 지원하며 쉽게 DOM 표현법으로 변형할 수 있다.

    브라우저가 XML 문서를 간단히 탐색해 주기 때문에 XML은 신속하게 데이터를 전할 수 있다.

 

    Ajax를 이용한 또 다른 유용 기법은 HTML 코드 조각을 동적으로 불러오는 것이다.

    JSON으로 직렬화된 데이터는 XML 문서에 대한 경량화된 대안이라 할 수 있다.

  

 

11장 Ajax로 블로그 강화하기

    Ajax 기술의 이점 중 하나는 과거와 같은 유저 경험을 계속하면서도 기존의 작동방식을 개선한다.

  

11.1 끝이 없는 블로그

    워드프레스 블로그 소프트웨어 (http://wordpress.org/)

 

11.2 라이브 블로깅

    즉각적으로 새로운 뉴스나 게시물을 반영하여 방문자에게 보여주는 기능이다.

 

 

12장 자동 완성 검색

    Ajax 기술의 이점 중 하나는 과거에는 불가능했던 상호작용 가능한  UI를 만들 수 있다는 것이다.

 

12.1 자동 완성 검색의 예

    구글 서제스트 (http://www.google.com/webhp?complete=1)

    Instant Domain Search (http://instantdomainsearch.com/) 

 

12.2 페이지 만들기

    텍스트 필드의 autocomplete 프로퍼티를 off로 설정해야 한다. 

 

 

13장 Ajax 위키

 13.1 위키?

    특유의 쉬운 사용으로 인해 위키는 공동 문서 작업에 매우 유용한 도구로 자리매김하였다.

  

13.2 데이터베이스와 대화하기

    Ajax 요청 --> SQL 질의 --> SQL 결과 --> JSON 응답 

 

13.3 Ajax 요청

    HTTP POST 요청을 처리할 수 있는 jQuery의 기능을 사용해서 한다. 

 

13.4 서버 측 코드

    SQLite는  장래가 유망한 SQL 데이터베이스인데 작동이 아주 가볍고 빠르다.

    SQL 결과를 담기에 가장 적합한 형태는 해시의 배열이다.

 

13.5 JSON 응답 처리하기

    JSON은 따로 파서가 필요 없으며 대신 eval() 함수만 있으면 된다. 

 

13.6 또 다른 사례 연구 : 자바스크립트 블로그

 

14장 자바스크립트는 어디로 가고 있나

    모질라 재단은 ECMAScript 4를 지원하는 과정을 통해 자바스크립트를 많이 개선했다.

    WATH-WG에서 차세대 브라우저 기반 애플리케이션에 대한 스펙을 만들었다.

  

14.1 자바스크립트 1.6과 1.7

    자바스크립트 1.6

    모질라 재단에서 만든 파이어폭스 1.5 브라우저와 함께 출시했다.

    주요한 기능은 E4X(ECMAScript for XML)와 배열용 함수모음이다.

 

    자바스크립트 1.7

    모질라의 파이어폭스 2.0 브라우저와 함께 릴리스 되었다.

    배열 꼴(Array Comprehension)은 코드 할 줄로 배열을 생성할 수 있는 새로운 기능이다.

    Let 유효범위 설정(Let Scoping)은 정말 멋진 기능이다.

    해체(Destructuring)는 List 같은 함수형 언어에서 가저온 개념이다.

 

 

14.2 웹 애플리케이션 1.0

    Web Hypertext Application Technology Working Group의 웹 애플리케이션명세이다.

    분량이 꽤 되지만 앞으로 우리 앞에 나타날 최신 기술이라는 점을 고려해 한번 볼 것을 추천한다.

 

14.3 Comet

    장시간 열려있는 연결을 통해, 중앙 서버가 전해준 최신 정보들을 지속적으로 스트리밍 하게 한다.