풀스택 자바스크립트 개발을 통해 최신 웹 개발 기법을 익힌다!

이 책은 『Rapid Prototyping with JS』와 『Express.js Guide』를 한데 묶은 책이다. '풀스택 자바스크립트 개발'이라는 표현으로 아우를 수 있는 최신 웹 개발 동향을 파악하는 데 이 책만큼 실제적인 접근법을 제공하는 책은 없을 것이다.

첫 번째 책인 『Rapid Prototyping with JS』에서는 프론트엔드 개발에 관한 개념 및 기초 기술을 익히고 클라이언트 측부터 서버 측까지 애플리케이션을 개발하고 클라우드 환경에 배포하는 과정을 실습을 통해 익힌다. 풀스택 자바스크립트 개발에 대한 감을 잡은 후, 두 번째 책인 『Express.js Guide』에서는 좀 더 전문적인 웹 애플리케이션을 개발하기 위해 Express.js 웹 프레임워크를 배운다. 『Express.js Guide』에는 Express.js의 개념과 API 레퍼런스, 다양한 웹 기술과의 연동, 풍부한 예제를 통해 실전 웹 애플리케이션 기법을 익힌다.

두 책은 자바스크립트를 이용해 클라이언트 측부터 서버 측까지 개발하는 모던 웹 개발에 독자가 손쉽게 발을 내딛을 수 있게 도울뿐더러 두 책을 모두 읽고 나면 독자는 풀스택 자바스크립트 개발자로 거듭날 수 있을 것이다.

두 책은 자바스크립트를 이용해 클라이언트 측부터 서버 측까지 개발하는 모던 웹 개발에 독자가 손쉽게 발을 내딛을 수 있게 돕는다.

앞부분의 『자바스크립트를 활용한 쾌속 프로토타이핑: 애자일 자바스크립트 개발』에서는 HTML, CSS, 자바스크립트 같은 기초적인 웹 기술과 더불어 다음과 같은 최신 프론트엔드 및 백엔드 기술을 이용해 자바스크립트 웹 및 모바일 소프트웨어 개발을 소개하고, 이를 통해 독자는 다양한 실제 예제를 중심으로 빠르게 자바스크립트 웹 개발을 시작할 수 있다.

뒷부분의 『Express.js 가이드: Express.js에 관한 종합 가이드』에서는 『자바스크립트를 활용한 쾌속 프로토타이핑』에서 배운 지식을 토대로 Node.js 기반 웹 프레임워크인 Express.js를 더 심층적으로 배운다. Express.js 프레임워크는 Node.js 기반 웹 프레임워크 가운데 사실상의 업계 표준으로서, Node.js로 대표되는 서버 측 자바스크립트 개발에서 빼놓지 않고 등장하는 주제다. 이 책은 이러한 Express.js만을 전문적으로 다룬 책으로서, Express.js API 레퍼런스 및 빠른 시작 가이드, 코드를 곁들여 자세히 설명한 20가지 이상의 예제 및 튜토리얼이 담겨 있다.

두 책을 통해 독자는 기초적인 풀스택 자바스크립트 개발의 기초를 다지고 Node.js를 기반으로 하는 실제 웹 애플리케이션을 개발하는 데 필수적인 Express.js 프레임워크를 깊이 있게 이해함으로써 실전 웹 애플리케이션 구축을 위한 준비를 마칠 수 있다.

★ 이 책에서 다루는 내용 ★

  • Node.js
  • MongoDB
  • Backbone.js
  • Parse.com
  • Heroku
  • Windows Azure
  • Express.js

아자트 마르다노프(Azat Mardanov)

아자트 마르다노프는 12년차 웹, 모바일, 소프트웨어 개발자다. 인포매틱스 학사 학위와 정보시스템 기술의 이학 석사 학위를 가지고 있으며, 폭넓은 실무 경험뿐 아니라 학술적으로도 깊이 있게 이해하고 있다. 현재 다큐사인(DocuSign)에서 선임 소프트웨어 엔지니어로 근무하고 있으며, 그가 속한 팀에서는 5000만 명이 사용하는 제품(DocuSign 웹앱)을 Node.js, Express.js, Backbone.js, CoffeeScript, Jade, Stylus, Redis를 이용해 재구축하는 일을 하고 있다. 여유가 있을 때는 구글에서 'express.js tutorial'로 검색했을 때 첫 번째로 나타나는 블로그인 webAppLog.com에 기술에 관한 글을 올린다. 아울러 Express.js 가이드와 Rapid Prototyping with JS, Oh My JS!를 썼다.

이대엽

책 만드는 일을 하고 있으며, 이따금 IT 관련 서적을 번역하기도 한다. 옮긴 책으로 『테스트 주도 개발로 배우는 객체 지향 설계와 실천』 『자바스크립트 개론』 『모듈라 자바』 『시작하세요! 맥 OS X 라이언』 『도메인 주도 설계』 『하이버네이트 완벽 가이드』 『개념을 잡아주는 프로그래밍 정석』 등이 있다.

《자바스크립트를 활용한 쾌속 프로토타이핑: 애자일 자바스크립트 개발》

  • [1부] 시작하기
    • ▣ 1장: 기초
      • 1.1 프론트엔드의 정의
        • 1.1.1 큰 그림
        • 1.1.2 HTML
        • 1.1.3 CSS
        • 1.1.4 자바스크립트
      • 1.2 애자일 방법론
        • 1.2.1 스크럼
        • 1.2.2 테스트 주도 개발
        • 1.2.3 지속적인 배포와 통합
        • 1.2.4 짝 프로그래밍
      • 1.3 백엔드의 정의
        • 1.3.1 Node.js
        • 1.3.2 NoSQL과 MongoDB
        • 1.3.3 클라우드 컴퓨팅
        • 1.3.4 HTTP 요청과 응답
      •  
    • ▣ 2장: 준비
      • 2.1 로컬 설정
        • 2.1.1 개발 폴더
        • 2.1.2 브라우저
        • 2.1.3 IDE와 텍스트 편집기
        • 2.1.4 버전 관리 시스템
        • 2.1.5 로컬 HTTP 서버
        • 2.1.6 데이터베이스: MongoDB
        • 2.1.7 기타 구성요소
      • 2.2 클라우드 설정
        • 2.2.1 SSH 키
        • 2.2.2 깃허브
        • 2.2.3 윈도우 애저
        • 2.2.4 헤로쿠
        • 2.2.5 Cloud9
      •  
    • [2부] 프론트엔드 프로토타이핑
      • ▣ 3장: jQuery와 Parse.com
      • 3.1 정의
        • 3.1.1 자바스크립트 객체 표기법
        • 3.1.2 Ajax
        • 3.1.3 크로스 도메인 호출
      • 3.2 jQuery
      • 3.3 트위터 부트스트랩
      • 3.4 LESS
        • 3.4.1 변수
        • 3.4.2 믹스인
        • 3.4.3 연산
      • 3.5 서드파티 API(트위터)와 jQuery를 이용하는 예제
      • 3.6 Parse.com
      • 3.7 Parse.com을 이용한 채팅 애플리케이션 소개
      • 3.8 Parse.com을 이용한 채팅 애플리케이션: REST API와 jQuery 버전
      • 3.9 깃허브에 변경사항 반영하기
      • 3.10 윈도우 애저에 배포하기
      • 3.11 헤로쿠로 배포하기
      • 3.12 메시지 업데이트와 삭제
      •  
    • ▣ 4장: Backbone.js 소개
      • 4.1 맨 처음부터 Backbone.js 앱 설정하기
        • 4.1.1 의존성
      • 4.2 컬렉션 활용
      • 4.3 이벤트 바인딩
      • 4.4 Underscore.js를 이용한 뷰와 서브뷰
      • 4.5 리팩터링
      • 4.6 개발을 위한 AMD와 Require.js
      • 4.8 초간단 Backbone.js 입문자 도구 모음
      •  
    • ▣ 5장: Backbone.js와 Parse.com
      • 5.1 Parse.com을 이용한 채팅: 자바스크립트 SDK와 Backbone.js 버전
      • 5.2 채팅 앱을 PaaS에 배포하기
      • 5.3 채팅 앱 개선하기
      •  
  • [3부] 백엔드 프로토타이핑
    • ▣ 6장: Node.js와 MongoDB
      • 6.1 Node.js
        • 6.1.1 Node.js를 이용한 “헬로 월드” 앱 만들기
        • 6.1.2 Node.js의 핵심 모듈
        • 6.1.3 노드 패키지 관리자
        • 6.1.4 PaaS에 “헬로 월드” 배포하기
        • 6.1.6 헤로쿠에 배포하기
      • 6.2 채팅: 런타임 메모리 버전
      • 6.3 채팅 앱에 대한 테스트 케이스
      • 6.4 MongoDB
        • 6.4.1 MongoDB 셸
        • 6.4.2 MongoDB 네이티브 드라이버
        • 6.4.3 헤로쿠에서 MongoDB 사용하기: MongoHQ
        • 6.4.4 BSON
      • 6.5 채팅: MongoDB 버전
      •  
    • ▣ 7장: 종합 실습
      • 7.1 서로 다른 도메인에 배포하기
      • 7.2 엔드포인트 변경하기
      • 7.3 채팅 애플리케이션
      • 7.4 배포
      • 7.5 같은 도메인에 배포하기
      •  
    • ▣ 8장: 보너스: Webapplog 글
      • 8.1 Node.js의 비동기성
        • 8.1.2 비동기적인 코딩 방식
      • 8.2 Monk를 이용한 MongoDB 마이그레이션
      • 8.3 Mocha를 이용한 Node.js에서의 TDD
        • 8.3.1 테스트 주도 개발은 누구에게 필요한가?
        • 8.3.2 빠른 시작 가이드
      • 8.4 Wintersmith 정적 사이트 생성기
        • 왜 정적 사이트 생성기인가?
        • 8.4.1 Wintersmith 시작하기
        • 8.4.2 그 밖의 정적 사이트 생성기
      • 8.5 Express.js 소개: Monk와 MongoDB를 활용한 간단한 REST API 앱
        • 8.5.1 Express.js와 Monk를 이용한 REST API 앱
      • 8.6 Express.js 소개: 매개변수, 오류 처리, 기타 미들웨어
        • 8.6.1 요청 핸들러
        • 8.6.2 매개변수 미들웨어
        • 8.6.3 오류 처리
        • 8.6.4 기타 미들웨어
        • 8.6.5 추상화
      • 8.7 Mongoskin과 Express.js를 활용해 Node.js와 MongoDB로 개발하는 JSON REST API 서버
        • 8.7.1 테스트 커버리지
        • 8.7.2 의존성
        • 8.7.3 구현
        • 8.7.4 결론
      • 8.8 Node.js MVC: Express.js + Derby 헬로 월드 강좌
        • 8.8.1 Node MVC 프레임워크
        • 8.8.2 Derby 설치
        • 8.8.3 파일 구조
        • 8.8.4 의존성
        • 8.8.5 뷰
        • 8.8.6 메인 서버
        • 8.8.7 Derby 애플리케이션
        • 8.8.8 헬로 월드 앱 실행하기
        • 8.8.9 백엔드로 값 전달하기
      •  
    • ▣ 결론 및 참고자료
      • 결론
      • 기타 읽을거리
      • 자바스크립트 관련 자료와 무료 전자책
      • 자바스크립트 책
      • Node.js 관련 자료와 무료 전자책
      • Node.js 관련 책
      • 온라인 강의와 과정
      • 스타트업 관련 책과 블로그
      •  

《Express.js 가이드: Express.js에 관한 종합 가이드》

  • [1부] 시작하기
    • ▣ 1장: Express.js란 무엇인가?
      •  
    • ▣ 2장: Express.js의 작동 방식
      •  
    • ▣ 3장: 설치
      •  
    • ▣ 4장: 헬로 월드 예제
      •  
    • ▣ 5장: CLI
      •  
    • ▣ 6장: 파일 변경 감시
      •  
    • ▣ 7장: MVC 구조와 모듈
      •  
  • [2부] 인터페이스
    • ▣ 8장: 환경설정
      • 8.1 app.set()과 app.get()
      • 8.2 app.enable()과 app.disable()
      • 8.3 app.enabled()와 app.disabled()
      •  
    • ▣ 9장: 설정
      • 9.1 env
      • 9.2 view cache
      • 9.3 view engine
      • 9.4 views
      • 9.5 trust proxy
      • 9.6 jsonp callback name
      • 9.7 json replacer와 json spaces
      • 9.8 case sensitive routing
      • 9.9 strict routing
      • 9.10 x-powered-by
      • 9.11 etag
      • 9.12 subdomain offset
      •  
    • ▣ 10장: 환경
      • 10.1 app.configure()
      •  
    • ▣ 11장: 미들웨어 적용
      • 11.1 app.use()
      •  
    • ▣ 12장: 미들웨어의 유형
      • 12.1 express.compress()
      • 12.2 express.logger()
      • 12.3 express.json()
      • 12.4 express.urlencoded()
      • 12.5 express.multipart()
      • 12.6 express.bodyParser()
      • 12.7 express.cookieParser()
      • 12.8 express.session()
      • 12.9 express.csrf()
      • 12.10 express.static()
      • 12.11 express.basicAuth()
      • 12.12 기타 Express.js/Connect 미들웨어
      •  
    • ▣ 13장: 다양한 템플릿 엔진
      • 13.1 app.engine()
      •  
    • ▣ 14장: 매개변수 추출
      • 14.1 app.param()
      •  
    • ▣ 15장: 라우팅
      • 15.1 app.VERB()
      • 15.2 app.all()
      • 15.3 URL 끝에 붙는 슬래시
      •  
    • ▣ 16장: 요청 핸들러
      •  
    • ▣ 17장: 요청
      • 17.1 질의
      • 17.2 req.params
      • 17.3 req.body
      • 17.4 req.files
      • 17.5 req.route
      • 17.6 req.cookies
      • 17.7 req.signedCookies
      • 17.8 req.header()와 req.get()
      • 17.9 기타 속성과 메서드
      •  
    • ▣ 18장: 응답
      • 18.1 res.render()
      • 18.2 res.locals()
      • 18.3 res.set()
      • 18.4 res.status()
      • 18.5 res.send()
      • 18.6 res.json()
      • 18.7 res.jsonp()
      • 18.8 res.redirect()
      • 18.9 기타 응답 메서드와 프로퍼티
      •  
    • ▣ 19장: 오류 처리
      •  
    • ▣ 20장: 앱 실행
      • 20.1 app.locals()
      • 20.2 app.render()
      • 20.3 app.routes
      • 20.4 app.listen()
      •  
  • [3부] 팁과 트릭
    • ▣ 21장: 추상화
      •  
    • ▣ 22장: 모듈에서 데이터베이스 사용하기
      •  
    • ▣ 23장: 키와 비밀번호
      •  
    • ▣ 24장: 스트림
      •  
    • ▣ 25장: 레디스
      •  
    • ▣ 26장: 인증
      •  
    • ▣ 27장: 클러스터를 이용한 다중 스레드 처리
      •  
    • ▣ 28장: Consolidate.js
      •  
    • ▣ 29장: 스타일러스, LESS와 SASS
      • 29.1 스타일러스
      • 29.2 LESS
      • 29.3 SASS
      •  
    • ▣ 30장: 보안
      • 30.1 CSRF
      • 30.2 권한
      • 30.3 헤더
      •  
    • ▣ 31장: Socket.IO
      •  
    • ▣ 32장: 도메인
      •  
  • [4부] 튜토리얼과 예제
    • ▣ 33장: 인스타그램 갤러리
      • 33.1 파일 구조
      • 33.2 의존성
      • 33.3 Node.js 서버
      • 33.4 Handlebars 템플릿
      • 33.5 결론
      •  
    • ▣ 34장: Todo 앱
      • 34.1 골격 잡기
      • 34.2 MongoDB
      • 34.3 구조
      • 34.4 app.js
      • 34.5 라우팅
      • 34.6 제이드
      • 34.7 LESS
      • 34.8 결론
      •  
    • ▣ 35장: REST API
      • 35.1 테스트 커버리지
      • 35.2 의존성
      • 35.3 구현
      • 35.4 결론
      •  
    • ▣ 36장: 핵홀
      • 36.1 핵홀이란 무엇인가?
      • 36.2 핵홀 실행하기
      • 36.3 구조
      • 36.4 Express.js 앱
      • 36.5 라우팅
        • 36.5.1 index.js
        • 36.5.2 auth.js
        • 36.5.3 main.js
        • 36.5.4 users.js
        • 36.5.5 applications.js
        • 36.5.6 posts.js
      • 36.6 Mongoose 모델
      • 36.7 Mocha 테스트
      • 36.8 결론
      •  
    • ▣ 부록A: ExpressWorks
      • ExpressWorks란 무엇인가?
      • 설치(권장하는 방법)
      • 로컬 설치(고급)
      • 사용법
      • 사용법
      • 초기화
      • 실습 단계
      • Hello World
      • Jade
      • Good Old Form
      • Static
      • Stylish CSS
      • Param Pam Pam
      • What’s in Query
      • JSON Me
      •  
    • ▣ 참고자료
      • 기타 Node.js 프레임워크
      • Node.js 관련 책
      • 자바스크립트 관련 책
  • 135쪽 11번째 줄, apple-item.view.js 코드

    var appleItemView = Backbone.View.extend({
      tagName: 'li',
      // template: _.template(''
      //        +'<a href="#apples/<%=name%>" target="_blank">'
      //       +'<%=name%>'
      //       +'</a>&nbsp;<a class="add-to-cart" href="#">buy</a>'),
      template: _.template(appleItemTpl),
    
      events: {
        'click .add-to-cart': 'addToCart'
      },
      render: function() {
        this.$el.html(this.template(this.model.attributes));
      },
      addToCart: function(){
        this.model.collection.trigger('addToCart', this.model);
      }
    });
    
  • 145쪽 2번째 줄, apple-item.view.js 코드

    define(['apple-item.tpl'],function(appleItemTpl) {
    return Backbone.View.extend({
          tagName: 'li',
          // template: _.template(''
          //        +'<a href="#apples/<%=name%>" target="_blank">'
          //       +'<%=name%>'
          //       +'</a>&nbsp;<a class="add-to-cart" href="#">buy</a>'),
          template: _.template(appleItemTpl),
    
          events: {
            'click .add-to-cart': 'addToCart'
          },
          render: function() {
            this.$el.html(this.template(this.model.attributes));
          },
          addToCart: function(){
            this.model.collection.trigger('addToCart', this.model);
          }
        });
    });
    

예제코드 관련 GitHub 페이지

  1. 《자바스크립트를 활용한 쾌속 프로토타이핑: 애자일 자바스크립트 개발》

  2. 《Express.js 가이드: Express.js에 관한 종합 가이드》