중급 개발자를 위한 MEAN 스택 공략(acorn+PACKT 시리즈)

★ 이 책에서 다루는 내용 ★



■ 익스프레스(Express) 애플리케이션 설정과 실행

■ 애플리케이션 데이터를 저장하고 인출하기 위한 MongoDB 사용

■ 익스프레스 애플리케이션을 MongoDB에 연결하고 몽구스(Mongus) 모델을 사용

■ 사용자 인증을 관리하고 패스포트를 사용한 다양한 로그인 옵션 제공

■ MEAN 프로젝트에서 AngularJS 애플리케이션의 구조화와 활용

■ Socket.io를 사용한 클라이언트와 서버 사이의 실시간 통신

■ 애플리케이션의 익스프레스와 AngularJS 엔티티 테스트

■ 인기 있는 외부 도구를 사용한 MEAN 애플리케이션의 효율적인 개발



★ 이 책의 대상 독자 ★



MEAN 스택을 사용해 현대적인 웹 애플리케이션을 구축하는 방법을 배우는 데 관심이 많은 웹 또는 풀스택 자바스크립트 개발자에게 적합하다.



★ 이 책의 구성 ★



1장. 'MEAN 소개'에서는 MEAN 스택을 소개하고 전제 조건에 맞춰 운영체제별로 다양한 소프트웨어 설치 방법을 보여준다.



2장. '노드 시작'에서는 노드의 기초와 웹 애플리케이션 개발을 위한 노드 사용 방식을 설명한다.



3장. '익스프레스 웹 애플리케이션 구축'에서는 MVC 패턴을 중심으로 익스프레스 애플리케이션 생성과 구조화 방법을 알아본다.



4장. 'MongoDB 소개'에서는 MongoDB의 기본과 애플리케이션 데이터를 저장하기 위한 MongoDB 사용 방법을 알아본다.



5장. '몽구스 소개'에서는 익스프레스 애플리케이션을 MongoDB 데이터베이스와 연결하기 위한 몽구스 사용 방법을 보여준다.



6장. '패스포트를 사용한 사용자 인증 관리'에서는 사용자의 인증 관리와 다양한 로그인 옵션 제공 방법을 설명한다.



7장. 'AngularJS 소개'에서는 익스프레스 애플리케이션과 연계한 AngularJS 애플리케이션 구현 방법을 알아본다.



8장. 'MEAN CRUD 모듈 생성'에서는 MEAN 애플리케이션 엔티티 작성과 사용 방법을 설명한다.



9장. 'Socket.io을 사용한 실시간 기능 추가'에서는 클라이언트와 서버 사이의 실시간 통신 기능 작성과 사용 방법을 알아본다.



10장. 'MEAN 애플리케이션 테스트'에서는 MEAN 애플리케이션의 다양한 부문을 자동으로 테스트하는 방법을 알아본다.



11장. 'MEAN 애플리케이션 자동화와 디버깅'에서는 MEAN 애플리케이션의 더욱 효율적인 개발 방법을 설명한다.



★ 지은이의 말 ★



1995년 봄으로 돌아가보면, 당시 웹 브라우저는 오늘날 웹 브라우저와 상당히 달랐다. (팀 버너스리(Tim Berners-Lee)가 작성한 첫 인터넷 브라우저인) 월드 와이드 웹이 등장한 지 4년이 지났고, 모자이크의 첫 버전이 출시된 지 2년이 지났으며, 인터넷 익스플로러 1.0은 몇 달 후에야 나올 상황이었다. 월드 와이드 웹은 인기를 끌기 시작했고, 비록 몇몇 대기업이 이 분야에 관심을 보이긴 했지만, 그 당시 파괴적 혁신을 이끄는 주체는 넷스케이프라는 작은 회사였다.

이미 넷스케이프의 인기 있는 브라우저인 넷스케이프 내비게이터는 두 번째 버전을 위한 작업이 진행되고 있었으며, 클라이언트 엔지니어링 팀과 공동 창립자인 마크 안드레센(Marc Andreessen)은 내비게이터 2.0에 프로그래밍 언어를 내장해야 마땅하다고 결정했다. 이 작업을 할당받은 소프트웨어 엔지니어인 브랜든 아이크(Branden Eich)는 1995년 5월 6일부터 15일까지 열흘 동안 이 작업을 완료했다. 언어 이름은 모카(Mocha)에서 출발해 라이브스크립트(LiveScript)를 거쳐 결국 자바스크립트(JavaScript)가 되었다.

넷스케이프 내비게이터 2.0은 1995년 9월에 출시되었으며, 우리가 오늘날 웹 브라우저라고 인지하는 형태로 변신했다. 1996년 8월에 인터넷 익스플로러 3.0이 자바스크립트의 독자적인 구현을 소개했고, 1996년 11월에 넷스케이프는 표준화 목적으로 자바스크립트를 ECMA에 제출했다고 발표했다. 1997년 6월 ECMA-262 명세가 발표되었고, 자바스크립트는 웹을 위한 업계 표준 프로그래밍 언어가 되었다.

여러 해 동안, 자바스크립트는 아마추어를 위한 프로그래밍 언어로 폄하되었다. 자바스크립트의 아키텍처, 파편화된 구현, 당시의 '아마추어'급 개발자 등으로 인해 전문적인 프로그래머들은 자바스크립트를 폄하해 왔다. 하지만 때마침 Ajax가 도입되고, 구글이 지메일과 구글 맵스 애플리케이션을 2000년대 중반에 출시하자, Ajax 기술을 사용해 웹 사이트를 웹 애플리케이션으로 바꿀 수 있다는 사실이 불현듯 확고해졌다. 이는 새로운 웹 개발자 세대들이 자바스크립트 개발을 한 단계 끌어올리게 하는 계기가 되었다.

제이쿼리(jQuery)나 프로토타입(Prototype)과 같은 유틸리티 라이브러리로 대표되는 1세대로 시작한 모던 웹 개발 방식은 구글이 훌륭한 크롬(Chrome) 브라우저와 V8 자바스크립트 엔진을 2008년 말에 출시하면서 곧바로 탄력을 받기 시작했다. JIT 컴파일 기능을 탑재한 V8 엔진은 자바스크립트 성능을 엄청나게 개선했다. 이는 자바스크립트 개발에 신기원을 열었다.

2009년은 자바스크립트 분야에 경이적인 해였다. 노드(Node.js)와 같은 플랫폼이 갑자기 등장하면서 개발자들은 자바스크립트를 서버에서 구동할 수 있게 됐다. MongoDB와 같은 데이터베이스가 인기를 얻으면서 JSON 저장소 사용을 단순하게 만들었고, AngularJS와 같은 프레임워크는 강력한 신형 브라우저를 활용하기 시작했다. 등장한 지 거의 20년이 지난 오늘날, 자바스크립트는 쓰이지 않는 곳이 없다. 작은 스크립트를 수행하는 '아마추어' 프로그래밍 언어로만 인식되어온 자바스크립트는 이제 전 세계에서 가장 인기 있는 프로그래밍 언어 중 하나로 자리잡았다. 재능있는 엔지니어들의 현신적인 참여와 함께 오픈소스 협업 도구의 출현은 자바스크립트 커뮤니티를 세상에서 가장 풍부한 공동체로 손꼽히게 만들었으며, 여러 기여자가 뿌린 씨앗은 이제 폭발적인 창의력으로 활짝 피어나고 있다.

실질적인 영향력은 거대하다. 한때 각자 맡은 분야의 전문가로서 파편화된 팀을 이뤘던 개발자들은 이제 더 린(lean)하고 더 애자일한 소프트웨어를 개발할 수 있는 능력을 갖춘 단일 팀을 구성했고 전 계층을 아우르는 단일 언어를 사용하게 되었다.

풀스택 자바스크립트 프레임워크도 많이 등장했다. 훌륭한 팀이 만든 것도 있고, 중요한 문제를 해결한 프레임워크도 나왔지만, 어느 것도 MEAN 스택만큼 개방적이고 모듈화된 것은 없었다. MEAN 스택의 개념은 단순하다. 데이터베이스로 MongoDB를, 웹 프레임워크로 익스프레스(Express)를, 프론트엔드 프레임워크로 AngularJS를, 플랫폼으로 노드를 택한다. 그리고 모던한 소프트웨어 개발에 필요한 유연성을 보장하는 현대적인 접근 방식으로 이 모두를 하나로 결합할 것이다. MEAN의 접근 방식은, 모듈 하나가 쓸모가 없어지면 더 잘 맞는 모듈로 매끄럽게 대체할 수 있는, 안정적이며 최신으로 유지되는 오픈소스 모듈을 둘러싼 공동체에 의존한다.

자바스크립트 혁명에 참여한 여러분을 환영한다. 이 책에서는 여러분이 풀스택 자바스크립트 개발자로 성장하기 위해 필요한 도움을 아끼지 않을 것이다.

이 책에서는, 환경을 설정하고 최고의 모듈을 사용해 다양한 MEAN 구성 요소를 하나로 연결하는 방법을 설명할 것이다. 코드를 깨끗하면서 단순하게 유지하는 우수 관례와 일반적인 함정을 회피하는 방법을 소개할 것이다. 인증 계층을 만들고 첫 엔티티를 추가하는 방법도 살펴볼 것이다. 자바스크립트 비차단(nonblocking) 아키텍처를 지렛대로 삼아 서버와 클라이언트 애플리케이션 사이의 실시간 통신을 구현하는 방법을 설명할 것이다. 마지막으로 적절한 테스트로 코드를 검토하는 방법과 개발 과정을 자동화하기 위해 사용할 도구가 무엇인지를 보여줄 것이다.



★ 옮긴이의 말 ★

요즘 한창 사람들의 관심이 집중되고 있는 다재다능한 풀스택 엔지니어가 되려면 프론트엔드부터 백엔드까지 전반적인 기술을 아우르는 방대한 주제를 이해해야 하므로 폭넓게 학습해야 한다. 기술은 계속 발전하고 있으며 알아야 할 내용은 끝이 없기 때문에 어떻게 시작할지 막막하기만 한 것이 현실이다. 다행히 MEAN이라는 스택이 등장해서 개발자들에게 한 가닥 희망을 주고 있다. MEAN은 MongoDB, Express, AngularJS, Node.js의 첫 글자를 따서 만들었으며, 과거 웹 개발에 유명했던 LAMP(Linux, Apache, MySQL, PHP(또는 Perl))에 비견할만한 지위를 갖추고 있다. MEAN의 가장 중요한 특성은 바로 모든 구성 요소가 공통 언어로 자바스크립트를 사용한다는 점이다. 일단 자바스크립트만 알고 있으면, 프론트엔드부터 백엔드까지 상이한 프로그래밍 언어 문제로 곤란을 겪는 일은 없을 것이다.

여러 구성 요소에서 프로그래밍 언어가 통일되어 있더라도 모든 것을 처음부터 다시 쌓아 올려야 한다면 문제가 될 것이다. 다행히도 MEAN은 노드에서 기본으로 제공하는 NPM이라는 백엔드 패키지 관리자와 바우어(Bower)라는 프론트엔드 패키지 관리자를 제공해 외부 라이브러리를 자유롭게 활용하게 도와준다. MEAN용으로 개발된 엄청나게 많은 오픈소스 개발 도구와 라이브러리가 존재하므로, 개발자를 든든하게 뒷받침해준다. 매번 처음부터 새로 만들지 않고 검증된 기성 부품을 잘 활용해 원하는 서비스와 제품을 만들면 되기 때문에 생산성이 엄청나게 높아진다. 모든 것을 최대한 단순하게 가져간다는 노드의 철학은 작은 것이 아름답다는 유닉스의 철학과 일맥 상통하므로 다양한 유틸리티와 라이브러리를 연결하는 과정에서 전체는 부분의 합보다 크다는 상승 작용을 느낄 수 있을 것이다.

이 책은 자바스크립트와 MEAN 스택에 대한 기본 지식이 있는 개발자에게 적합한 구성을 택하고 있다. 먼저 MEAN을 구성하는 개별 구성 요소를 공략한다. 노드, 익스프레스 웹 애플리케이션, MongoDB, AngularJS를 사용한 개발 방식을 소개한다. 또한 익스프레스 애플리케이션과 MongoDB를 연결하는 몽구스와 실제 상용 환경에서 요구하는 사용자 인증 관리와 소셜 로그인을 위한 패스포트에 대해 추가적으로 설명한다. 그러고 나서 앞서 설명한 개별 구성 요소를 모두 연결해 CRUD 모듈 생성 방법을 설명한다. 이런 서술 방식은 MEAN 개별 구성 요소에 대한 진입 장벽을 낮춘 다음에 실제로 여러 구성 요소를 합치기 때문에 MEAN 스택 학습 시간을 상당히 줄여주는 효과가 있다. 전반적인 개발 역량을 끌어올린 다음에 Socket.io를 사용한 실시간 기능 추가와 테스트, 자동화, 디버깅으로 마무리한다. 웹 브라우저 단에서 데이터베이스 단까지 전체를 다루며, 구현에서 테스트에 이르는 개발 과정을 아우르기 때문에 이 책 한 권이면 MEAN 스택을 단기간에 독파할 수 있을 것이다.

이 책에 앞서 독자 여러분들께 선보인 『MEAN 스택을 사용한 모던 웹 개발 입문』(에이콘출판, 2015)과 함께 읽어보면 도움이 될 것이다. 이 책과는 조금 다른 관점으로 MEAN을 바라볼 수 있을 것이다. 아무쪼록 MEAN 스택을 사용해 생산성을 높이고 성능과 확장성도 덤으로 얻는 좋은 성과를 얻기 바란다. 독자 여러분의 행운을 빈다!

1 MEAN 소개

__3계층 웹 애플리케이션 개발

__자바스크립트의 진화

__MEAN 소개

__MongoDB 설치

____윈도우에서 MongoDB 설치

________수동으로 MongoDB 시작

________윈도우 서비스로 MongoDB 시작

____맥 OS X와 리눅스에서 MongoDB 설치

________바이너리로 MongoDB 설치

________패키지 관리자를 사용한 MongoDB 설치

____MongoDB 셸 사용

__노드 설치

____윈도우에서 노드 설치

____맥 OS X에서 노드 설치

____리눅스에서 노드 설치

____노드 시작

__NPM 소개

____NPM 사용

____NPM 설치 과정

____package.json 파일을 사용한 의존성 관리

__정리



2 노드 시작

__노드 소개

____자바스크립트 이벤트 구동 프로그래밍

____노드 이벤트 구동 프로그래밍

__자바스크립트 클로저

__노드 모듈

____CommonJS 모듈

____노드 핵심 모듈

____노드 외부 모듈

____노드 파일 모듈

____노드 폴더 모듈

__노드 웹 애플리케이션 개발

____커넥트 모듈 만나기

________커넥트 미들웨어

________커넥트 미들웨어의 순서 이해

________커넥트 미들웨어 마운트

__정리



3 익스프레스 웹 애플리케이션 구축

__익스프레스 소개

__익스프레스 설치

__첫 익스프레스 애플리케이션 생성

__애플리케이션, 요청, 응답 객체

____애플리케이션 객체

____요청 객체

____응답 객체

__외부 미들웨어

__MVC 패턴 구현

____애플리케이션 폴더 구조

________수평 폴더 구조

________수직 폴더 구조

________파일 이름 관례

________수평 폴더 구조 구현

__익스프레스 애플리케이션 구성

____환경 구성 파일

__뷰 생성

____뷰 시스템 구성

____EJS 뷰 생성

__정적 파일 서비스

__세션 구성

__정리



4 MongoDB 소개

__NoSQL 소개

__MongoDB 소개

__MongoDB의 핵심 기능

____BSON 형식

____MongoDB와 임의 질의

____MongoDB 색인

____MongoDB 복제 집합

____MongoDB 샤딩

__MongoDB 셸

__MongoDB 데이터베이스

__MongoDB 콜렉션

__MongoDB CRUD 연산

____새로운 다큐먼트 생성

____insert( )를 사용한 다큐먼트 생성

____update( )를 사용한 다큐먼트 생성

____save( )를 사용한 다큐먼트 생성

__다큐먼트 읽기

____모든 콜렉션 다큐먼트 검색

____동등 구문 사용

____질의 연산자 사용

____AND/OR 질의 생성

__기존 다큐먼트 갱신

____update( )를 사용한 다큐먼트 갱신

____save( )를 사용한 다큐먼트 갱신

__다큐먼트 삭제

____모든 다큐먼트 삭제



5 몽구스 소개

__몽구스 소개

____몽구스 설치

____MongoDB에 연결

__몽구스 스키마 이해

____사용자 스키마와 모델 생성

____User 모델 등록

____save()를 사용한 새로운 사용자 생성

________find( )를 사용한 여러 사용자 다큐먼트 검색

________find( )를 사용한 고급 질의

____findOne()을 사용한 단일 사용자 다큐먼트 읽기

____기존 사용자 다큐먼트 갱신

____기존 사용자 다큐먼트 삭제

__몽구스 스키마 확장

____기본값 정의

____스키마 변경자 활용

________미리 정의된 변경자

________맞춤식 설정 변경자

________맞춤식 인출 변경자

____가상 속성 추가

____색인을 사용한 질의 최적화

__맞춤식 모델 메소드 정의

____맞춤식 정적 메소드 정의

____맞춤식 인스턴스 메소드 정의

__모델 검증

____미리 정의된 검증기

____맞춤식 검증기

__몽구스 미들웨어 활용

____pre 미들웨어 활용

____post 미들웨어 활용

__몽구스DBRef 활용

__정리



6 패스포트를 사용한 사용자 인증 관리

__패스포트 소개

____패스포트 설치

____패스포트 구성

__패스포트 전략 이해

____패스포트의 지역 전략 사용

________패스포트의 지역 전략 모듈 설치

________패스포트의 지역 전략 구성

____User 모델 변경

____인증 뷰 생성

____User 컨트롤러 변경

________플래시 오류 메시지 출력

____사용자 라우트 연결

__패스포트 OAuth 전략 이해

____OAuth 전략 설정

________OAuth 사용자 생성 처리

________패스포트의 페이스북 전략 사용

________패스포트의 트위터 전략 등록

________패스포트의 구글 전략 등록

__정리



7 AngularJS 소개

__AngularJS 소개

__AngularJS의 핵심 개념

____AngularJS의 핵심 모듈

________angular 전역 객체

____AngularJS 모듈

________애플리케이션 모듈

________외부 모듈

________외부 개발자 모듈

____양방향 데이터 결합

____의존성 주입

________AngularJS에서 의존성 주입

____AngularJS 지시자

________핵심 지시자

________맞춤식 지시자

____AngularJS 애플리케이션 부트스트랩

________자동 부트스트랩

________수동 부트스트랩

__AngularJS 설치

____바우어 의존성 관리자 소개

____바우어 의존성 관리자 구성

____바우어를 사용한 AngularJS 설치

____AngularJS 구성

__AngularJS 애플리케이션 구조화

__AngularJS 애플리케이션 부트스트랩

__AngularJS MVC 엔티티

____AngularJS 뷰

____AngularJS 컨트롤러와 영역

__AngularJS 라우팅

____ngRoute 모듈 설치

____URL 정책 구성

____AngularJS 애플리케이션 라우트

__AngularJS 서비스

____AngularJS 기본 포함 서비스

____AngularJS 서비스 생성

____AngularJS 서비스 사용

__AngularJS 인증 관리

____user 객체 출력

____Authentication 서비스 추가

____Authentication 서비스 사용

__정리



8 MEAN CRUD 모듈 생성

__CRUD 모듈 소개

__익스프레스 구성 요소 설정

____몽구스 모델 생성

____익스프레스 컨트롤러 설정

________익스프레스 컨트롤러의 오류 처리 메소드

________익스프레스 컨트롤러의 create( ) 메소드

________익스프레스 컨트롤러의 list( ) 메소드

________익스프레스 컨트롤러의 read( ) 미들웨어

________익스프레스 컨트롤러의 update( ) 메소드

________익스프레스 컨트롤러의 delete( ) 메소드

________인증 미들웨어 구현

________인가 미들웨어 구현

____익스프레스 라우트 배선

____익스프레스 애플리케이션 구성

__ngResource 모듈 소개

____ngResource 모듈 설치

____$resource 서비스 사용

__AngularJS MVC 모듈 구현

____AngularJS 모듈 서비스 생성

____AngularJS 모듈 컨트롤러 설정

________AngularJS 컨트롤러의 create( ) 메소드

________AngularJS 컨트롤러의 find( )와 findOne( ) 메소드

________AngularJS 컨트롤러의 update( ) 메소드

________AngularJS 컨트롤러의 delete( ) 메소드

____AngularJS 모듈 뷰 구현

________create-article 뷰

________view-article 뷰

________edit-article 뷰

________list-articles 뷰

____AngularJS 모듈 라우트 배선

__모듈 구현 마무리

__정리



9 Socket.io를 사용한 실시간 기능 추가

__웹소켓 소개

__Socket.io 소개

____Socket.io 서버 객체

________Socket.io 핸드셰이크

________Socket.io 구성 미들웨어

____Socket.io 클라이언트 객체

____Socket.io 이벤트

________이벤트 처리

________이벤트 전송

____Socket.io 이름공간

________Socket.io 서버 이름공간

________Socket.io 클라이언트 이름공간

____Socket.io 룸

________룸 가입과 탈퇴

________룸으로 이벤트 전송

__Socket.io 설치

____Socket.io 서버 구성

____Socket.io 세션 구성

________connect-mongo와 cookie-parser 모듈 설치

________connect-mongo 모듈 구성

________Socket.io 세션 구성

__Socket.io 채팅 구축

____채팅 서버의 이벤트 처리기 설정

____Socket 서비스 생성

____채팅 컨트롤러 생성

____채팅 뷰 생성

____채팅 라우트 추가

____채팅 구현 마무리

__정리



10 MEAN 애플리케이션 테스트

__자바스크립트 테스트 소개

____TDD, BDD, 단위 테스트

____테스트 프레임워크

____단정 라이브러리

____테스트 실행기

__익스프레스 애플리케이션 테스트

____모카 소개

____Should.js 소개

____슈퍼테스트 소개

____모카 설치

____Should.js와 슈퍼테스트 모듈 설치

____테스트 환경 구성

____첫 모카 테스트 작성

________익스프레스 모델 테스트

________익스프레스 컨트롤러 테스트

____모카 테스트 실행

__AngularJS 애플리케이션 테스트

____자스민 프레임워크 소개

____AngularJS 단위 테스트

________카르마 테스트 실행기 소개

________카르마 명령행 도구 설치

________카르마의 의존성 설치

________카르마 테스트 실행기 구성

________AngularJS 구성 요소 흉내내기

________AngularJS 단위 테스트 작성

________첫 단위 테스트 작성

________AngularJS 단위 테스트 실행

________AngularJS E2E 테스트

________프로트랙터 테스트 실행기 소개

________프로트랙터 테스트 실행기 설치

________프로트랙터 테스트 실행기 구성

________첫 E2E 테스트 작성

________AngularJS E2E 테스트 실행

__정리



11 MEAN 애플리케이션 자동화와 디버깅

__그런트 작업 실행기 소개

____그런트 작업 실행기 설치

____그런트 구성

________그런트를 사용한 애플리케이션 실행

________그런트를 사용한 애플리케이션 테스트

________그런트를 사용한 애플리케이션 린트

________그런트를 사용한 파일 변경 감시

__node-inspector로 익스프레스 디버깅

____node-inspector의 그런트 작업 설치

____node-inspector의 그런트 작업 구성

____디버그 그런트 작업 실행

__배터랑으로 AngularJS 디버깅

____배터랑 사용

________배터랑 모델

________배터랑 성능

________배터랑 의존성

__정리

__정리

아모스 하비브 저자 아모스 하비브(Amos Q. Haviv)는 소프트웨어 개발자이자 기술 컨설턴트이며, MEAN.IO와 MEAN.JS의 창립자다. 거의 10년에 걸쳐 풀스택 개발자로 활동해왔으며, 여러 스타트업과 엔터프라이즈 회사를 위해 일해왔다. 현재 닷넷프레임워크(.NET Framework), 파이썬, 스칼라, 오브젝티브C, 자바스크립트를 포함한 다양한 플랫폼, 프레임워크, 프로그래밍 언어로 작업하고 있다.

지난 3년 동안 AngularJS와 같은 MVC 프론트엔드는 물론이고 노드와 MongoDB를 포함하는 풀스택 자바스크립트 솔루션으로 작업해왔다. 2013년, MEAN 애플리케이션을 위한 인기 있는 기본 틀을 제공하기 위해 MEAN.IO를 만들었고, 현재 http://meanjs.org에서 MEAN 솔루션을 개발 중이다. 또한 소모임과 컨퍼런스에서 고급 웹 기술에 대한 강의를 맡고 있으며, 다양한 회사에서 개발 팀을 지도한다.