자바스크립트 업그레이드 프로젝트

By | 2008년 7월 29일

자바스크립트 개발 능력은 Ctrl과 C를 동시에 누를 수 있는 능력이다.

예. 과거에는 그랬습니다. 자바스크립트 개발 능력이 곧, 어디엔가 존재하는 스크립트를 카피할 수 있는 능력을 의미하기도 했습니다.
하지만
이런 상태로 개발을 계속 하다보면 코드 양이 늘어나고, 브라우저에 로딩되는 속도가 느려질 테죠. 이때쯤 되면 ‘아차!’ 싶지만
그렇다고 속도가 느린 코드들을 삭제하면 웹 사이트 여기저기서 자바스크립트 오류가 발생합니다. 바로 총체적 난국이라고 할 수
있죠.

사용자 삽입 이미지
여러분도 자바스크립트로 개발하면서 이런 경험이 있을 겁니다.

  • 덕지덕지 기워놓은 스크립트 사이에 또다른 기능을 추가하자 코드 여기저기서 충돌이 발생한다.
  • 멋진 애플리케이션을 파이어폭스나 오페라 같은 브라우저에서 열자, 보기 흉하게 깨지고 제대로 작동하지도 않는다.
  • 모바일 환경같이 자바스크립트 지원이 빈약한 기기들도 우리가 만든 애플리케이션을 사용하게끔 하고 싶다.
  • 내가 방금 추가한 기능이 제대로 작동하는지 테스트할 방법이 없는 것 같아 불안하다.

혹시 지금도 그렇다면 이제 자바스크립트를 업그레이드 할 때입니다.

자바스크립트에 새 버전이 나왔냐구요? 아, 그렇지는 않습니다.
지금껏 자바스크립트를 자바스크립트답게 사용하지 않았으니, 이제는 제대로 사용해보자는 의미로 ‘자바스크립트 업그레이드’라는 수식을
붙여봤습니다만, 사실 자바스크립트를 업그레이드한다기보다는 자바스크립트 개발자가 업그레이드된다는 말이 맞을 겁니다.

. 원래부터 자바스크립트에 내재되어 있던 객체지향적인 파워를 이끌어낼 수 있는 개발자.
. 자바스크립트 코드도 테스트하고
디버깅하여 더욱 견고한 애플리케이션을 만들어내는 개발자.
. 브라우저에 구애받지 않으면서도 기능을 추가할 수 있는 개발자.
. 최악의
경우 자바스크립트를 사용할 수 없을 때라도 여전히 잘 작동하는 애플리케이션을 만드는 개발자.


jQuery
를 개발한 존 레식(John Resig)은 『프로 자바스크립트 테크닉』에서 여러분을 위와 같은 개발자로 업그레이드해주겠다고 약속합니다.

여러분이 이미 그런 수준이시라구요? 그렇다 해도 jQuery라는 멋진 라이브러리(자바스크립트 라이브러리 사용률 1위를 향해 무섭게 질주하고 있답니다)를 개발한 존 레식(John Resign)의
노하우를 전수받을 수 있는 기회를 놓치지는 마세요. 당장에라도 응용할 수 있는 예들이 여러분을 기다리고 있으니까요.

곧 출간될 『프로 자바스크립트 테크닉』을 기대하세요. ^^

책 내용은 아래에……
[#M_ more.. | less.. |1부 「현대적인 자바스크립트 개요」에서는 현대적인 자바스크립트란 무엇인지 설명하면서 책 전체의 내용을 소개합니다.

2부 「전문적인 자바스크립트 개발」에서는 객체지향 언어로서의 자바스크립트를 다루며, 자바스크립트만의 특징적인 기능들(프로토타입 상속 등)을 제대로 활용하는 방법과 배포를 위한 패키징, 디버깅과 테스트를 위한 도구를 소개합니다.

3
부 「Unobtrusive 자바스크립트」에서는 자바스크립트 개발에 필수 요소인, 문서 객체 모델(DOM)과 이벤트를 Unobtrusive하게 다루는 방법, CSS 다루기, 폼 기능 개선하기, 이미지 갤러리 만들기 등 실무에서 자주
접할만한 문제들을 다룹니다.

4부 「Ajax」에서는 브라우저에 독립적인 Ajax 기능을 구현하는 방법부터, 끝이
없는 블로그 기능과 라이브 블로깅 기능, 자동 완성 기능, Ajax 위키를 소개하면서 Ajax로 웹 애플리케이션의 기능을
향상시키고 서버 측 코드와 연동하는 방법까지를 다룹니다.

5부 「자바스크립트의 미래」에서는 몇몇 브라우저에서
지원하는 자바스크립트 1.6과 1.7의 기능들을 설명하며, 웹 페이지에 이미지를 그릴 수 있는 <canvas> 태그,
향상된 Ajax 기술인 Comet 등을 소개합니다.

6부 「부록」에는 DOM과 이벤트를 적절히 분류한 레퍼런스를 수록했고, 여러 브라우저의 특징과 현황을 설명합니다.

목차

옮긴이의 글

1부 현대적인 자바스크립트 개요
1장 현대적인 자바스크립트 프로그램
  1.1 객체지향 자바스크립트
  1.2 코드 테스트
  1.3 배포하기 위한 패키징
  1.4 Unobtrusive DOM 스크립팅
    DOM(Document Object Model)
    이벤트
    자바스크립트와 CSS
  1.5 Ajax
  1.6 브라우저 지원
  1.7 요약

2부 전문적인 자바스크립트 개발
2장 객체지향 자바스크립트
  2.1 언어 기능
    참조
    함수 오버로딩과 타입 검사
    유효범위
    클로저
    콘텍스트
  2.3 객체지향 기본
    객체
    객체 생성
  2.4 요약

3장 재사용 가능한 코드 작성하기
  3.1 객체지향 코드의 표준화
    프로토타입 상속
    클래스 상속
    Base 라이브러리
    Prototype 라이브러리
  3.2 패키징
    네임스페이스 만들기
    코드 정리
    압축
  3.3 배포
  3.4 요약

4장 디버깅과 테스트를 위한 도구
  4.1 디버깅
    에러 콘솔
    DOM 검사기
    파이어버그
    Venkman
  4.2 테스트
    JSUnit
    J3Unit
  4.3 요약

3부 Unobtrusive 자바스크립트
5장 문서 객체 모델
  5.1 문서 객체 모델에 대한 소개
  5.2 DOM 탐색하기
    DOM에서 공백 다루기
    간단한 DOM 탐색
    모든 HTML 엘리먼트에 직접 연결하기
    표준 DOM 메서드
  5.3 HTML DOM이 로딩되기를 기다리기
    페이지가 완전히 로딩되기를 기다리기
    대부분의 DOM이 로딩되기를 기다리기
    DOM이 완전히 불려오는 시점을 알아내기
  5.4 HTML 문서에서 엘리먼트 찾기
    클래스 이름으로 엘리먼트 찾기
    CSS 선택자를 기준으로 엘리먼트 찾기
    XPath
  5.5 엘리먼트의 내용 얻기
    엘리먼트 내부의 텍스트 얻기
    엘리먼트 내부의 HTML 얻기
  5.6 엘리먼트 어트리뷰트 다루기
    어트리뷰트 값을 얻어내거나 설정하기
  5.7 DOM 변경하기
    DOM을 사용하여 노드를 생성하기
    DOM 안에 삽입하기
    DOM에 HTML 집어넣기
    DOM에서 노드 제거하기
  5.8 요약

6장 이벤트
  6.1 자바스크립트 이벤트에 대한 소개
    비동기식 이벤트 vs. 스레드
    이벤트 단계
  6.2 공통적인 이벤트 기능들
    이벤트 객체
    this 키워드
    이벤트 버블 취소하기
    브라우저의 기본 동작을 덮어 쓰기
  6.3 이벤트 리스너 연결하기
    전통적인 연결 방법
    DOM 연결: W3C
    DOM 연결: IE
    addEvent와 removeEvent
  6.4 이벤트의 종류
  6.5 Unobtrusive DOM 스크립팅
    자바스크립트가 비활성화된 상황을 고려하기
    링크가 자바스크립트에 의존하지 않게 하기
    CSS가 비활성화된 경우에 주의하기
    이벤트 접근성
  6.6 요약

7장 자바스크립트와 CSS
  7.1 스타일 정보에 접근하기
  7.2 동적인 엘리먼트
    엘리먼트의 위치
    엘리먼트의 크기
    엘리먼트의 가시성
  7.3 애니메이션
    슬라이드 인
    페이드 인
  7.4 브라우저
    마우스 위치
    뷰포트
  7.5 드래그 앤 드롭
  7.6 라이브러리
    moo.fx와 jQuery
    스크립타큘러스
  7.7 요약

8장 폼 기능 개선하기
  8.1 폼 검증
    필수 입력 필드
    패턴 매칭
    규칙 집합
  8.2 에러 메시지 출력
    검증
    검증 시점
  8.3 사용성 개선
    호버 레이블
    필수 입력 항목 표시
  8.4 요약

9장 이미지 갤러리 만들기
  9.1 갤러리의 예
    Lightbox
    ThickBox
  9.2 갤러리 만들기
    Unobtrusive하게 로딩하기
    투명 오버레이
    배치된 박스
    열람
    슬라이드쇼
  9.3 요약


4부 Ajax
10장 Ajax 소개
  10.1 Ajax 사용하기
    HTTP 요청
    HTTP 응답
  10.2 응답 데이터 처리하기
  10.3 완전한 Ajax 패키지
  10.4 다른 데이터의 사용 예
    XML 기반의 RSS 피드
    HTML 주입기(Injector)
    JSON과 자바스크립트: 원격 실행
  10.5 요약

11장 Ajax로 블로그 강화하기
  11.1 끝이 없는 블로그
    블로그 템플릿
    데이터 소스
    이벤트 탐지
    요청
    결과
  11.2 라이브 블로깅
  11.3 요약

12장 자동 완성 검색
  12.1 자동 완성 검색의 예
  12.2 페이지 만들기
  12.3 키 입력 감시하기
  12.4 결과 받아오기
  12.5 결과 목록 탐색하기
    키보드 탐색
    마우스 탐색
  12.6 최종 결과
  12.7 요약

13장 Ajax 위키
  13.1 위키?
  13.2 데이터베이스와 대화하기
  13.3 Ajax 요청
  13.4 서버 측 코드
    응답 처리하기
    SQL 실행하고 서식화하기
  13.5 JSON 응답 처리하기
  13.6 또 다른 사례 연구 : 자바스크립트 블로그
  13.7 애플리케이션 코드
    핵심 자바스크립트 코드
    자바스크립트 SQL 라이브러리
    루비로 작성한 서버 측 코드
  13.8 요약

5부 자바스크립트의 미래
14장 자바스크립트는 어디로 가고 있나
  14.1 자바스크립트 1.6과 1.7
    자바스크립트 1.6
    자바스크립트 1.7
  14.2 웹 애플리케이션 1.0
    시계 만들기
    간단한 행성 시뮬레이션
  14.3 Comet
  14.4 요약


6부 부록
부록 A. DOM 레퍼런스
A.1 참고 자료
A.2 용어
A.3 전역 변수
A.4 DOM 탐색
A.5 노드 정보
A.6 어트리뷰트
A.7 DOM 변경

부록 B 이벤트 레퍼런스

B.1 참고 자료
B.2 용어
B.3 이벤트 객체
B.4 페이지 이벤트
B.5 UI 이벤트
B.6 마우스 이벤트
B.7 키보드 이벤트
B.8 폼 이벤트

부록 C 브라우저
C.1 최신 브라우저

찾아보기_M#]

.

10 thoughts on “자바스크립트 업그레이드 프로젝트

  1. Rhio.kim

    이 책은 javascript을 이용한 RichUI creator 라면 심도있게 한번 읽어 봐야할 서적입니다.

    실제로 javascript 개발을 위한 업그레이드가 될 수 있는 레퍼런스가 될 수 있는 도서입니다.

    Reply
  2. 프리버즈

    좋은 자바스크립트 책들이 쏟아져 나오네요.

    예전에 C++ in Depth 시리즈 쏟아져 나올때와 비슷한 즐거운 비명을 ㅋㅋㅋ

    Reply
  3. Outsider

    아~ 또 살준비를 해야겠군요..
    아직 자바스크립트 완벽가이드를 보고 있는데..
    프로토타입에 이어.. ㅎㅎㅎㅎ

    Reply
    1. ks.han

      아~ 목차가 그렇게 되어 있군요.
      예전에 정리한 거라서…. ^^;
      Unobtrusive의 번역어는 아직 협의 중입니다.

      Reply
    1. ks.han

      날짜까지는 아직 말씀드리기 어렵고, 인덱스가 마무리되었으니 조만간 발간일을 공지할 수 있지 않을까 합니다.
      조금만 더 기다려주시길…. ^^

      Reply
  4. 김제준

    질문있는데요.
    프로토타입 & 스크립타쿨러스 예제가
    jsp 로 되어 있나요 php나 다른걸로 되어 있나요?

    Reply
    1. 너굴;

      기본적인 모든 예제는 자바스크립트로 짜여있습니다만,
      고급 활용 예제에서는 서버 사이드가 루비 스크립트입니다.

      Reply

댓글 남기기