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

개요

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

 

책 소개

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

 

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

 

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

 

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

 

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

 

저자

존 레식 (John Resig)

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

 

1장. 현대적인 자바스크립트 프로그램

    가지고 노는 장난감 언어 --> 웹 어플리케이션 제작 언어로 발전

 

1.1 객체지향 자바스크립트

    그 모습과 작동방식이 여타 객체지향 언어와 다르다

    잘 설계된 코드가 보편적으로 사용되기 시작.

 

1.2 코드 테스트

    견고하고 적절한 테스트 환경

    디버깅하는 방법

    좋은 유스케이스 체계

    파이어버그

 

1.3 배포하기 위한 패키징

    네임스페이스를 사용

    JSAN (JavaScript Archive Network) 중앙코드 저장소

 

1.4 무간섭 DOM 스크립팅

    HTML 콘텐츠를 완전히 분리

    DOM은 대중적인 XML 문서 표현 방법이다.

    유효한 HTML도 단순히 XML의 부분 집합.

    잘 설계된 어플리케이션에는 데이터 소스와 표현을 담당하는 부분이 분리되어 있다.

    DOM과 이벤트 상호작용을 바탕으로 DHTML이 만들어진다.

 

1.5 Ajax

    제시 제임스 개릿 - Ajax(Asynchronous JavaScript and XML)

    최근의 모든 브라우저에서 XMLHpptRequest를 지원

    구글맵,  구글의 서제스트

    구글과 야후가 자바스크립트를 완전한 프로그램 환경으로 수용.

 

1.6 브라우저 지원

   개발자들은 너무 많은 문제를 일으키는 브라우저에 대한 지원을 끊어버리곤 한다. 

   야후 몇가지 설계 패턴 지침을 발표

   야후는 브라우저에 등급을 부여하고 브라우저 지원 전략을 발표 (A, X, C)

   http://developer.yahoo.com/yui/articles/gbs/index.html

 

   일관된 개발환경

       코어 자바스크립트 1.5

       XML DOM

       XMLHttpRequest

       CSS  

 

2장. 객체지향 자바스크립트

    자바스크립트에서 가장 기본적인 단위는 객체이다.

    레퍼런스, 유효범위, 클로저, 콘텍스트

 

2.1 언어 기능

    참조는 객체의 실제 위치를 가리키는 포인터다.

 

    자바스크립트는 객체들에 대한 참조집합을 관리함으로써 유연하게 작동한다.

    자바스크립트에서 참조는 항상 참조체인을 따라간 후 만나는 최종 객체를 가리킨다.

 

    모든 함수 내부에는 함수에 전달되는 배열 같이 작동하는 변수 arguments가 존재한다.

    arguments는 진짜 배열이 아니다.

    function makeArray()
    {
       var arr = [];
   
       for ( var i = 0; i < arguments.length; i++ )
       {
           arr.push( arguments[i] );
       }

       return arr;
    }

 

 

 

    자바스크립트에서 객체의 타입을 검사하는 방법

        첫 번째, typeof 연산자를 사용

            if ( typeof num  == "string" )
                num = parseInt( num );

            if ( typeof arr == "string" )
                arr = arr.split(",");

 

        두 번째, constructor 프로퍼티를 참조 (간단)

            if ( num.constructor == String )
                num = parseInt( num );

            if ( arr.constructor == Array )
                arr = arr.join(',');

 

 

    자바스크립트에서는 유효범위가 함수 안에 존재한다.

    전역 유효범위에 속하는 변수들은 실제 widnow 객채의 프로터티이다.

 

    자바스크립트에서 클로저는 부모 함수 안에 있는 변수를 참조한다.

    스스로를 실행하는 익명 함수를 사용하면 전역 변수를 다른 코드로부터 숨길 수 있다. 

    (function() {
        var msg = "Thanks for visiting!";

        window.onunload = function(){
            alert( msg );
        };
    }());

 

 

    자바스크립트에서 작성하는 코드는 콘텍스트에 속하게 된다.

    콘텍스트는 this 변수를 통해 작동한다. call, apply

    function changeColor( color ) {
        this.style.color = color;
    }

    changeColor( "white" );

    var main = document.getElementById("main");

    changeColor.call( main, "black" );

    function setBodyColor() {
        changeColor.apply( document.body, arguments );
    }

    setBodyColor( "black" );

 

 

2.2 객체지향 기본

    객체는 자바스크립트의 토대다.

    자바스크립트에서는 한 객체가 새로운 객체를 생성할 수 있고 다른 객체에서 상속받을 수 있다.

 

    constructor 프로퍼티는 모든 객체에 들어 있으며 항상 객체를 생성한 함수를 가리킨다. 

    function User() {}
    var me = new User();
    var you = new me.constructor();
    alert( me.constructor == you.constructor );

 

    prototype 객체의 모든 프로퍼티는 객체의 모든 인스턴스에서 사용할 수 있다.

 

    public method

    private method - Douglas Crockford가 만든 기법

    privileged method - Douglas Crockford가 만든 용어

    static method - static Class method로 봐도 된다.

 

3장. 재사용 가능한 코드 작성하기

    프로젝트에서는 좋은 코드를 작성하기 위한 지침을 준비해야 한다.

    자바스크립트 개발과 관련된 지침들의 수준도 크게 향상되었다.

 

3.1 객체지향 코드의 표준화

    전체 코드를 일관된 방식으로 작성.

    하나의 체계적인 시스템을 갖추는 것이 중요.

 

    자바스크립트는 프로토타입 상속이라는 독특한 방식으로 객체 생성과 상속을 지원한다.

    프로토타입 상속은 다중 상속이 아닌 단일 상속을 위해 설계되었다.

    function Person( name ) {
        this.name = name;
    }

    Person.prototype.getName = function() {
        return this.name;
    };

    function User( name, password ) {
        this.name = name;
        this.password = password;
    };

    User.prototype = new Person();

    User.prototype.getPassword = function() {
        return this.password;
    };

 

    더글러스 크록포트는 상속을 흉내 (http://javascript.crockford.com/inheritance.html)

        Fuction.prototype.method 생성자의 프로토타입에 함수를 붙인다.

        Fuction.prototype.inherits 단일 부모 상속을 지원

        Fuction.prototype.swiss  여러 메서드를 상속받는 데 사용.

 

 

    딘 에드워즈는 자바스크립트의 객체 생성이나 상속과 관련해서 Base 라이브러리를 만들었다.

        http://dean.edwards.name/base/

 

 

    Prototype은 루비 온 레이스 웹 프레임워크에서 사용하려고 개발된 라이브러리다.

        Class.create() 생성자로 사용된 수 있는 익명 함수에 대한 페버를 돌려준다.

        Object.extend() 단순히 한 객체에서 다른 객체로 모든 프로퍼티를 복사한다.

 

   var Class = {
        create: function() {
            return function() {
                this.initialize.apply(this, arguments);
            }
        }
    }

    Object.extend = function(destination, source) {
        for (property in source) {
            destination[property] = source[property];
        }

        return destination;
    }

 

3.2 패키징

    네임스페이스 만들기는 코드를 깔끔하고 단순하게 만드는 개념이다.

    var YAHOO = {};
    YAHOO.util = {};

    YAHOO.util.Event = {
        addEventListener: function(){ ... }
    };

    YAHOO.util.Event.addEventListener( ... )

 

 

    Dojo - 완전한 웹 애플리케이션을 개발하는 데 필요한 모든 것을 제공

    YUI - 웹 애플리케이션에서 많이 사용하는 공통적인 기능들을 구현.

    JSLint 코드 검증, 더글라스 크락포드가 개발 (http://www.jslint.com/)

    JSMin 불필요한 문자제거 (http://www.crockford.com/javascript/jsmin.html)

    Packer 코드 압축 (http://dean.eduwards.name/packer/)

 

    자바스크립트에서 null, 0, '', false, undefined는 모두 false로 평가

 

3.3 배포

    JSAN(JavaScript Archive Network)

    JSAN은 이곳에 올라오는 모든 모듈들이 형식을 잘 갖춘 객체지향 스타일로 작성되길 원한다.

    JSAN은 이곳에 올라오는 모든 모듈들이 JSAN에서 제한하는 모듈 아키텍처를 갖추고 있기를 요구.

 

  

4장. 디버깅과 테스트를 위한 도구

    어떤 언어로 개발하더라도 가장 시간이 많이 걸리는 과정은 코드를 테스트하고 디버깅하는 과정.

 

4.1 디버깅

    에러콘솔 - 모든 최신 브라우저에는 에러콘솔이 있다. IE, 파이어폭스, 사파리, 오페라

    DOM 검사기 - DOM inspector는 브라우저에 따라 다르게 작동.

    View Rendered Source - 파이어폭스의 확장기능

    Firebug - 자바스크립트 개발을 위한 가장 유용한 확장도구.

    Venkman - 코드가 어떤 일을 수행하고 있는지 정확하게 알 수 있다.

 

4.2 테스트

    JSUnit - 단위 테스트 세계에서 기본 (http://www.jsunit.net)

        test runner 데스트 묶음에서 현재테스트 과정의 진행을 표시

        test suite 테스트 케이스들의 묶음

        test case 참/거짓을 나타내는 간단한 표현식

    J3Unit - 단위 테스트 세계에서 신입생

    Test.Simple - JSAN에 제출되는 자바스크립트 모듈을 테스트하는 방법을 표준화하기 위해 도입