• 자바스크립트 객체지향 프로그래밍
  • jQuery 구조 분석까지

  • 황인균 지음

  • 오픈소스 & 웹 시리즈 _ 040
  • ISBN: 9788992939041
  • 25,000원 | 2012년 07월 13일 발행 | 392쪽



Ajax, HTML5가 유행하고 서버 측에서도 자바스크립트를 이용하는 시대가 되면서 자바스크립트는 이제 프로그래밍의 보조적인 언어가 아닌 프로그램의 주요 로직을 구현하는 언어로 자리매김하고 있다. 또한 많은 자바스크립트를 기반으로 하는 다양한 라이브러리가 속속 출시되고 있다.

자바스크립트의 비중이 커지면서 더불어 자바스크립트 코드의 규모도 커지고 있다. 아직 큰 규모의 코드를 구조화 및 모듈화하는 데 객체지향만큼 훌륭한 방법론은 없다. 따라서 자바스크립트의 객체지향 지원을 이해하는 것이 자연스럽게 필요해진다. 웹 개발자라면 자바스크립트가 객체지향을 어떤 식으로 지원하는지 그 원리를 짚고 넘어갈 필요가 있다.

이 책은 자바스크립트의 객체지향에 아주 기본 중의 기본인 함수를 지금까지와는 다른 관점에서 상세히 설명한다. 또한 자바스크립트만의 객체, 상속의 특징을 설명하고 디자인 패턴 가운데 몇 가지 익숙한 패턴을 자바스크립트를 이용해 구현하는 방법을 알아본다. 마지막으로 요즘 유행하는 라이브러리 가운데 하나인 jQuery를 대상으로 라이브러리의 구조를 객체지향적으로 분석한다.

자바스크립트의 중흥기다. 자바스크립트 프로그래밍에서 복사해서 붙여넣기만 잘하면 그만이었던 시절은 지나고 자바스크립트가 독립된 시스템을 구현하는 언어뿐 아니라 시스템 간의 연동을 위한 표준적인 툴로도 자리 잡고 있다. 이제 자바스크립트는 보조적인 언어가 아닌 시스템 구현과 연동의 핵심 언어로 자리매김하고 있다. 또한 자바스크립트를 기반으로 하는 다양한 라이브러리가 속속 출시되고 있다. 이러한 라이브러리에 익숙해지는 것도 중요하지만 역시 그러한 라이브러리의 핵심에 있는 메커니즘을 한번쯤 숙지하고 넘어가는 것 또한 중요하다.

★ 이 책에서 다루는 내용 ★

  • 자바스크립트 함수의 역할 및 특성
  • 객체를 생성하는 내부적인 절차
  • 함수 및 객체의 상속
  • 자바스크립트 객체를 응용한 네임스페이스 및 디자인 패턴 구현
  • 자바스크립트 라이브러리 jQuery 사용법 및 구조 분석

황인균

대학원에서 객체지향 설계를 주제로 한 논문(유한 요소 해석의 객체지향 설계)을 발표한 이래 10여 년 동안 소프트웨어 아키텍처에 관심을 기울이고 있다. 아키텍처 컨설팅을 하면서 여전히 개발도 직접 수행하고 있다. 특히 웹 기술 및 트렌드에 관심이 있으며 웹을 기반으로 하는 비즈니스 모델을 고민하고 있다. 공부방 http://dalbong2.net을 통해 정보를 정리하고 있다. 지은 책으로는 『C#을 이용한 ASP.NET 웹 프로그래밍』, 『스마트클라이언트 애플리케이션 배포 솔루션 ClickOnce』가 있다.

  • ▣ 00장_들어가며
    • 0.1 자바스크립트의 저평가
    • 0.2 웹 개발 환경의 변화
    • 0.3 이 책에서 다루는 내용
      • 이 책의 내용
      • 대상 독자
    • 0.4 이 책의 구성
    • 0.5 테스트 툴
      • 파이어버그 설치
      • 파이어버그 실행
    •  
  • ▣ 01장_자바스크립트의 기본 개념
    • 1.1 리터럴
    • 1.2 변수
    • 1.3 데이터 타입
    • 1.4 var 변수
    • 1.5 값 타입의 데이터와 참조 타입의 데이터
    • 1.6 프로그램 실행 단계
    •  
  • ▣ 02장_자바스크립트의 기본 문법
    • 2.1 원시 타입
      • 숫자
      • 문자열
      • 불린
      • undefined와 null
    • 2.2 연산자
      • 증가, 감소 연산자
      • 비교 연산자
      • 논리 연산자
    • 2.3 실행 제어
      • 조건문
      • 반복문
      • 예외 처리
    •  
  • ▣ 03장_자바스크립트의 함수
    • 3.1 자바스크립트 함수의 역할
    • 3.2 함수 모델링
    • 3.3 함수 정의 - 3가지 방법
    • 3.4 함수 인자 - arguments, callee
    • 3.5 Function
    • 3.6 함수 객체
    • 3.7 익명 함수
    • 3.8 중첩 함수
    • 3.9 콜백 함수
    •  
  • ▣ 04장_변수 스코프
    • 4.1 함수 단위의 변수 관리
    • 4.2 변수 스코프 객체
    • 4.3 렉시컬 특성
    • 4.4 변수 스코프 체인
    • 4.5 루트 객체
    • 4.6 클로저
      • 자바스크립트 클로저
      • 클로저 인스턴스 I
    •  
  • ▣ 05장_자바스크립트 객체
    • 클래스 기반의 객체지향
    • 객체 생성
    • Object객체 정의 I : new Object
    • Object객체 정의 II : 객체 리터럴
    • 사용자 정의 객체 정의 III
    •  
  • ▣ 06장_자바스크립트 객체 멤버
    • 6.1 객체 멤버 관리
      • 멤버 구분
      • 멤버 관리 구조
      • 멤버 접근, 관리
      • 멤버 순회, 존재 확인
    • 6.2 prototype, constructor, 인스턴스
      • 생성자, 프로토타입 객체, 인스턴스 관계도
      • 프로토타입 객체
      • 프로토타입 멤버 편집의 비대칭
      • 프로토타입 객체 대체
      • 생성자
    • 6.3 멤버 접근 제어 구조
      • 비공개 멤버 구현
      • 클로저 인스턴스 II
    •  
  • ▣ 07장_자바스크립트 상속
    • 7.1 함수와 객체 정의
      • 함수 정의 절차
      • 객체 생성
      • this
    • 7.2 자바스크립트 상속
      • 프로토타입 멤버 상속
      • 프로토타입 체인
      • Object 멤버
    • 7.3 Function 상속
      • Function 프로토타입 멤버
      • Function 상속
    • 7.4 객체 확장
      • 프로토타입 멤버 상속 구현 : prototype
      • 인스턴스 멤버의 상속 구현 : call/apply
      • 상속 구현 통합
      • 멤버 확장
    • 7.5 리플렉션
      • 타입 판별 - typeof 연산자
      • 상세 타입 판별 - instanceof 연산자
      • 사용자 정의 타입 판별 - toString 재정의
    •  
  • ▣ 08장_내장 객체
    • 8.1 배열 객체
      • 배열 생성 I - new Array
      • 배열 생성 II - 배열 리터럴
      • 배열 객체의 데이터 구조
      • Array 프로토타입 멤버
    • 8.2 정규식 객체
      • 정규식 객체 생성 - RegExp, 정규식 리터럴
      • 패턴 매칭 수행 - 정규식 객체
      • 패턴 매칭 수행 - String
    • 8.3 JSON
      • JSON
      • JSON 형식
      • JSON 객체 사용
    •  
  • ▣ 09장_자바스크립트 객체 응용
    • 9.1 네임스페이스 구현
    • 9.2 자동 호출 패턴
    • 9.3 싱글톤 패턴 구현
    • 9.4 모듈 패턴 구현
    • 9.5 메서드 체인 패턴 구현
    •  
  • ▣ 10장_웹 브라우저 스크립팅
    • 10.1 웹 브라우저 스크립팅
      • 웹 브라우저 스크립팅 환경
      • 이벤트 기반 프로그래밍
      • 웹 페이지 구성 요소
      • 자바스크립트 코드 구성
      • 웹 페이지 로딩
    • 10.2 이벤트 핸들링
      • 이벤트 핸들링
      • 이벤트 핸들러 반환값
      • 웹 이벤트 핸들러의 this
      • DOM Level 2 : 이벤트 전파
      • DOM Level 2 : 이벤트 핸들링
      • DOM Level 2 : Event 객체
      • 브라우저 호환성
    •  
  • ▣ 11장_jQuery 프로그래밍
    • 11.1 jQuery학습 가이드
    • 11.2 도입단계 : jQuery 개요
      • jQuery 특징
      • jQuery 함수, jQuery 객체
      • DOM 요소 선택
      • jQuery 메서드 체인
      • jQuery 요소 스택
    • 11.3 개발 1단계 : 로드 이벤트 핸들러
    • 11.4 개발 2단계 : 화면 요소 선택
      • 선택식 기초
      • 선택식 확장 - 어트리뷰트
      • 선택식 확장 - 폼 요소
      • 선택식 확장 - 상태 기준
      • 문자열이 아닌 선택식
      • DOM 요소 접근
    • -.find(), .filter(), .end()
    • -.each(), jQuery.each()
    • 11.5 개발 3단계: 요소 핸들러 등록
      • 이벤트 핸들러 등록:.bind()
      • 이벤트 핸들링 헬퍼 함수
      • 이벤트 객체
    • 11.6 개발 4단계: 요소 조작
      • 값 조작 : 텍스트박스 - .val()
      • 값 조작 : 선택요소 - .val()
      • 값 조작 : 컨테이너 요소 - .text(), html()
      • 상태 조작 : .attr()
      • 상태 조작 : .show(), .hide()
      • 구조 조작 : .empty()
      • 구조 조작 : .append(), .prepend()
      • 구조 조작 : .clone()
      • 클라이언트 캐시 : .data()
    • 11.7 개발 5단계 : 통신
      • jQuery.ajax()
    • -.load(), $.get(), $.getScript()
    • 11.8 심화 단계 : jQuery 라이브러리 분석
      • jQuery 구조
      • jQuery 함수
      • jQuery 프로토타입 객체
      • jQuery.fn -프로토타입 객체 확장
      • jQuery의 this 컨텍스트
      • 플러그인 제작
      • 커스텀 이벤트
    •  
  • ▣ 12장_참고 자료
    • 도서
    • 훌륭한 웹문서
  • 57쪽, 11번째 줄

    그 값을 undefinded로 --> 그 값을 undefined

  • p94, 첫번째 예문 첫째 줄

    var add (x,y) { return x y;} ---> function add (x,y) { return x y;

  • p96, 3번째 예문 마지막 줄

    var added = (function(x) {return x y;})(1,2); ---> var added = (function(x,y) {return x y;})(1,2);

  • p112, 그림 4.4 outer 변수 스코프 객체 박스 내

    g : □ ---> inner : □

  • p113, 밑에서 8번째 줄

    정의된counter에 --> 정의된 count

  • 140쪽, 7번째 줄 코드

    var mySon = new Persion(name); --> var mySon = new Person(name);

  • p152, 첫번째 예제 첫번째 줄

    var obj; ---> var obj = new Object(); 혹은 var obj = {};

    설명: obj는 undefined이므로 속성을 추가할 수 없음.

  • 155쪽, 밑에서 11번째 줄 코드

    var nyArray --> var myArray

  • 156쪽, 11번째 줄

    예들 들어, --> 예를 들어

  • 180쪽, 밑에서 3번째 줄

    function Persion(name){ --> function Person(name){

  • p202, 그림 7.15, 상단 박스 2개의 캡션

    Person 생성자 ---> Function 생성자

    Person 프로토타입 객체 ---> Function 프로토타입 객체

  • p203, 그림 7.16, 좌측 중간 2개 박스중 우측 박스 캡션

    Person 프로토타입 객체 ---> Function 프로토타입 객체

  • p204, 그림 7.17, 좌측 중간 2개 박스중 우측 박스 캡션

    Person 프로토타입 객체 ---> Function 프로토타입 객체

  • p210, 그림 7.21, 우측 하단 박스내 맴버

    species : "korea" ---> nationality : "korea"

  • p210, 본문 상단 중간의 예제코드는 다음과 같이 바뀌어야 합니다.

    // Korean 정의
    function Korean(){
      // 인스턴스 멤버 정의는 없음
    }
    
    Korean.prototype = new Person();
    Korean.prototype.constructor = Korean;
    Korean.prototype.nationality = "korea";
    

    코드를 정리하면 아래와 같습니다.

    1. 부모 타입 정의
    function Person(){ 
      // 인스턴스 멤버 정의 가능
    } 
    
    //부모 타입의 프로토타입 멤버 정의
    Person.prototype.species = "human";
    
    1. 자식 타입 정의
    function Korean(){ 
      //인스턴스 멤버 정의 가능 
    }
    
    1. 자식 타입의 프로토타입 멤버 정의
    Korean.prototype = new Person();
    Korean.prototype.constructor = Korean;
    Korean.prototype.nationality = "korea";
    
    1. 자식 타입의 인스턴스 생성
    var p = new Korean();
    
  • p211, 그림 7.22, 우측 최하단 박스 캡션

    Korean 프로토타입 객체 --> Korean 프로토타입 객체(Person의 인스턴스) 혹은 Person의 인스턴스

  • p211, 그림 7.22, 우측 최하단 박스내 맴버

    species : "korea" ---> nationality : "korea"

  • p211, 그림 7.22

    좌측 중간(Person 생성자)과 하단(Korean 생성자) 박스 사이의 상속 화살표 설명: 이번 그림에서는 생성자 박스간의 상속 화살표는 별로 의미가 없습니다. 대신에 인스턴스 멤버 상속을 설명하는 그림 7.23 에 있어야 합니다.p215 본문의 예제 코드는 다음과 같이 바뀌어야 합니다.

    // Person 생성자
    function Person(name){
      this.name = name;
    }
    
    // Person의 프로토타입 멤버
    Person.prototype.species = "human";
    
    // Korean 생성자
    function Korean(name, city) {
      // 인스턴스 멤버 상속
      Person.apply(this, [name]); // 또는 Person.call(this, name );
    
      // Korean의 인스턴스 멤버
      this.city = city;
    }
    
    // 프로토타입 멤버 상속
    Korean.prototype = new Person();
    Korean.prototype.constructor = Korean
    Korean.prototype.nationality = "korea";
    
    // 다음 코드는 상속 구현에서 선택적이다(설명 참조)
    delete Korean.prototype.name;
    
  • p216, 그림 7.23, 우측 위에서 세번째 박스 캡션

    Korean 프로토타입 객체 ---> Korean 프로토타입 객체 (Person의 인스턴스) 혹은 Person 의 인스턴스

  • 216쪽, 하단 코드 첫 번째 줄

    var mySon = new Korean("달봉이", "seaoul"); --> var mySon = new Korean("달봉이", "seoul");

  • p216, 하단의 코드 마지막 줄은 다음과 같이 바뀌어야 합니다.

    a; -> ["name", "city", "constructor", "nationality", "species"]

  • p235, 표8.1, 테이블 1열 헤더

    메서드 ---> 속성

  • p236, 표8.3 첫번째 칸 아래서 2번째 줄

    var ar2 = ar.concat(1, [2,3]); ---> var ar2 = ar1.concat(1, [2,3]);

  • p237, 표 8.3 3번째 열

    var var1 = ar1.pop(); --> var var1 = ar1.shift();

  • p254, 6번째 줄

    사용될지 모르는 라이브러를 만드는 --> 사용될지 모르는 라이브러리를 만드는

  • 262쪽, 2번째 줄

    모듈(moduel)이라는 것은 --> 모듈(module)이라는 것은

  • p264, 첫번째 예제 마지막줄

    })(); ---> };

  • 266쪽, 첫 번째 줄

    10장까지는 실행 환경과는 --> 9장까지는 실행 환경과는

  • p276, 하단 CSS 2번째 줄

    "color:grey;font: 20px 'Gulim,sans-serif;" ---> color:grey;font: 20px Gulim,sans-serif;

  • p278, 그림10.5 CSS 박스내

    "color.grey.font a: 20px … ---> color:grey;font: 20px …

  • p279, 하단 예제코드, 5,6번째 줄

    … type="text/자바스크립트" … ---> … type="text/javascript" …

  • p286, 하단 예제 코드

    예제 코드의 this는 window를 가리킵니다. 따라서 checked는 undefined이고, 결국 this.value에는 undefined가 할당됩니다.

  • p295, 예제 코드

    div1.onclick = function(e){
        e = e || event; // 세미콜론(;)이 누락됨
        var target = e.target || e.srcElement;
    
        if(e.target.className == 'd3') { 
          // e.target -> target // div3 클릭 핸들링 
        } else if (e.target.className == 'd2') {
          // e.target -> target // div2 클릭 핸들링 
        } else if(e.target.className == 'd1') { {
          // e.target -> target // div1 클릭 핸들링 
        } 
    }
    
  • p296, 본문 2번째 줄

    판단해서 적적할 핸들링 --> 판단해서 적절한 핸들링

  • p296, 하단 예제코드

    div1.onclick = function(e){
        e = e || event; // 세미콜론(;)이 누락됨
        var target = e.target || e.srcElement;
    
        if(event.target== this) {
          // event.target -> targetp
    
  • p298, 표 10.9의 4행 2열 첫 번째 줄

    캡처링 또는 비블링하는 동안 --> 캡처링 또는 버블링하는 동안

  • 308쪽, 3번째 줄

    선택 문법(설렉터 표현)을 --> 선택 문법(셀렉터 표현)을

  • 312쪽, 표 11.2의 3행 3열

    $(‘<div/>).appendTo(‘dody’); --> $(‘<div/>’).appendTo(‘body’);

  • 314쪽, 본문 중간 코드

    .find('.foo') --> .find('.a')

  • 325쪽, 하단 표 사용 예 코드들 selector 문자열에 공백은 전혀 다른 의미를 가질 수 있음

    :input 행 사용 예 열 $('form공백 :input') -> $('form:input')

    :button 행 사용 예 열 $('input:공백'button') -> $('input:button')

    :image 행 사용 예 열 $('input: 공백image') -> $('input:image')

  • p327, 1번째 줄

    $("input:checkbox:not(checked)") ---> $("input:checkbox:not(:checked)")

  • p327, 3번째 줄

    $("input:checkbox:[공백]checked") ---> $("input:checkbox:checked")

  • p327, 라디오 버튼 선택식 예제 3번째 줄

    $("input:radio:not(checked)") ---> $("input:radio:not(:checked)")

  • 335쪽, 밑에서 4번째 줄

    전달되는 인지인 --> 전달되는 인자인

  • 336쪽, 본문 예제 5번째 줄

    var divList = $("#divContainer > # divList"); --> var divList = $("#divContainer > #divList");

  • p344, 두번째 문단 제목

    eventPropagation() -> stopPropagation()

  • p352, 2번째 줄

    .is()를 사용할 수도 있다..attr() ---> .is()를 사용할 수도 있다.[공백].attr()

  • 356쪽, 본문 두 번째 예제(밑줄 추가)

    id="imgProfile" --> id="imgProfile"

    id="alias" --> id="alias"

    id="text" --> id="text"

  • 365쪽, 첫 번째 줄

    내부에 $(document0.ready( )에 --> 내부에 $(document).ready( )에

  • 374쪽, 10번째 줄

    만약 jQeuery 프로토타입 --> 만약 jQuery 프로토타입

  • 375쪽, 밑에서 3번째 줄

    element01.callback(agrs); --> element01.callback(args);

  • 389쪽, 찾아보기

    moduel --> module

관련 글


엮인 글

엮인 글 주소: http://wikibook.co.kr/javascript-oop/trackback/