『풀스택 개발자를 위한 mean 스택...
TRANSCRIPT
풀스
택 개
발자
를 위
한M
EA
N 스
택 입
문애
덤 브
레츠
, 콜린
J. 이릭
지음
박재
호 옮
김웹 / 자바스크립트
정가 28,000원
스타트업을 위한 가장 확실한 선택, MEAN 스택
지금은 스타트업 무한 경쟁 시대다. 살아남기 위해서는 누구보다 빠르게 자신의 아이디어
를 세상에 선보여야 하기에 클라이언트 개발자, 서버 개발자, DB 전문가가 각기 다른 언
어를 사용하던 기존 개발 방식으로는 경쟁에서 뒤처질 수밖에 없다.
그리하여 등장한 MEAN 스택은 이 모든 계층을 자바스크립트만으로 개발할 수 있게 해
준다. 가장 적은 노력으로 빠르게 제품을 완성해주는 MEAN 스택, 그 최신 개발 기법을
담은 이 책과 함께 지금 당장 꿈에 도전해보자!
•Node.js를 설치하고, Node.js 프로그래밍 모델의 핵심을 파악한다.
•Node.js로 MongoDB에서 데이터를 삽입, 검색, 갱신, 삭제한다.
•Express의 핵심 기술을 빠르게 익히고, 라우트와 미들웨어를 파악한다.
•데이터 결합, 지시자, 컨트롤러, 라우팅, 서비스와 같은 AngularJS의 핵심을 마스터한다.
•MEAN 스택만으로 완벽하게 작동하는 앱을 구축한다.
•원서보다 완벽하게 다듬은 예제 코드로 독자의 시간을 절약해준다.
MEAN은 서버와 클라이언트 양쪽을 모두 다루는 풀스택 엔지니어를 위한 기술이며, 한 번 익혀
두면 여러 가지 상황에서 돌파구를 발견할 가능성을 높여준다. 그만큼 개발자의 경쟁력을 높일
수 있음을 의미한다. 모든 구성 요소가 자바스크립트를 사용하므로, 자바스크립트만 어느 정도
이해하고 있다면 이를 지렛대로 활용해서 진도를 빨리 뽑을 수 있다. 이게 바로 기존 다른 스택
과 비교한 MEAN의 가장 큰 특장점이다. - 박재호, 엑셈 CTO
예제 소스 : http://www.hanbit.co.kr/exam/2218
관련 도서
몽고디비
완벽 가이드
(개정2판)
클라이언트
-서버 웹 앱
만들기
하이브리드
앱을 구현하는 기술
애덤 브레츠, 콜린 J. 이릭 지음
박재호 옮김
Node.js
풀 스 택 개 발 자 를 위 한
MEAN 스택 입문
체계적으로 배우는 MongoDB, Express, AngularJS,
Node.js
www.hanbi t .co.kr
이것이 프로그래밍이다!
이것이 안드로이드다
진정한 안드로이드 개발자로 이끌어줍니다.
SDK 5.0 롤리팝 호환!
책만 보고,
동영상 강좌로도 만족하지 못했다면 Daum
카페 '슈퍼드로이드'에서 만나요
cafe.daum.net/superdroid
박성근 저 | 1,164쪽 | 45,000원
이것이 C언어다
세상에 없던 새로운
C언어 입문서 탄생!
삼성, LG에서 펼쳐졌던
전설의 명강의를 풀타임 동영상 강좌로!
이보다 더 확실한 방법은 없다, 칠판강의
전체 동영상 강좌 유투브 전격 공개!
http://goo.gl/tJK3Tu
서현우 저 | 708쪽 | 25,000원
이것이 자바다
가장 중요한 프로그래밍 언어를 하나배워야 한다면, 결론은 자바다!
중급 개발자로 나아가기 위한 람다식,
JavaFX, NIO 수록
자바의 모든 것을 알려주는 인터넷 강의
궁금한 것은 카페에서!
cafe.naver.com/thisisjava
신용권 저 | 1,224쪽 | 30,000원
저자 직강 동영상 제공!
모던 웹을 위한
JavaScript + jQuery 입문
www.hanbi t .co.kr
지금은모던 웹 시대!
HTML5 분야 부동의 1위 도서
HTML5 표준안 확정에 맞춘 완전 개정판의 귀환!
HTML5 권고안과 최신 웹 브라우저 환경 대응
윤인성 저 | 624쪽 | 30,000원
모던 웹 디자인을 위한
HTML5 + CSS3 입문
자바스크립트에서 제이쿼리, 제이쿼리 모바일까지 한 권으로 끝낸다!
시대의 흐름에 맞춰 다시 쓴 자바스크립트 교과서
윤인성 저 | 980쪽 | 32,000원
페이스북, 월마트, 링크드인은 왜
Node.js를 선택했는가?
이 물음에 대한 답은 Node.js가 보여주는 빠른 처리 능력 때문이다.
윤인성 저 | 484쪽 | 25,000원
모던 웹을 위한
Node.js프로그래밍
필요한 것만 배워 바로 현장에서 쓰는 HTML5
순서대로 읽으며 실습할 수 있는 HTML5 자습서
김상형 저 | 700쪽 | 32,000원
HTML5 + CSS3 정복
애덤 브레츠, 콜린 J. 이릭 지음 박재호 옮김
MEAN 스택 입문풀 스 택 개 발 자 를 위 한
풀스택 개발자를 위한 MEAN 스택 입문 :체계적으로 배우는 MongoDB, Express, AngularJS, Node.js
초판발행 2015년 9월 1일
지은이 애덤 브레츠, 콜린 J. 이릭 / 옮긴이 박재호 / 펴낸이 김태헌
펴낸곳 한빛미디어 (주) / 주소 서울시 마포구 양화로 7길 83 한빛미디어(주) IT출판부
전화 02 – 325 – 5544 / 팩스 02 – 336 – 7124등록 1999년 6월 24일 제10 – 1779호 / ISBN 978 – 89 – 6848 – 218 – 2 93000
총괄 배용석 / 책임편집 최현우 / 기획 이복연 / 편집 김철수
디자인 표지·내지 김연정, 조판 김철수
영업 김형진, 김진불, 조유미 / 마케팅 박상용, 송경석, 서은옥 / 제작 박성우
이 책에 대한 의견이나 오탈자 및 잘못된 내용에 대한 수정 정보는 한빛미디어(주)의 홈페이지나 아래 이메일로
알려주십시오. 잘못된 책은 구입하신 서점에서 교환해드립니다. 책값은 뒤표지에 표시되어 있습니다.
한빛미디어 홈페이지 www.hanbit.co.kr / 이메일 [email protected]
Full Stack JavaScript Development With MEAN
© 2015 Hanbit Media, Inc
Authorized Korean translation of the English edition of Full Stack JavaScript Development
With MEAN, ISBN 9780992461256 © SitePoint Pty. Ltd. This translation is published and sold by
permission of O’Reilly Media, Inc., which owns or controls all rights to sell the same.
이 책의 한국어 판 저작권은 대니홍 에이전시를 통한 저작권사와의 독점 계약으로 한빛미디어(주)에 있습니다.
저작권법에 의해 한국내에서 보호를 받는 저작물이므로 무단전재와 복제를 금합니다.
지금 하지 않으면 할 수 없는 일이 있습니다.
책으로 펴내고 싶은 아이디어나 원고를 메일 ( [email protected] ) 로 보내주세요.
한빛미디어(주)는 여러분의 소중한 경험과 지식을 기다리고 있습니다.
지은이 애덤 브레츠Adam Bretz
클라이언트와 서버 쪽 자바스크립트 모두를 다루는 소프트웨어 개발자다. 펜실베이니아 밀러스빌 대학교에서 2007년에 컴퓨터과학 학사 학위
를 받았다. 그는 PHP에서 순수 자바스크립트 솔루션으로 이주하는 회사를 돕는 개발팀의 일원이었다. 현재 피츠버그에서 부인 제나와 함께 살
고 있다.
지은이 콜린 J. 이릭Colin J. Ihrig
주로 노드를 사용해서 개발하는 소프트웨어 개발자다. 『Pro Node.js for Developers』의 저자며, 현재 사이트포인트의 자바스크립트 채널 편
집자를 맡고 있다. 피츠버그 대학교에서 컴퓨터공학 학사(2005년)와 석사(2008년) 학위를 받았다.
애덤 브레츠, 콜린 J. 이릭 지음 박재호 옮김
풀 스 택 개 발 자 를 위 한
MEAN 스택 입문
애덤 브레츠, 콜린 J. 이릭 지음 박재호 옮김
풀 스 택 개 발 자 를 위 한
MEAN 스택 입문
엄마와 아빠에게,
일곱 살 때 닌텐도를,
열 살 때 컴퓨터를 사주셔서 감사합니다.
- 애덤
이 책을 부인 엘레이나와
아들 CJ와 카터,
엄마에게 바칩니다.
당신들을 아주 사랑합니다!
- 콜린
5
벌써 MEAN 관련 서적을 세 권째 번역하게 되었다. 요즘과 같이 기술 변화가 급격하게 이뤄지
는 상황에서 특정 분야에 대한 책이 지속적으로 나온다는 사실은 시사하는 바가 크다. 기술서의
경우에는 집필하는 사람 역시 개발자이므로 개발자의 마음을 끄는 뭔가 비밀이 숨어있음을 암
시하기 때문이다. MEAN은 서버와 클라이언트 양쪽을 모두 다루는 풀스택 엔지니어를 위한 기
술이며, 한 번 익혀두면 여러 가지 상황에서 돌파구를 발견할 가능성을 높여준다. 그만큼 개발
자의 경쟁력을 높일 수 있음을 의미한다. MEAN 스택으로 프로그램을 작성하려면 웹 관련 전
체 그림을 이해해야 하며 기술적으로도 알아야 하는 내용이 상대적으로 많다. 하지만 모든 구성
요소가 자바스크립트를 사용하므로, 자바스크립트만 어느 정도 이해하고 있다면 이를 지렛대로
활용해서 진도를 빨리 뽑을 수 있다. 이게 바로 기존 다른 스택과 비교한 MEAN의 가장 큰 특장
점으로 볼 수 있다.
MEAN은 노드에 큰 빚을 지고 있다. 구현부터 테스트와 배포에 이르기까지 기존 노드 생태계
를 그대로 활용할 수 있기 때문이다. 프로그래밍 언어별 패키지 저장소에 올라온 모듈 수를 통계
로 정리한 http://www.modulecounts.com/에 따르면 노드의 npm으로 제공되는 모듈이
이미 17만 5천 개를 넘어서 여느 경쟁자가 넘보지 못하는 수준에 이르렀음을 보여준다. 물론 모
든 모듈이 완벽하지는 않겠지만 어지간한 모듈은 이미 개발되어 있기 때문에 출발점으로 삼을
만한 기댈 언덕이 많다. 따라서 이 책은 1부에서 기본이 되는 노드를 충분히 설명한 다음에 2부
몽고디비, 3부 익스프레스, 4부 앵귤러까지 MEAN의 각 구성 요소를 설명하고, 마지막으로 5
부 개발 환경으로 넘어간다. 중간 중간에 MEAN의 구성 요소는 아니지만 대안으로 사용 가능
한 몇 가지 기술(예를 들면 NoSQL 계열 대신 관계형 DBMS를 사용할 경우 유용한 MySQL
모듈, 익스프레스 대안으로 급성장 중인 하피)도 소개하므로 다른 MEAN 서적과 비교해서 조
금 색다른 느낌이 올 것이다.
이 책은 MEAN 기술을 활용해서 HR 앱이라는 직원 관리용 애플리케이션의 기능을 하나씩 완
성해나가는 방법을 사용하므로, 무작위로 관심 있는 부분을 읽는 방법 대신 순서대로 읽는 방
법을 권장한다. 실행하기 어려운 코드 조각 상태로 제공되는 원서 예제를 재구성해서 한국어판
옮긴이의 말
6
예제는 독자 여러분의 시간을 절약하기 위해 빌드와 실행을 최대한 고려한 완결된 상태로 제공
되므로 예제 코드를 참조하면서 책을 읽으면 더욱 이해가 쉬울 것이다. 이 책에서 소개한 예제
를 조금씩 확장해 나가다 보면 어느 순간 자신만의 멋진 HR 앱을 만들 수 있을 것이다. 독자 여
러분의 행운을 빈다!
박재호
옮긴이 박재호 [email protected]
포항공과대학교 컴퓨터공학과 학부와 대학원을 졸업했다. 블로그 ‘컴퓨터 vs 책’(jhrogue.blogspot.com)을 운영하고 있다.
『English for Developers』, 『Blog2Book, 열씨미와 게을러의 리눅스 개발 노하우 탐험기』, 『IT EXPERT, 임베디드 리눅스』(이
상 한빛미디어)를 저술했고, 『리눅스 시스템 프로그래밍(1판)』, 『The Art of Project Management』, 『리눅스 디바이스 드라이
버(개정3판)』, 『임베디드 하드웨어 이해와 설계』, 『Rapid Development』(이상 한빛미디어), 『피플 웨어』, 『클린 코드』(이상 인사이
트), 『조엘 온 소프트웨어』(에이콘) 등을 번역했다.
7
현대적인 도구를 사용하면 자바스크립트, HTML, CSS만으로도 상용 수준의 앱을 만들 수 있
다. 자바스크립트 기술을 기반으로 하는 몽고디비MongoDB, 익스프레스Express, 앵귤러AngularJS, 노
드Node.js의 조합은 너무나 인기가 있어서 MEAN 스택으로 불리고 있다. 이 책에서는 이러한
MEAN 스택을 자세히 탐험할 것이다.
이 책은 모든 서버 쪽 작업의 토대가 되는 노드에 관한 설명부터 시작한다. 개인 컴퓨터에서 노
드를 구동하는 방법과 노드의 패키지 관리자인 npm을 사용해서 모듈을 내려받는 방법을 설명
한다. 노드 프로그래밍 모델의 핵심적인 측면 또한 설명할 것이다.
그 다음에는 NoSQL 데이터베이스인 몽고디비로 이동할 것이다. 노드 앱에서 몽고디비를 활
용하는 방법과 몽고디비에서 데이터를 생성, 검색, 갱신, 삭제하는 방법을 설명할 것이다.
노드와 몽고디비를 제대로 이해하고 나면 익스프레스 웹 서버로 이동할 것이다. 라우팅이나 미
들웨어와 같은 익스프레스 앱의 기초를 소개한다. 직전에 설명한 내용을 토대로 노드, 몽고디
비, 익스프레스의 통합 방법을 설명할 것이다.
다음으로 앵귤러를 설명한다. 데이터 바인딩, 지시자, 컨트롤러, 라우팅, 서비스와 같은 앵귤러
기본 원리를 자세히 소개한다.
마지막으로 MEAN 앱의 디버깅과 테스트 방법을 설명하며 이 책을 마무리한다.
MEAN 스택은 풀스택 자바스크립트를 총망라하지는 않는다. 배워야 할 자바스크립트 도구의
전체 생태계가 존재하며, 이 책에서는 그중에서도 몇 가지만 소개한다. 걸프Gulp와 그런트Grunt
와 같은 작업 실행기를 소개한다. 두 도구는 따분하고 반복적인 작업을 자동화하는 데 큰 도움
을 준다. 또한 코드 품질 개선에 사용되는 린트 도구인 JSHint도 살펴본다. 이런 과정을 밟으
면서 MEAN 스택을 사용해서 인적 자원human resource (HR ) 앱을 처음부터 개발해본다.
이 책에 대하여
8
대상 독자
이 책은 중급 수준의 웹 디자이너와 개발자에게 적합하다. HTML, CSS, 자바스크립트에 대한
경험이 있다고 가정한다.
보충 자료
● 다음은 이 책의 웹사이트다. 여기에는 링크, 추가 내용, 참고 자료 등이 포함되어 있다.
http://www.learnable.com/books/mean1/
● 이 책의 코드는 다음 주소에서 내려받을 수 있다.
http://www.hanbit.co.kr/exam/2218
9
옮긴이의 말 .................................................................................................................... 5 이 책에 대하여 ................................................................................................................ 7
CHAPTER 1 MEAN 스택, 자바스크립트의 거침없는 질주
1.1 풀스택 자바스크립트의 등장 .......................................................................................... 22
1.1.1 노드 .............................................................................................................. 23
1.1.2 노드 생태계 .................................................................................................... 24
1.1.3 몽고디비 ........................................................................................................ 25
1.1.4 앵귤러 ........................................................................................................... 26
1.2 마치며 ...................................................................................................................... 28
CHAPTER 2 노드란
2.1 자바스크립트의 친숙함 ................................................................................................. 33
2.2 I/O 문제 .................................................................................................................... 35
2.2.1 웹 서버 예 ...................................................................................................... 36
2.2.2 I/O 문제에서 벗어나기 ...................................................................................... 37
2.2.3 실세계 데이터 ................................................................................................. 38
2.3 첫 노드 서버 ............................................................................................................... 40
2.3.1 노드 설치 ....................................................................................................... 40
2.3.2 REPL ........................................................................................................... 40
2.3.3 서버 작성 ....................................................................................................... 41
CONTENTS
Node.jsPart I
10
2.3.4 서버 동작 ....................................................................................................... 43
2.4 마치며 ...................................................................................................................... 44
CHAPTER 3 모듈과 노드 패키지 관리자
3.1 노드 패키지 관리자 ...................................................................................................... 46
3.1.1 npm install 명령 ............................................................................................. 46
3.1.2 npm search 명령 ........................................................................................... 48
3.2 package.json ........................................................................................................... 49
3.3 node_modules 디렉터리 ............................................................................................ 51
3.3.1 모듈 의존성 .................................................................................................... 52
3.4 require( ) .................................................................................................................. 53
3.4.1 require( )의 다른 용법 ...................................................................................... 55
3.5 모듈 작성 .................................................................................................................. 55
3.5.1 모듈 기능 ....................................................................................................... 56
3.5.2 캐시 .............................................................................................................. 58
3.5.3 npm link 명령 ................................................................................................ 60
3.6 마치며 ...................................................................................................................... 61
CHAPTER 4 노드 프로그래밍 모델
4.1 이벤트 루프 ................................................................................................................ 63
4.1.1 동시성 착각 .................................................................................................... 65
4.2 비동기식 코딩 ............................................................................................................. 66
4.3 콜백 함수 .................................................................................................................. 66
4.3.1 호출 관례 ....................................................................................................... 67
4.3.2 예외 처리 ....................................................................................................... 68
CONTENTS
11
4.3.3 콜백 지옥 ....................................................................................................... 69
4.4 이벤트 전송자 ............................................................................................................. 71
4.4.1 EventEmitter 확장 .......................................................................................... 72
4.5 이벤트 듣기 ................................................................................................................ 73
4.6 예외 처리 .................................................................................................................. 75
4.6.1 uncaughtException 이벤트 ............................................................................ 76
4.7 프라미스 ................................................................................................................... 76
4.7.1 프라미스 연쇄 ................................................................................................. 79
4.8 마치며 ...................................................................................................................... 80
CHAPTER 5 핵심 모듈
5.1 명령행 인자 ................................................................................................................ 81
5.2 파일시스템 작업 .......................................................................................................... 82
5.2.1 __filename과 __dirname ................................................................................ 82
5.3 현재 작업 디렉터리 ...................................................................................................... 83
5.3.1 파일 읽기 ....................................................................................................... 84
5.3.2 파일 쓰기 ....................................................................................................... 85
5.4 스트림 ...................................................................................................................... 86
5.4.1 읽기 가능 스트림 ............................................................................................. 87
5.4.2 쓰기 가능 스트림 ............................................................................................. 88
5.4.3 표준 스트림 .................................................................................................... 89
5.5 웹 프로그래밍 ............................................................................................................. 90
5.5.1 서버 생성 ....................................................................................................... 90
5.5.2 라우트 ........................................................................................................... 92
5.5.3 요청 헤더 접근하기 .......................................................................................... 93
5.6 마치며 ...................................................................................................................... 93
12
CHAPTER 6 노드 서버 구축하기
6.1 서버 계획 .................................................................................................................. 95
6.2 앱 구조 잡기 ............................................................................................................... 96
6.3 작업 착수 .................................................................................................................. 96
6.4 라우팅 ...................................................................................................................... 98
6.5 데이터베이스 모듈 ....................................................................................................... 99
6.6 데이터베이스에 질의하기 ............................................................................................ 102
6.7 응답 생성기 .............................................................................................................. 103
6.8 통합하기 ................................................................................................................. 106
6.9 마치며 .................................................................................................................... 109
CHAPTER 7 몽고디비란
7.1 NoSQL 데이터베이스 ............................................................................................... 113
7.2 몽고디비 역사 ........................................................................................................... 114
7.3 개인용 컴퓨터에 몽고디비 설치하기 .............................................................................. 114
7.4 클라우드 호스트 ........................................................................................................ 115
7.4.1 허로쿠 통합 .................................................................................................. 116
7.5 몽고디비 셸 .............................................................................................................. 117
7.5.1 새로운 데이터 삽입 ........................................................................................ 119
7.5.2 데이터 검색 .................................................................................................. 120
7.5.3 데이터 갱신 .................................................................................................. 122
7.5.4 데이터 삭제 .................................................................................................. 123
MongoDBPart II
CONTENTS
13
7.5.5 컬렉션 삭제 .................................................................................................. 123
7.5.6 데이터베이스 삭제 ......................................................................................... 124
7.6 마치며 .................................................................................................................... 125
CHAPTER 8 몽구스로 몽고디비 쉽게 다루기
8.1 몽구스 노드 모듈 ....................................................................................................... 128
8.1.1 스키마 ......................................................................................................... 128
8.1.2 몽구스 스키마 예제 ........................................................................................ 130
8.1.3 몽구스 모델 .................................................................................................. 132
8.1.4 더 많은 문서 생성 .......................................................................................... 134
8.1.5 단순 질의 ..................................................................................................... 138
8.1.6 갱신 ............................................................................................................ 140
8.2 마치며 .................................................................................................................... 141
CHAPTER 9 예제 앱에 몽고디비와 몽구스 접목하기
9.1 몽구스 모델 추가 ....................................................................................................... 144
9.1.1 Employee 모델 ............................................................................................ 145
9.1.2 Team 모델 ................................................................................................... 147
9.2 데이터베이스 채워 넣기 .............................................................................................. 148
9.3 데이터베이스 접근 ..................................................................................................... 156
9.4 마치며 .................................................................................................................... 157
14
CHAPTER 10 SQL, 몽고디비의 대안
10.1 관계형 데이터베이스와 SQL ..................................................................................... 159
10.2 mysql 모듈 ............................................................................................................ 163
10.3 데이터베이스 연결 ................................................................................................... 163
10.3.1 연결 풀 ...................................................................................................... 165
10.4 연결 닫기 ............................................................................................................... 166
10.5 질의 수행 ............................................................................................................... 167
10.6 마치며 ................................................................................................................... 170
CHAPTER 11 익스프레스란
11.1 익스프레스의 구성 요소 ............................................................................................ 175
11.1.1 라우터 ....................................................................................................... 175
11.1.2 미들웨어 .................................................................................................... 177
11.1.3 라우트 ....................................................................................................... 178
11.2 하나로 합치기 ......................................................................................................... 181
11.3 익스프레스 앱 생성 .................................................................................................. 184
11.3.1 제이드 ....................................................................................................... 185
11.4 마치며 ................................................................................................................... 185
ExpressPart III
CONTENTS
15
CHAPTER 12 익스프레스 앱 아키텍처
12.1 준비 ...................................................................................................................... 187
12.2 서버 시작 ............................................................................................................... 188
12.3 app.js ................................................................................................................... 188
12.3.1 app.use ................................................................................................... 188
12.3.2 cookieParser ........................................................................................... 190
12.3.3 정적 파일 다시 살펴보기 ............................................................................... 191
12.3.4 오류 처리 ................................................................................................... 191
12.3.5 app.set .................................................................................................... 194
12.4 Router 객체 ........................................................................................................... 194
12.4.1 Router 객체 사용 ....................................................................................... 195
12.5 연습 ...................................................................................................................... 196
12.5.1 데이터베이스 상호작용 흉내 내기 ................................................................... 197
12.5.2 HTML 생성 ............................................................................................... 197
12.6 마치며 ................................................................................................................... 200
CHAPTER 13 예제 앱에 익스프레스 접목하기
13.1 package.json 갱신 ................................................................................................. 201
13.2 npm start 스크립트 ................................................................................................ 203
13.3 라우트 정의 ............................................................................................................ 204
13.3.1 직원 라우트 ................................................................................................ 204
13.3.2 팀 라우트 ................................................................................................... 205
13.4 index.js 갱신 .......................................................................................................... 207
13.5 마치며 ................................................................................................................... 210
16
CHAPTER 14 하피, 익스프레스의 대안
14.1 하피란 ................................................................................................................... 211
14.2 익스프레스와 비교 ................................................................................................... 212
14.2.1 라우트 구성 ................................................................................................ 214
14.2.2 라우팅 ....................................................................................................... 216
14.2.3 내장 기능 ................................................................................................... 216
14.2.4 이벤트 ....................................................................................................... 217
14.2.5 플러그인 .................................................................................................... 218
14.3 마치며 ................................................................................................................... 222
CHAPTER 15 앵귤러란
15.1 단일 페이지 앱 ........................................................................................................ 225
15.1.1 SPA 프레임워크 ......................................................................................... 227
15.2 모델-뷰-컨트롤러 아키텍처 ....................................................................................... 228
15.3 앵귤러 내려받기 ...................................................................................................... 229
15.3.1 소스 코드에서 빌드하기 ................................................................................ 230
15.3.2 출시 .......................................................................................................... 231
15.4 앵귤러 “Hello World” .............................................................................................. 232
15.5 마치며 ................................................................................................................... 234
AngularJSPart IV
CONTENTS
17
CHAPTER 16 데이터 바인딩
16.1 단방향 데이터 바인딩 ............................................................................................... 235
16.2 양방향 데이터 바인딩 ............................................................................................... 237
16.2.1 단순한 예제 ................................................................................................ 238
16.3 기술적인 개괄 ......................................................................................................... 240
16.3.1 $watch ..................................................................................................... 241
16.3.2 다이제스트 루프 .......................................................................................... 241
16.4 단순한 컨트롤러 ...................................................................................................... 241
16.5 목록을 사용한 데이터 바인딩 ..................................................................................... 243
16.6 마치며 ................................................................................................................... 245
CHAPTER 17 앵귤러 지시자
17.1 지시자란 ................................................................................................................ 247
17.1.1 일반적인 지시자를 사용하는 예제 ................................................................... 249
17.2 지시자 생성 ............................................................................................................ 250
17.2.1 사용자 정의 지시자 예제 ............................................................................... 253
17.3 마치며 ................................................................................................................... 254
CHAPTER 18 컨트롤러
18.1 구문 ...................................................................................................................... 255
18.2 의존성 ................................................................................................................... 257
18.3 예제 확장하기 ......................................................................................................... 258
18.3.1 익스프레스 통합 .......................................................................................... 258
18
18.3.2 자바스크립트 .............................................................................................. 260
18.3.3 HTML ...................................................................................................... 262
18.4 단순한 서비스 ......................................................................................................... 263
18.4.1 EmployeeService 사용 .............................................................................. 265
18.5 마치며 ................................................................................................................... 266
CHAPTER 19 클라이언트 쪽 라우팅
19.1 ngRoute로 시작하기 ............................................................................................... 268
19.2 앱 개괄 .................................................................................................................. 268
19.3 코드 ...................................................................................................................... 269
19.3.1 라우터 ....................................................................................................... 270
19.3.2 서비스와 컨트롤러 ....................................................................................... 272
19.3.3 뷰 ............................................................................................................. 274
19.3.4 하나로 합치기 ............................................................................................. 274
19.4 마치며 ................................................................................................................... 276
CHAPTER 20 예제 앱에 앵귤러 접목하기
20.1 홈페이지 ................................................................................................................ 278
20.1.1 CSS와 이미지 파일 ..................................................................................... 279
20.2 app.js ................................................................................................................... 281
20.3 템플릿 파일 ............................................................................................................ 287
20.3.1 팀과 직원 목록 뷰 ........................................................................................ 288
20.3.2 개별 팀 뷰 .................................................................................................. 289
20.3.3 개별 직원 뷰 ............................................................................................... 290
20.4 마치며 ................................................................................................................... 293
CONTENTS
19
CHAPTER 21 작업 실행기
21.1 걸프란 ................................................................................................................... 298
21.2 걸프 설정 ............................................................................................................... 299
21.3 걸프 파일 설계 ........................................................................................................ 300
21.3.1 css 작업 ................................................................................................... 301
21.3.2 javascript 작업 .......................................................................................... 303
21.3.3 watch 작업 ............................................................................................... 306
21.4 마치며 ................................................................................................................... 307
CHAPTER 22 디버깅
22.1 debugger 문 ......................................................................................................... 309
22.1.1 크롬의 디버거 실행 ...................................................................................... 311
22.1.2 디버거 제어 ................................................................................................ 312
22.1.3 변수 변경 ................................................................................................... 313
22.2 노드의 내장 디버거 .................................................................................................. 314
22.3 node-inspector .................................................................................................... 317
22.3.1 node-debug ............................................................................................ 319
22.4 마치며 ................................................................................................................... 320
개발 환경Part V
20
CHAPTER 23 테스트
23.1 노드 테스트 ............................................................................................................ 322
23.1.1 테스트 정의 ................................................................................................ 322
23.1.2 skip( )과 only( ) .......................................................................................... 325
23.1.3 테스트 훅 ................................................................................................... 326
23.1.4 단정 .......................................................................................................... 327
23.2 앵귤러 테스트 ......................................................................................................... 329
23.2.1 설정 .......................................................................................................... 331
23.2.2 테스트 코드 설정 ......................................................................................... 333
23.2.3 컨트롤러 테스트 .......................................................................................... 335
23.2.4 테스트 실행 ................................................................................................ 337
23.2.5 다음 단계 ................................................................................................... 339
23.3 마치며 ................................................................................................................... 339
찾아보기 ........................................................................................................................... 340
CONTENTS
21
웹 프로그래밍을 제대로 이해하는 일은 여러 해가 걸리는 복잡한 작업이다. 이런 복잡성의 일부
는 정말 많은 동작 부분에서 기인한다. 효율적인 프로그래머가 되려면 최소한 네트워킹, 프로토
콜, 보안, 데이터베이스, 서버 쪽 개발, 클라이언트 쪽 개발을 포함해서 다양한 주제의 기초 지
식 정도는 이해하고 있어야 한다. 웹 프로그래머들은 오랫동안 다양한 프로그래밍 언어를 메들
리로 엮어서 개발을 진행해왔다.
클라이언트 쪽 프로그래밍만 보더라도 마크업을 위한 HTML, 스타일을 위한 CSS, 기능을 위한
자바스크립트를 알아야 한다. 프런트엔드 개발은 그 자체만으로도 복잡하지만, 대부분 ‘세 가지
큰’ 언어로 국한된다는 행운이 따랐다. 서버 쪽은 완전히 다른 이야기가 전개되고 있었다. 서버
는 자바, PHP, 펄, 그밖에 여러분이 상상하는 거의 모든 언어가 사용되었다. 또한 대다수 웹 앱
은 영속적인 데이터 저장소로 데이터베이스를 활용했다. 역사적으로 데이터베이스와 통신을 위
해 개발자들은 SQL도 이해해야 했다.
단순한 웹 앱 하나를 만들려고 해도 개발자들은 HTML, CSS, 자바스크립트, SQL, 그리고 서
버 쪽 언어까지 이해하고 있어야 한다. 더욱이 서버 쪽 앱이 단일 언어로 작성될 수 있을 것이라
는 보장도 없다. 낙관적으로 보더라도 최소한 다섯 가지 언어를 이해해야 앱을 만들 수 있다. 물
론 아직 클라이언트-서버 통신에 사용되는 데이터 교환 형식은 고려하지 않았다. Ajax의 x가
XML을 대표한다는 사실을 기억하자. 최근 많은 웹 앱이 XML에서 더욱 단순한 JSON으로 이
동해왔다. 하지만 이 역시 개발자들이 반드시 넘어야 하는 장벽일 뿐이다.
MEAN 스택, 자바스크립트의 거침없는 질주
CHAPTER 1
22 1장 - MEAN 스택, 자바스크립트의 거침없는 질주
HTML, CSS, SQL은 엄격하게 말해 프로그래밍 언어는 아니지만, 각각에는 개발자들이 반드
시 알아야 하는 구문과 기묘한 특성이 존재한다. 다섯 가지 ‘언어’를 완전히 이해하고 언어 사이
를 끊임없이 전환하는 작업을 하다 보면 주눅이 들기 마련이다. 지금까지 이런 작업을 시도했다
면 한 번에 여러 구문을 섞어서 개발했을 가능성이 크다.
이런 상황은 개발자들을 프런트엔드 또는 백엔드 개발로 분리해서 다른 팀에 참여하게끔 하는
전문화를 이끌었다. 불행히도 이런 전문화가 프로젝트를 빠르게 완료하거나 품질을 높일 수 있
게 보증하지는 않는다. 실제로 개발팀의 분리는 결정을 오락가락하게 하고 논쟁을 일으켰으며,
프로젝트의 큰 그림을 보지 못하는 프로그래머를 양산해왔다. 그래서 전체 개발 스택을 가로지
르는 단일 언어에 대한 요구가 매우 명백해졌다. 다음 절에서는 자바스크립트가 다른 언어가 이
루지 못한 방식으로 풀스택full-stack 언어로 성장한 배경을 설명한다.
1.1 풀스택 자바스크립트의 등장
자바스크립트는 오랫동안 클라이언트 쪽 스크립트를 위한 업계 표준이 되어왔다. 자바스크립트
는 1995년 브랜든 아이크Brendan Eich가 모카Mocha라고 알려진 스크립트 언어를 열흘 만에 개발한
직후 혜성처럼 등장했다. 모카는 1995년 9월 넷스케이프 내비게이터와 함께 출시되었으며, 그
무렵 라이브스크립트LiveScript로 이름이 바뀌었다. 그리고 1995년 12월에 드디어 자바스크립트라
는 현재 이름으로 정착된다. 자바스크립트라는 이름이 선택된 이유는 넷스케이프가 그 당시 유행
이었던 썬의 자바 프로그래밍 언어에 편승하려 했기 때문이다.
초창기 브라우저 전쟁 동안, 마이크로소프트 인터넷 익스플로러와 넷스케이프 내비게이터는 조
금이라도 상대방을 더 앞지르기 위해 지속적으로 노력하고 있었다. 넷스케이프의 자바스크립트
에 대항하기 위해 마이크로소프트는 1996년 8월 인터넷 익스플로러 3.0에 JScript라는 독자적
인 구현을 탑재해서 출시했다. 1996년 11월, 자바스크립트는 ECMA 국제 표준화 단체에 제출
되었고, 1997년 6월에 ECMA-2621로 표준화되었다.
1 http://www.ecma-international.org/publications/standards/Ecma-262.htm
231장 - MEAN 스택, 자바스크립트의 거침없는 질주
당시의 자바스크립트는 성능이 떨어지며 아마추어 개발자만 사용하는 언어라는 평판을 얻었다.
아직 브라우저 업체들이 자바스크립트를 개선하기 위한 수년간의 시간, 노력, 비용을 투자하기
전의 이야기였다. 현대적인 자바스크립트 엔진은 과거의 어떤 자바스크립트 해석기도 비교 자체
가 불가능할 정도의 성능을 보일 만큼 엄청나게 최적화되었다. 클라이언트 쪽에서 가까운 미래
에 자바스크립트를 왕좌에서 몰아낼 (다트Dart와 같은) 경쟁 언어를 찾기란 쉽지 않다. 자바스
크립트는 모든 주요 브라우저가 지원하는 유일한 프로그래밍 언어이기 때문이다. 그리고 컴퓨팅
환경의 전반적인 개선과 함께, 자바스크립트는 범용 프로그래밍에도 적합한 언어가 되었다.
1.1.1 노드
2009년, 란 달Ryan Dahl은 확장 가능한 네트워크 앱 개발에 주로 사용되는 프레임워크인 노드Node.
js를 만들었다. 노드는 구글의 V8 자바스크립트 엔진2과 조이엔트Joyent의 libuv3 라이브러리를
기반으로 만들어졌다. 노드는 자바스크립트를 서버 쪽 프로그래밍에서도 쓸 수 있는 대안으로
만들었다. 추가로 노드는 브라우저의 샌드박스 모델에 갇혀 이전에는 결코 달성하지 못했던 완
벽한 시스템 자바스크립트 API를 제공했다. 노드의 출현으로 자바스크립트 개발자도 파일시스
템에 접근하고, 네트워크 소켓을 열고, 자식 프로세스를 만들 수 있게 되었다.
노드의 가장 뛰어난 특징 중 하나는 많은 기능을 적은 코드에 빽빽하게 채우는 능력이다. 노드는
프로젝트 홈페이지에서 이런 특징을 과시하고 있다.4 다음은 노드 홈페이지에서 직접 가져온 코
드로, 겨우 여섯 줄로 간단한 웹 서버를 구현한다.
리스트 1-1 노드로 만든 간단한 웹 서버
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
2 크롬 브라우저에 사용된 것과 같은 엔진. https://code.google.com/p/v8/
3 하위 플랫폼을 추상화한 비동기 I/O 라이브러리. https://github.com/joyent/libuv
4 http://www.nodejs.org
24 1장 - MEAN 스택, 자바스크립트의 거침없는 질주
당장은 코드를 완벽하게 이해할 필요가 없으니 간단하게만 설명하겠다. 첫 줄의 require는
http 모듈을 불러온다. 이 모듈은 HTTP 클라이언트와 서버를 생성하는 기능을 제공한다. 다음
으로 서버가 시작되어 포트 1337을 열어두고, 연결을 요청받으면 ‘Hello World’라는 메시지로
응답한다. 마지막 줄은 간단한 콘솔 메시지를 출력하여 개발자에게 무슨 일이 일어났는지 알려
준다.
1.1.2 노드 생태계
노드가 서버 쪽 자바스크립트 구현을 위한 첫 번째 시도는 아니지만,5 현재까지 가장 성공한 제
품임은 확실하다. 기술의 인기도를 가늠하는 수단으로 특정 기술을 둘러싼 생태계의 크기를 측정
하는 방법이 있다. 노드는 월마트, 페이팔, 링크드인, 마이크로소프트와 같은 대기업에서 채택해
왔다. 심지어 스트롱루프, 노드소스, npm과 같은 완전히 새로운 회사도 등장하고 있다.
노드를 사용하는 회사 목록보다 더욱 인상 깊은 것은 노드용으로 개발된 외부 모듈이다. 노드
가 출현한 지 몇 년 안 되는 짧은 기간 동안 77,000개에 이르는 외부 모듈이 노드 패키지 관리
자인 npm에 올라왔다. 다양한 저장소에 존재하는 모듈 수를 추적하는 웹사이트인 모듈 카운츠
6에 따르면 npm 저장소는 이 책 집필 시점에 매일 170개 정도의 모듈이 새로 추가되는 성장세
를 보이고 있다. 성장률 관점에서 가장 근접한 패키지 관리자는 PHP의 패키지스트Packagist로 하
루에 73개 정도의 모듈이 추가된다. 모듈 카운츠에서 가져온 [그림 1-1]은 노드 모듈 시스템의
성장을 다양한 언어의 패키지 관리자와 비교해서 보여준다.
5 http://en.wikipedia.org/wiki/Comparison_of_server-side_JavaScript_solutions
6 http://modulecounts.com/
251장 - MEAN 스택, 자바스크립트의 거침없는 질주
그림 1-1 다양한 패키지 관리자의 성장 추세
npm(node.js)
Maven Central(Java)
Rubygems.org
CPAN CPAN(search)
Packagist(PHP)
nuget(.NET)
Clojars(Clojure)
Hackage(Haskell)
CRAN(R)
Pear(PHP)
PyPI
90000
80000
70000
60000
50000
40000
30000
20000
10000
02010년 7월 2011년 1월 2011년 7월 2012년 1월 2012년 7월 2013년 1월 2013년 7월 2014년 1월
사용 가능한 모듈이 워낙 많기 때문에, 개발자들이 겪는 일반적인 문제들의 경우에는 이를 해결
해주는 모듈을 최소 하나는 찾을 수 있다(물론 이런 모듈은 다양한 개발 단계에 있고, 상용 제
품에 쓰기에는 불완전한 모듈도 있을 것이다). 직전에 언급했듯이, 노드의 가장 큰 용도는 웹
서버 개발이다. 따라서 예상하듯이 웹 서버를 구현한 모듈 숫자가 엄청나게 많다. 그중에서 인기
가 가장 많은 익스프레스Express는 전 세계에 걸쳐 26,000개가 넘는 웹 앱을 지탱하고 있다.7 루
비의 시내트라Sinatra 프레임워크에 영향을 받은 익스프레스는 ‘빠르고, 독선적이지 않으며, 최소
화를 추구하는 노드용 웹 프레임워크’를 추구한다.8 익스프레스는 3부에서 자세히 살펴볼 예정
이다.
1.1.3 몽고디비
노드가 서버 영역을 침투하고 있을 때, 데이터베이스 세상에도 새로운 바람이 불고 있었다. 여
러 해 동안, 데이터 저장소를 다루는 주요 수단은 관계형 데이터베이스로 SQL 질의를 날리는
방법이었다. 하지만 SQL에 의존하지 않는 또 다른 데이터 저장소 유형이 있다. NoSQL로 알
7 http://expressjs.com/applications.html
8 http://expressjs.com/
26 1장 - MEAN 스택, 자바스크립트의 거침없는 질주
려진 데이터베이스 유형은 관계형 데이터베이스의 익숙한 테이블 구조조차 사용하지 않았다.
NoSQL 데이터베이스는 키-값 쌍이나 문서와 같은 다양한 형식으로 데이터를 저장하며, 관계
형 데이터베이스보다 덜 엄격하고 덜 구조적인 형태를 지원한다. 구조적인 제약이 덜하다는 특
징은 단순한 프로토타입 제작이나 개발 편의성 측면에서 더 유리하다. 또한 관계형 데이터베이
스처럼 테이블 구조를 엄격히 강제할 필요가 없으므로 NoSQL 데이터베이스가 조금 더 빠른
경향을 보인다.
2007년, 10gen (지금은 MongoDB, Inc.)은 계획 중인 PaaSPlatform as a Service 플랫폼의 구
성 요소가 될 NoSQL 데이터베이스 개발에 착수했다. 그들은 2009년에 그 결과를 오픈 소스
화하여 몽고디비9라는 이름으로 공개했다. 몽고디비는 문서 중심 데이터베이스로서, 정보를
BSONBinary JSON 문서 형태로 저장한다. JSON 계열의 포맷을 사용함으로써 몽고디비는 자바스
크립트 코드로 손쉽게 객체를 읽고 쓸 수 있게 됐다. 노드가 자바스크립트로 다른 서버 쪽 언어
를 대체하듯이, 몽고디비는 자바스크립트 객체에 기반을 둔 질의로 SQL을 대체한다.
1.1.4 앵귤러
자바스크립트는 언제나 클라이언트 쪽 프로그래밍 언어였지만, 시간이 지남에 따라 브라우저에
서의 활용 방법은 극적으로 바뀌고 있었다. 넷스케이프 내비게이터 시절로 돌아가면 자바스크립
트는 마우스 포인터를 올리면 이미지의 src 속성을 바꾸거나 접히는 메뉴 구현과 같은 단순한
페이지 상호작용에 사용될 뿐이었다. 효과는 단순했지만, HTML 단독으로 달성할 수 없는 수준
의 상호작용을 제공했다.
기술의 발전과 함께 자바스크립트 역시 진화를 거듭했다. 웹 앱을 위한 주요 돌파구는 광범위한
브라우저 지원과 고속 인터넷 보급과 함께 찾아왔다. 이는 전체 페이지를 읽는 대신 배경 작업
으로 요청을 처리하는 Ajax 앱을 위한 문을 열었다. Ajax 앱에서는 네트워크 성능이 핵심이었
다. 연결이 느리면 페이지가 반응하지 않는 것처럼 보이게 만들기 때문이다. 앱은 점진적으로 페
이지 읽기를 줄이고 Ajax 요청을 늘리는 쪽으로 이동했다. 궁극적으로 단일 페이지 앱Single Page
Application (SPA )이 탄생했다. 가장 엄격한 의미에서 SPA는 딱 한 페이지만 읽고, 나머지 모든
데이터는 Ajax 호출로 요청한다.
9 humongous (거대한)에서 비롯된 단어다. http://www.mongodb.org/
33
지금까지 자바스크립트의 서버 쪽 구현은 열 가지 넘게 존재해왔다.1 그중에서 노드.jsNode.js는
첫 시도가 아님에도 가장 성공적이었다. 개발자들은 웹 서버에서 자바스크립트가 동작하게끔
엄청난 시간과 노력을 쏟아 부었다. 도대체 이렇게 하는 이유는 무엇일까? 자바스크립트를 서
버 쪽 언어로 적합하게 만드는 요인은 무엇일까? 궁극적으로 친숙함과 비차단non-blocking 비동기
식asynchronous I/O라는 두 가지 요소로 요약할 수 있다.
2.1 자바스크립트의 친숙함
깃허브GitHub 사용 상황을 살펴보면2 자바스크립트의 인기를 확인할 수 있다. [그림 2-1]에 두드
러지듯이, 자바스크립트 코드량은 점차 증가하고 있으며, 오늘날 사용 가능한 다른 모든 스크립
트 언어를 앞지르고 있다. 그래프는 새로 생성된 깃허브 저장소 수를 보여주며, 자바스크립트가
주요한 언어가 되었음을 증명한다.
1 http://en.wikipedia.org/wiki/Comparison_of_server-side_JavaScript_solutions
2 http://redmonk.com/dberkholz/2014/05/02/github-language-trends-and-the-fragmenting-landscape/
노드란
CHAPTER 2
34 1부 - Node.js
그림 2-1 언어별 새로운 깃허브 저장소 수 추이
자바스크립트
루비자바
PHP파이썬
C/C++C#/Obj-C
펄
퍼센트(연간)
새로운 깃허브 저장소
15
10
5
0
20
20082009
20102011
20122013
자바스크립트는 1995년에 브렌든 아이크가 넷스케이프 커뮤니케이션 사에 근무하던 시절에 만
들었다. 1996년에 공식 ECMA 명세가 제출되었고, 마이크로소프트와 넷스케이프는 주력 브라
우저에 자바스크립트를 구현해 넣었다. 20년이 넘는 기간 동안, ECMAScript 명세가 갱신되었
고, jQuery로 대표되는 클라이언트 쪽 자바스크립트와 MVC 프레임워크 등의 자바스크립트 라
이브러리가 등장했고, 테셀Tessel에서는 자바스크립트를 로봇 제어에 활용했고,3 서버 쪽 자바스
크립트가 부상했다. 지난 20년 동안 웹 페이지로 작업해왔다면 자바스크립트에 어느 정도 노출
되었을 것이다.
자바스크립트의 편재성ubiquity은 서버 쪽 언어로 매력적인 이유를 설명하는 한 가지 해답이다.
웹 서버가 자바스크립트로 작성되었다면 전문 분야에 무관하게 자바스크립트를 아는 개발자가
활동적인 기여자로 나설 수 있다. 노드를 사용하면 클라이언트 쪽과 서버 쪽 언어가 자바스크립
트로 통일된다. 특정 분야에만 전문화되지 않고 웹 앱의 어떤 부분도 개발할 수 있는 자바스크립
트 개발자가 될 기회가 주어지는 것이다. 여러(종종 아주 다른) 프로그래밍 언어를 배울 필요
없이 단일 언어를 사용해서 전체 웹사이트 구축을 완료할 수 있게 된다.
3 https://tessel.io/
352장 - 노드란
노드를 처음 공부하는 사람들로부터 자주 듣는 말이 ‘정말 그냥 자바스크립트잖아!’다. 20년 넘
게 쌓아온 기존 자바스크립트 지식 기반을 노드 프로그래밍에도 계속해서 적용할 수 있다. 다른
환경에서 다른 언어로 쌓은 경험을 지렛대로 삼아 노드는 자바스크립트에 익숙한 개발자를 단숨
에 초급 풀스택 개발자로 바꿔놓았다.
2.2 I/O 문제
연습 삼아 만든 웹 서버가 아닌 이상 궁극에는 I/O를 수행하기 마련이다. 디스크에서 뭔가를 읽
거나, 데이터베이스를 조회하거나, 다른 웹 서버와 통신하는 과정에서 I/O가 일어난다. 심지어
현대적인 컴퓨터에서도 여전히 I/O는 시스템에서 가장 느린 병목 지점이다. [그림 2-2]는 I/O
비용을 멋지게 요약한다.
그림 2-2 I/O 비용4
I/O 비용
L1-캐시 3 사이클
L2-캐시 14 사이클
램 250 사이클
디스크 14 000 000 사이클
네트워크 240 000 000 사이클
[그림 2-2]는 디스크와 네트워크 I/O가 램과 CPU 캐시보다 자릿수부터 크게 차이가 날만큼 느
리다는 사실을 보여준다. 분당 수십만에 이르는 요청에 응답해야 하는 서버에서 이런 비용은 곧
바로 심각한 성능 문제로 이어질 수 있다. 아주 일반적인 웹 서버 작업(데이터베이스와 통신)을
수행하는 가상의 웹 서버를 살펴보자.
4 출처 : http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/
36 1부 - Node.js
2.2.1 웹 서버 예
흔히 볼 수 있는 PHP로 작성된 단순한 웹 서버를 가정하자. 우리는 스레드나 비동기식 프로그
램에 대해서는 아무 것도 모른다. 이 서버는 질의 문자열(물론 SQL 주입 공격을 방어하기 위해
이스케이프 처리를 마친) 형태로 입력을 받아 데이터베이스에 질의를 수행한다. 서버는 다시 데
이터베이스가 준 응답을 처리해서 클라이언트에 뷰 형태로 돌려준다(그림 2-3 ).
그림 2-3 요청 생명 주기 예
" "" "
생명 주기 단계를 정리하면 다음과 같다.
1. 요청이 웹 서버로 들어온다. 클라이언트는 색상이 ‘빨간색’인 모든 차량을 원한다.
2. 원격 서버에 기업용 데이터베이스가 자리 잡고 있다. 웹 서버는 데이터베이스 질의를 생
성해서 데이터베이스가 자리 잡은 원격 서버로 전송한다.
3. 데이터베이스 엔진은 질의를 수행하고 결과를 조합한다.
4. 데이터베이스 서버는 결과와 함께 웹 서버에 응답한다.
5. 웹 서버는 질의 결과를 받고, 그것을 JSON으로 변환해서 처리하기 쉽게 만든다.
6. 서버는 지역 파일시스템에서 결과를 보여줄 적절한 HTML 문서를 찾는다.
7. 서버는 데이터베이스에서 찾은 모든 빨간색 차량이 담긴 HTML을 클라이언트에 반환한다.
이는 많은 웹 서버에서 이루어지는 일반적인 요청 생명 주기다. [그림 2-3]과 요약한 생명 주기
를 살펴보면 I/O 대기 시간이 여러 단계에서 드러난다. 2단계, 3단계, 4단계가 모두 I/O와 관련
이 있다(각각 네트워크, 디스크, 디스크). [그림 2-2]에 입각해서 계산해보면 차단 I/O 연산에
소비되는 사이클은 대략 322,000,000이다. 동작 중인 프로그램에서 다른 처리를 멈추게 만드는
I/O 활동을 차단 I/Oblocking I/O라고 한다.
(1단계)(2단계)
(5-7단계) (3-4단계)
372장 - 노드란
웹 서버가 한 번에 한 명에게만 서비스한다면 322,000,000사이클만큼 차단되어도 문제는 없
다. 하지만 현실적으로 고객을 직접 상대하는 웹 서버는 수천에 이르는 동시 요청을 서비스하며,
엄청난 가동 시간과 낮은 대기 시간이 요구된다.
사용자 A가 요청을 하고 1밀리초 후에 사용자 B도 요청을 했다고 가정하자. 예제 서버에서 아키
텍처나 코드를 변경하지 않는 이상, 사용자 B는 A의 요청 처리에 따른 모든 I/O 활동에 B 자신
의 요청이 수반하는 I/O 활동까지 합친 대기 시간을 경험할 것이다. 심지어 사용자가 몇 명뿐이
더라도 차단 I/O가 연속적인 문제를 일으킨다는 사실을 이해할 수 있다.
2.2.2 I/O 문제에서 벗어나기
I/O는 새로운 문제가 아니다. 웹 서버가 처음 탄생한 그 순간부터 공학도들은 확장 문제를 해결
해야만 했었다. 자바나 PHP와 같은 전통적인 프로그래밍 언어로 만들어진 많은 기존 웹 서버
는 스레드나 병렬 프로세스로 확장성 문제를 풀어왔다. 이런 접근 방식은 동시 사용자의 대기 시
간과 I/O 문제 해결에 도움을 줄 수 있는 반면, 종종 복잡해지기도 하며 웹 서버에 걸리는 부하
가 늘어남에 따라 더 많은 하드웨어를 요구한다. 스레드와 병렬 프로세스는 공짜가 아니다. 대다
수 회사는 제한된 자원을 보유하므로 늘어나는 하드웨어는 특정 지점에서 엄두도 못 낼 정도로
비싸진다.
관례상 자바스크립트(그리고 노드)는 비차단non-blocking 언어다. 언어가 만들어진 이후 I/O 문제
를 풀려고 하는 게 아니라, 자바스크립트는 언어의 핵심에 이미 콜백이라는 단순한 해법을 내
장하고 있다. 콜백callback은 I/O 연산이 끝나거나 오류가 발생할 경우에 수행되는 함수다. 다른
사용자가 대기 시간으로 불편함을 겪게 만드는 대신, 연산이 시작될 때 콜백 함수를 등록한다.
그런 후 I/O가 완료되면 시작 시 등록해둔 콜백 함수가 수행된다. I/O가 종료되기까지 여전히
대기하는 시간이 있지만, 이 시간 동안 코드의 다른 부분은 자유롭게 수행 가능하다.
자바스크립트가 초기에 어떻게 사용되고 설계되었는지 생각해보면 쉽게 이해될 것이다. 자바스
크립트에서 함수는 일등 시민first-class citizen이므로 정수처럼 쉽게 선언하고 전달할 수 있다. 이벤
트 처리와 Ajax 요청과 같은 클라이언트 쪽 사용 패턴에 영향을 받아 자바스크립트는 비차단 형
태로 만들어졌으며, 여러 해 동안 이런 방식으로 사용되어 왔다.
Ajax 요청에서 요청을 하면서(서버와 통신해야 하므로 네트워크 I/O, 즉 지연 시간이 생긴다)
38 1부 - Node.js
응답을 처리할 콜백을 제공한다. 하지만 브라우저 창 자체가 차단되지는 않으므로 사용자는 웹
페이지에서 활성화된 어떤 요소도 클릭할 수 있다. 요청이 완료되면, Ajax 요청에 넘긴 콜백을
수행한다. 일반적인 노드는 개발자에게 이러한 패턴을 따라할 것을 권장한다. 많은 노드의 핵심
I/O 기능이 동기식 버전을 제공하지만, 커뮤니티와 노드 문서 양쪽에서 비동기식 버전을 사용하
라고 강력히 권장한다.
웹 서버 예제 다시 살펴보기
우리의 웹 서버 예제에 노드를 적용해보자. 기능은 동일해야 한다. 앞서 이야기한 바와 같이 노
드의 생태계는 npm 레지스트리와 깃허브 덕분에 엄청나게 활기차다. 따라서 PHP 서버가 사용
하는 플러그인이나 모듈은 거의 확실하게 노드에서도 찾을 수 있다.
노드로 만든 새로운 웹 서버가 사용자 A와 B를 위해 동작하는 방식을 분석해보자. 사용자 A의
요청이 단계 2에 도달하면 데이터베이스 서버로 비동기식 호출이 일어난다. 이 과정에서 데이
터베이스 서버의 응답이 오면 실행할 콜백 함수를 전달한다. 사용자 B의 요청이 곧바로 이어지
며, A의 요청 처리가 끝날 때까지 기다리는 대신, 즉시 B의 요청을 처리하기 시작해서 다른 명
령을 데이터베이스 서버에 전달한다. 양쪽 요청을 서비스하기 위해 스레드나 추가 자원이 필요
하지도 않다. 이는 A와 B의 대기 시간을 혼자만 요청했을 때와 비슷하게 만들며, 얼마나 많은
사용자가 웹 서버에 요청하든 상관없다.
주의_ 이 방식이 데이터베이스 서버로의 요청 성능을 높여주는 것은 아니다
이 방식이 데이터베이스 서버로의 요청 성능을 높여주는 것은 아님을 알아두자. 단지 새로 들어온 요청의
I/O 작업이 차단되는 것을 막아줄 따름이다. 이는 웹 서버가 하드웨어 추가나 설정 변경 없이도 더 많은 동시
요청을 처리할 수 있도록 해준다.
2.2.3 실세계 데이터
자바스크립트를 구동하는 서버가 주는 이익을 이야기했으니 이제 정량적으로 평가해보자. 노드
세계의 거물 중 하나는 페이팔PayPal이다. 페이팔은 노드를 사용해서 계좌 목록을 담은 요약 페이
지를 다시 작성하고 익스프레스 프레임워크로 감싼다. 페이팔은 자바 웹 서버에서 자바스크립트
웹 서버로 이주하며 [그림 2-4]와 같은 성능 벤치마크 결과를 공개했다.
392장 - 노드란
그림 2-4 자바 웹 서버와 비교한 노드
자바 앱
노드 앱
초당 페이지 수
사용자 수
사용자 수
초당 페이지 수
계정 응답 시간(밀리초)
초당 페이지 수
/home
/wallet
/activity
초당 페이지 수
/home
/wallet
/activity
이 그래프의 핵심은 다음과 같다.
1. 노드 웹 서버는 자바 서버와 비교해서 초당 요청을 두 배 더 처리할 수 있다. 이 수치가 특
히 인상적인 이유는 자바 웹 서버가 다섯 개 코어를 사용한 반면 노드 서버는 단일 코어를
사용했기 때문이다.
40 1부 - Node.js
2. 동일 페이지를 위한 응답 시간이 35% 감소했다. 사용자가 체감할 수 있는 시간인 200밀리
초 정도를 절약하는 효과가 있다.
이 결과는 2013년 페이팔 공학 사이트에 발표되었다.5 노드 프레임워크도 계속 발전해온 만큼
같은 테스트를 지금 다시 돌려본다면 더욱 인상적인 숫자가 나올 것이다. 이 기사에 따르면 노드
서버는 자바를 사용할 때보다 더 적은 개발자가 33% 더 적은 코드를 사용해서 거의 두 배나 빨리
작성했다.
보는 것처럼 노드는 연구소 수준에서 벗어나 실전 배치 준비가 완전히 끝난 웹 서버다. 노드 기
반의 웹 서버는 더 빨리 동작하고, 대기 시간이 훨씬 짧고, 더 적은 자원을 투입해도 되며, 하드
웨어 요구사항도 낮아 부하가 증가해도 회사의 투입 비용은 크게 늘어나지 않는다.
2.3 첫 노드 서버
설명은 이 정도로 충분하니, 이제 환경을 갖춰 [리스트 1-1]의 서버를 자세히 살펴보자.
2.3.1 노드 설치
가장 추천하는 노드 설치 방법은 공식 웹사이트6에서 직접 내려받는 것이다. 노드는 다양한 플랫
폼을 지원하며 윈도우, OS X, 리눅스용 설치 패키지가 존재한다. 패키지를 내려받아 컴퓨터에
설치한다. 그 다음에는 터미널을 열고 node –v라고 입력하여 모든 작업이 제대로 되었는지 확
인한다. 현재 설치된 노드 버전이 출력되면 모든 것이 정상적으로 설치되었다는 뜻이다.
2.3.2 REPL터미널에서 인자 없이 node만 입력하면 터미널 입력 문자가 ‘>’로 바뀌며 일반적인 터미널 명령
은 작동하지 않는다. 이는 지극히 정상이다. node를 인자 없이 실행하면 노드 REPLRead-Eval-Print
5 https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/
6 http://nodejs.org/download/
45
1장과 2장에서 설명했듯이, 개발자에게 제공되는 광범위한 모듈 유형은 노드의 성공에 큰 기여
를 했다. 웹 서버를 구축할 때 개발자들이 직면하는 주요 문제를 해결해주는 수많은 오픈 소스
모듈이 깃허브에 올라와 있다. 소셜 인증1과 유효성 검증2에서 익스프레스3나 하피4와 같은 서
버 프레임워크까지 그 종류도 다양하다. 그뿐만 아니라 콘솔 텍스트 색상을 바꾸거나,5 날짜와
시각 형식을 정하거나,6 자바스크립트 객체를 복제하는7 등 아주 작고 아기자기한 모듈도 많다.
바퀴를 다시 발명하는 건 개발자의 미덕이 아니다. 개발자는 ‘코드 재사용’을 지향하며 노드 역시
이 목표를 충실히 이행하고 있다. 노드 생태계를 제대로 파악하려면 모듈과 노드 패키지 관리
자node package manager (npm ) 기능의 동작 방식을 이해해야 한다.
1 https://github.com/jaredhanson/passport
2 https://github.com/hapijs/joi
3 https://github.com/visionmedia/expressjs.com
4 https://github.com/hapijs/hapi
5 https://github.com/marak/colors.js/
6 https://github.com/moment/momentjs.com
7 https://github.com/pvorb/node-clone
모듈과 노드 패키지 관리자
CHAPTER 3
46 1부 - Node.js
3.1 노드 패키지 관리자
npm은 노드를 위한 패키지 관리자다. npm 역시 하나의 노드 모듈로서 노드를 처음 설치할 때
전역으로 함께 설치된다. 기본적으로 npm은 npm 레지스트리8에서 패키지를 찾아서 가져온
다. 패키지 레지스트리로서의 기능 외에, npm은 개발자가 새로운 모듈을 발견하는 편리한 도
구이기도 하다. npm은 노드 모듈 생태계의 핵심이므로 지금부터 npm을 효과적으로 사용하기
위한 몇 가지 명령을 알아보겠다.
3.1.1 npm install 명령
다른 npm 명령과 마찬가지로 npm install 명령도 인자에 따라 여러 가지 작업을 수행할 수
있다. 단순히 npm install 명령만 내리면 현재 디렉터리의 package.json 파일에 열거된 모든
모듈을 설치한다. package.json 파일에 대해서는 잠시 후에 자세히 설명할 테니, 당장은 모듈
이름 목록을 담은 파일로 생각하기 바란다. npm install 명령은 package.json 파일에 열거되
어 있는 모든 모듈을 지역 node_modules 디렉터리에 설치한다.
일반적으로 새로운 프로젝트는 소스 코드 관리 시스템에서 동작하는 코드를 끌어오는 것부터 시
작된다. 이 단계는 올바른 환경을 제공하고 의존성 문제를 해결해주어 빠르게 빌드하고 구동해
볼 수 있도록 도와준다.
npm install <모듈 이름> 명령은 해당 모듈의 가장 최신 버전을 지역 node_modules 디렉터리
에 설치한다. 설치하고 싶은 모듈명만 알려주면 나머지는 npm이 알아서 처리한다. 연습 삼아
터미널을 열고 다음 명령을 입력해보자.
npm install colors
터미널에는 다수의 GET 요청과 200 상태 코드가 출력될 것이다. 이 요청과 응답을 보면 npm 레
지스트리를 호출해서 colors라는 모듈을 지역 node_modules 디렉터리에 내려받았음을 알 수
있다.
8 https://www.npmjs.org/
473장 - 모듈과 노드 패키지 관리자
전역 설치 대 지역 설치
별다른 옵션을 주지 않으면 npm install 명령은 요청한 노드 모듈을 현재 디렉터리의 node_
modules 디렉터리에 지역local으로 설치한다. 대부분의 모듈은 해당되지 않지만 명령행에서 바
로 수행할 수 있도록 의도된 모듈도 있다. 이런 모듈을 노드와 자바스크립트로 작성했다는 점만
빼면 다른 네이티브 명령이나 셸 스크립트 명령과 다름없다. 이들은 전역global으로 설치하여 특
정 프로젝트 외부에서도 사용할 수 있다. 우리는 유명한 전역 모듈 하나를 이미 알고 있다. 바
로 npm이다. express-generator 모듈도 여기에 해당한다. express-generator는 간단한
명령으로 터미널에 일반적인 익스프레스 앱 서버(파일 구조와 보일러플레이트 코드9 )를 생성
해준다.
이 모듈은 나중에 사용할 예정이므로 지금 전역으로 설치해보자. 터미널에 다음 명령을 입력하
면 된다.
npm install express-generator --global
파일시스템의 권한을 변경하지 않았다면 설치 과정에서 EACCES 오류가 발생할 것이다. 자연
스러운 현상이다. EACCES 오류는 npm이 전역 모듈을 설치할 위치에 쓰기 권한이 없음을 의
미한다. 인터넷에서도 쉽게 다양한 해법을 찾을 수 있지만, 특권 사용자나 보안 문제 걱정 없이
해결하는 방법을 소개하겠다.
전역 설치 설정
터미널에서 홈 디렉터리로 이동해서 npm config set prefix ~/npm 명령을 실행한다. 이렇게 하
면 prefix 옵션을 npm 전역으로 설정한다. npm prefix 명령을 실행해서 결과가 <현재 사용자
홈 디렉터리>/npm/bin으로 나오면 제대로 설정된 것이다. 이 명령은 npm에 기본 위치(일반적인
사용자에게는 쓰기 권한이 없는) 대신 전역 연산 과정에서 읽고 쓸 디렉터리 위치를 알려준다.
아직 $PATH 환경 변수에 ~/npm을 포함하는 작업이 남아 있다. 이 단계를 건너뛰면 명령행에서
실행할 때마다 ~/npm 디렉터리의 모듈을 가리키는 완전한 경로를 제공해야 하는 불편함을 겪게
된다.
9 역주_ 컴퓨터 프로그래밍 부문에서, 보일러플레이트 코드는 여러 곳에서 거의 변경 없이 포함될 수 있는 코드 양식을 의미한다. 필요한 부
분만을 채워 넣게 만들어주는 템플릿과도 유사하다.
48 1부 - Node.js
노트_ $PATH 설정
$PATH는 유닉스 계열 운영체제에서 사용하는 환경 변수로, 실행 가능한 프로그램이 위치한 디렉터리 목록
을 담고 있다. 앱은 이 값을 참조해서 실행 도중에 외부 앱을 찾을 수 있다. 예를 들어 IDEIntegrated Development
Environment도 $PATH 값을 사용해서 외부 컴파일러, 디버거, 소스 코드 관리 시스템과 같은 항목을 찾는다. 윈
도우 운영체제에서는 %PATH%로 참조한다.
이제 express-generator 모듈을 다시 설치해보면 EACCES 오류 없이 성공할 것이다. 이 과
정은 한 번만 설정해두면 되기 때문에 앞으로의 전역 모듈 설치 때는 신경 쓰지 않아도 매끄럽게
진행될 것이다. 마지막으로 express-generator가 제대로 설치되었는지 확인하는 방법을 알아
보자. 우선 임시 디렉터리를 하나 생성하고 터미널에서 그 위치로 이동한다. 여기서 express를
실행하면 여러 파일과 디렉터리가 생성되었다는 메시지가 출력될 것이다. 디렉터리에 실제로
app.js, package.json 파일과 여러 하위 디렉터리가 만들어져 있다면 제대로 설치된 것이다.
3.1.2 npm search 명령
npm search 명령은 터미널을 떠나지 않고도 npm 레지스트리를 질의하는 빠른 방법을 제공한
다. 마크다운Markdown10으로 작성된 파일의 내용을 표시하고 싶다고 가정하자. 노드 모듈 생태계
에는 마크다운을 처리할 수 있는 모듈이 20개나 존재한다. 이처럼 대부분의 경우에는 직접 새로
운 기능을 작성하지 않아도 된다. 기존 모듈들은 이미 테스트를 거쳤고 여러 커뮤니티에서 오랫
동안 사용해왔다. 따라서 직접 제작하기 전에 npm 레지스트리에서 필요한 모듈을 찾아보자.
터미널에서 npm search markdown을 입력한다. 처음 search 명령을 실행하면 약간 시간이 걸
릴 테지만, 정상적인 상황이다. 레지스트리에서 제목, 설명, 태그 중 하나에 ‘markdown’이라
는 문구를 포함하는 모든 사용 가능한 노드 모듈이 출력될 것이다.
이제 npm install <모듈 이름>을 사용해서 원하는 모듈을 설치하면 된다. 패키지에 대한 세부
사항이 궁금하다면 npm docs <모듈 이름> 명령을 사용하자. 패키지가 적절히 구성되어 있으면
웹 브라우저를 띄워 모듈의 홈페이지로 안내할 것이다.
10 역주_ 위키 문법과 비슷한 마크업 언어
493장 - 모듈과 노드 패키지 관리자
명령행 외에도, 직접 npm 홈페이지의 검색 기능을 이용할 수 있다.11 검색 결과에는 모듈 인기
도, 별점, 의존성 목록, 다른 유용한 데이터가 나타날 것이다.
명령행과 웹사이트 모두에서 npm은 노드 생태계의 핵심 위치를 차지한다. 여기서는 몇 가지
중요한 명령어에 대해서만 빠르게 살펴보았으니 자세한 내용은 npm 문서를 확인해보기 바란
다.12 또 하나의 핵심 명령으로 npm link도 있는데, 이번 장이 끝나기 전에 자세히 살펴보겠다.
3.2 package.json
npm install 명령이 package.json 파일을 찾아서 그 안에 나열된 패키지를 설치한다는 사실을
알았다. 그럼 간단한 package.json 파일을 하나 살펴보자.
리스트 3-1 예제 package.json 파일
{
"name": "hr",
"version": "1.0.0",
"scripts": {
"start": "echo \"Run the correct js file to start your application\" && exit 0",
"populate": "node ./bin/populate_db"
},
"dependencies": {
"async": "0.9.0",
"debug": "0.7.4",
"express": "4.2.0",
"mongoose": "3.8.11"
}
}
이 파일의 최상위 키를 나눠서 설명하겠다.
11 https://www.npmjs.org/
12 https://www.npmjs.org/doc/
50 1부 - Node.js
■ name
모듈의 이름이다. 일반적으로 이 키의 값은 npm install <모듈 이름> 명령에 주어지는 <모
듈 이름>과 같다. 필수 키지만, 모듈을 npm 레지스트리에 공개할 계획이 아니라면 고유
한 값일 필요는 없다. 이름에 ‘node’나 ‘js’가 들어가서는 안 된다. 또한 URL에 사용 불가
능한 문자는 피해야 한다. 이 name이 npm 레지스트리에서 사용할 URL에 포함되기 때문
이다.
■ version
패키지의 버전으로, 주버전.부버전.패치 형태로 표현한다. 이런 형식을 시멘틱 버전semantic
versioning이라 하며 1.0.0부터 시작하기를 권장한다.
■ scripts
package.json 파일이 위치한 디렉터리에서 실행할 수 있는 추가적인 npm 명령을 제공한
다. 예를 들어 [리스트 3-1]의 package.json 파일이 담긴 디렉터리에서 npm run start
명령을 입력하면, 터미널에 ‘Run the correct js file to start your application’이라
는 로그가 출력될 것이다. npm run populate 명령을 실행하면, npm은 node ./bin/
populate_db를 수행하려 시도할 것이다. 물론 이 파일은 아직 존재하지 않으니 명령은 실
패할 것이다. 유효한 JSON 키라면 무엇이든 추가 명령의 이름으로 쓸 수 있고, 그 값으
로는 노드 명령이나 셸 스크립트를 적어주면 된다.
■ dependencies
일반적으로 package.json 파일에서 가장 많은 정보가 저장되는 장소다. dependencies
는 현재 모듈이나 앱이 기능하기 위해 필요한 모든 모듈을 열거한다. 키는 모듈 이름이
며, 값은 요구하는 모듈 버전이다. package.json 파일에서는 >=, ~, ^를 조합해서 다양한
방식으로 구체적인 버전이나 버전 범위를 명시할 수 있다. 예를 들어 >= 0.9.x, ~3.x,
^0.5.x와 같은 표현이 가능하다. 또한 깃허브를 직접 가리키는 방식으로 버전을 설정할
수도 있다. ‘git://git-hub.com/flatiron/winston#master’가 좋은 예다. 특히 버전이
1.0.0보다 낮은 모듈을 사용하고 ^과 ~ 기호까지 사용한다면 구체적인 npm 버전을 명시
하는 것이 상당히 복잡해질 수 있다. npm이 사용하는 시멘틱 버전에 대한 자세한 설명은
깃허브에 공개된 문서를 참조한다.13
13 https://github.com/npm/node-semver
63
언어의 프로그래밍 모델은 개발자가 코드를 작성하는 방법을 정의한다. 노드의 본질은 자바스
크립트이므로 언어 규칙은 동일하다. 하지만 노드는 핵심 모듈과 외부 모듈 모두에서 코드 일관
성을 유지하기 위한 몇 가지 관례를 추가했다. 2장에서는 노드로 단순한 HTTP 서버를 작성하는
방법을 설명했다. 이번 장에서는 2장에서 만든 서버의 코드 구조를 확실히 이해해서 다른 노드
앱으로 확장할 수 있도록 도와주겠다.
4.1 이벤트 루프
자바스크립트와 노드를 이해하는 데 가장 중요한 개념은 단일 스레드 방식이다. 이는 자바스크
립트 앱이 한 번에 하나의 작업만을 수행할 수 있음을 의미한다. 하지만 이벤트 루프를 사용해서
멀티 스레드로 동작하는 듯한 착각을 불러일으킬 수 있다. 자바스크립트 엔진은 당장 처리하지
못하는 작업을 담아두기 위해 여러 개의 큐queue를 관리한다. 이벤트, 타이머, 인터벌, 즉시 실행
큐 등이 있다. 그리고 이벤트 루프의 각 사이클1마다 하나 이상의 작업을 큐에서 가져와서 수행
한다. 작업을 수행하는 과정에서 큐에 더 많은 작업을 추가하기도 한다. 각 사이클은 틱이라고
알려진 더 작은 단계로 구성된다. 타이머 큐에서 항목에 접근하는 동작을 틱의 예로 볼 수 있다.
1 https://github.com/joyent/node/issues/7703#issuecomment-44692636
노드 프로그래밍 모델
CHAPTER 4
64 1부 - Node.js
노트_ 동시 수행
자바스크립트로도 동시 수행concurrent execution을 사용하는 예가 몇 가지 있다. 가장 흔한 예인 웹 워커Web
Worker는 별도의 스레드로 코드를 수행한다. 노드에서는 child_process와 cluster 모듈을 사용해서 자식
프로세스를 포크fork할 수 있다.
[리스트 4-1]은 여러 이벤트 루프 사이클에 걸쳐 수행되는 간단한 예를 보여준다.
리스트 4-1 여러 이벤트 루프 사이클에 걸쳐 수행되는 코드
console.log('one event loop cycle');
setTimeout(function() {
console.log('different cycle');
}, 100);
console.log('same cycle');
이 예제는 콘솔에 문자열 세 개를 출력한다. 문자열이 출력되는 순서는 수행된 이벤트 루프 사이
클을 반영한다. 실행 결과는 [리스트 4-2]와 같다.
리스트 4-2 콘솔에 출력된 내용
$ node event-loop.js
one event loop cycle
same cycle
different cycle
코드의 중간에 위치함에도 불구하고 setTimeout( ) 내부의 console.log( )가 마지막으로 수
행된다. 이런 현상이 발생하는 이유는 setTimeout( ) 함수가 미래 사이클에서 수행하게 코드를
큐에 집어넣기 때문이다.
654장 - 노드 프로그래밍 모델
4.1.1 동시성 착각
이벤트 루프는 자바스크립트 앱이 개별 작업을 빠르게 수행하여 마치 멀티 스레드처럼 보이
게 만든다. 불행히도 이런 착각은 코드 몇 줄만으로 아주 쉽게 깨질 수 있다. 예를 들어 [리스트
4-3]은 인터벌을 두 개 생성해서 콘솔에 주기적으로 문자열을 출력하게 만든다. 위 인터벌은
‘Task A’를 출력하고, 아래 인터벌은 ‘Task B’를 출력한다.
리스트 4-3 두 개의 인터벌
setInterval(function() {
console.log('Task A');
}, 10);
setInterval(function() {
console.log('Task B');
}, 15);
인터벌이 정말로 동시에 수행된다면 둘 중 하나에 변경이 생겨도 다른 작업에 영향을 주지 않을
것이다. 자바스크립트에서 그렇지 않다는 사실을 증명하기 위해 [리스트 4-4]에서는 ‘Task B’에
무한 루프를 걸었다.
리스트 4-4 자바스크립트에서 동시성 착각을 깨뜨리는 무한 루프
setInterval(function() {
console.log('Task A');
}, 10);
setInterval(function() {
while (true);
console.log('Task B');
}, 15);
[리스트 4-4]를 실행하면 ‘Task A’는 10밀리초 후에 콘솔에 출력되지만, 그 후로는 아무런 반
응도 없다. ‘Task B’는 처음 실행될 때 무한 루프에 빠지게 된다. 이는 이벤트 루프로 제어권을
반환하지 못하게 방해하며, 그 결과 ‘Task A’는 결코 다시 실행되지 못한다. 두 작업이 별도의 스
레드나 프로세스로 수행되었다면 ‘Task A’는 ‘Task B’가 멈춘 동안에도 계속해서 수행되었을 것
이다.
66 1부 - Node.js
4.2 비동기식 코딩
노드를 한마디로 표현하면 비동기식 앱, 특히 비동기식 I/O를 위한 설계라고 할 수 있다. I/O
는 엄청나게 느리다. 대다수 언어는 동기식 I/O (차단 I/O )를 수행하며, 이는 (디스크 읽기, 네
트워크 호출 등과 같은) I/O 연산을 한 번 시작하면 연산이 끝날 때까지 가만히 있음을 의미한
다. 일반적으로 차단 I/O를 사용하는 언어는 멀티 스레드를 지원한다. 따라서 스레드 하나가 가
만히 노는 동안 다른 스레드가 다른 작업을 수행할 수 있다. 물론 이미 설명했듯이 자바스크립트
는 단일 스레드 모델이다. 노드가 만약 I/O를 동기식으로 수행했다면, I/O가 끝날 때까지 앱
전체가 그대로 멈춰버렸을 것이다.
차단 I/O가 일으키는 성능 불이익을 피하기 위해 노드는 거의 편집증적으로 비동기식 비차단
I/O를 사용한다. 그 덕분에 앱은 I/O와 같이 시간이 오래 걸리는 작업도 그 응답을 기다리는 대
신 계속해서 다른 코드를 수행할 수 있다. 비동기식 연산이 끝나면, 연산 결과는 처리를 위해 노
드 앱에 반환된다.
이론적으로는 충분히 단순해 보인다. 하지만 풀어야 할 문제가 하나 남아 있다. 비동기 연산의
결과는 노드 앱에 어떻게 전달해야 할까? 몇 가지 가능성이 존재한다. 가장 인기 있는 세 가지
방식은 콜백 함수, 이벤트 전송자event emitter, 프라미스promise다. 어떤 방식이 올바른지를 놓고 열
정적인 논쟁이 벌어져왔지만, 결론은 개인 취향으로 귀결된다. 노드 핵심 구현에서는 콜백 함수
가 왕좌를 차지했고 그 다음으로 이벤트 전송자가 뒤를 쫓고 있다. 프라미스는 외부 모듈에서 상
당한 성공을 거뒀으며, 앵귤러에서 제법 사용되고 있기 때문에 여기서도 설명하겠다.
4.3 콜백 함수
콜백 함수는 비동기식 함수의 인자로 전달되며 비동기식 연산이 완료되면 연산 결과와 함께 호
출되는 함수를 일컫는다. [리스트 4-5]는 콜백 함수를 사용한 비동기식 코드를 보여준다.
리스트 4-5 콜백 함수를 사용한 비동기식 파일 읽기
var fs = require('fs');
fs.readFile('README.txt', 'utf8', function(error, data) {
674장 - 노드 프로그래밍 모델
if (error) {
return console.error(error);
}
console.log(data);
});
이 예제는 파일시스템 관련 함수를 제공하는 핵심 모듈인 fs를 활용한다. fs.readFile( )이 바
로 우리가 살펴볼 비동기식 I/O 메서드다. readFile( )은 인자 세 개를 받으며, 각각 파일 이
름, 파일 내용을 해석할 때 사용할 문자 인코딩 방식, 파일을 읽고 나면 호출될 콜백 함수다. 지
금 예에서는 UTF-8 문자 인코딩을 사용해서 README.txt 파일을 읽는다.
readFile( )은 파일 I/O를 일으킨다. I/O가 완료되면 인자 두 개를 받아 readFile( ) 콜백
함수가 호출된다. 첫 인자인 error는 파일을 읽는 동안 발생할 수 있는 예외를 담는다. 예를 들
어 README.txt 파일이 존재하지 않으면 error 자리에는 Error 객체가 전달된다. 반면에 파일
이 존재하며 데이터도 문제없이 읽었다면 error는 null이 되고 data는 파일 내용을 담은 문자
열이 될 것이다.
4.3.1 호출 관례
여러 노드 프로젝트의 코드를 더욱 일관되게 유지하기 위해 노드 커뮤니티는 구체적인 관례를
채택해왔다. 특히 여러 개발자가 함께하는 프로젝트라면 우수 사례로 고려되었다. [리스트 4-5]
는 가장 일반적인 관례 두 가지를 따르고 있다. 첫 번째는 인자로 전달하는 콜백 함수는 반드시
마지막 인자가 되어야 한다는 것이다. 이 관례는 코드 가독성을 높여준다. 보다시피 모든 입력
인자가 먼저 나오고 콜백 함수가 마지막에 나온다.
두 번째는 오류 처리와 관련된 관례다. 콜백 함수에 error를 전달해야 한다면 error를 첫 번째
인자로 사용하기를 권장한다. 이는 독단적으로 보일지도 모르지만, 개발자의 오류 처리 우선순
위를 높이는 효과가 있다. 이렇게 생각하자. error 인자가 마지막에 나오면 많은 개발자는 단순
히 이를 무시할 것이다. 실제로 error가 마지막에 나오면 error 인자를 완전히 생략한 콜백 함
수를 작성할 수 있다. error가 먼저 나오게 만들어서 ‘이봐, 뭔가 잘못되었으니 점검해봐’라고
경고할 수 있다.
68 1부 - Node.js
[리스트 4-5]에는 나오지 않지만 메서드 이름과 관련한 중요한 관례 하나를 더 짚고 넘어가겠
다. 앞서 언급했듯이 비동기식 코드는 노드에서 일반적인 형태다. 하지만 동기식 코드도 노드에
서 한 자리를 차지한다(초기화 코드, 셸 스크립트 등). 그래서 많은 동기식 함수는 이름 뒤에
‘Sync’라는 문자열을 붙여 코드 이해를 돕고 있다. 대다수 함수에 동기식 버전과 비동기식 버전
이 함께 존재하는 fs 모듈에 이런 현상이 두드러진다.2 예를 들어 [리스트 4-5]는 readFile( )
메서드를 사용했지만 [리스트 4-6]처럼 동기식 함수인 readFileSync( )를 사용해서 작성할
수도 있다.
리스트 4-6 readFile(리스트 4-5)에 대응하는 동기식 함수
var fs = require('fs');
try {
var data = fs.readFileSync('README.txt', 'utf8');
console.log(data);
} catch (error) {
console.error(error);
}
4.3.2 예외 처리
비동기식 코드와 달리 [리스트 4-6]의 동기식 코드는 오류 처리에 try...catch 문을 사용했음
에 주목하자. 이는 비동기식 코드와의 핵심적인 차이점이니 반드시 이해하고 넘어가야 한다. 비
동기식 함수가 호출되어 완료되기까지 프로그램 수행은 계속된다. 그동안 앱의 콜스택은 계속
변화한다.
비동기로 실행되는 코드에서 발생하는 오류는 try...catch 안에서 던져지는 것이 아니다, 그러
므로 try...catch는 이 오류를 잡을 능력이 없다. 이런 사실을 잘 보여주는 예가 [리스트 4-7]
이다. 이 예제에서 파일을 읽다가 오류가 발생하면 콜백 함수가 받아서 다시 던진다. 하지만 콜
백 함수는 비동기식으로 호출되었으므로 try...catch는 이 오류를 처리할 수 없다.
2 http://nodejs.org/api/fs.html
694장 - 노드 프로그래밍 모델
리스트 4-7 비동기식으로 던져진 오류를 잡으려는 시도
var fs = require('fs');
try {
fs.readFile('README.txt', 'utf8', function(error, data) {
if (error) {
throw error;
return;
}
console.log(data);
});
} catch (error) {
console.error('Caught the error synchronously');
}
노드 앱의 코드를 살펴보면 try...catch가 아주 드물게 사용되었다는 사실을 눈치 챌 것이다.
JSON.parse( )와 같은 동기식 함수에는 사용되지만 나머지 부분에서는 잘 사용되지 않는다. 노
드는 도메인3과 같은 비동기식 오류 처리 메커니즘을 지원하지만, 일관성 없게 동작하며 공식
문서에도 불안정하다고 나와 있다. 일반적으로 노드에서의 오류 처리는 오류 처리에 적합한 장
소에 도달할 때까지 콜백 함수를 사용해서 전달하는 방식을 선호한다.
4.3.3 콜백 지옥
비동기식 코드는 잘못 사용하면 지옥을 맛볼 수 있다는 단점이 있다. 이를 소위 콜백 지옥이라고
한다. 콜백 지옥은 많은 콜백 함수가 서로 중첩되어 있을 경우에 발생한다. [리스트 4-5]의 파일
읽기 프로그램을 생각해보자. 이 예제는 단순히 파일을 하나 읽으려 시도했고 오류가 발생하면
콘솔에 출력하고 종료한다. 하지만 세세한 오류 상황별로 다른 조치를 원한다면 어떤 상황이 벌
어질까?
코드를 살짝 덧붙이면 파일이 존재하는지, 주어진 파일 이름이 디렉터리가 아닌 진짜 파일을
가리키는지 확인할 수 있다. [리스트 4-8]은 이것을 어떻게 수행하는지 보여준다. 불행히도
fs.exists( )와 fs.stat( )을 추가로 호출하면 함수 중첩이 두 배로 증가한다. 들여쓰기가 점
3 http://nodejs.org/api/domain.html
70 1부 - Node.js
차 깊어지며 콜백 지옥의 시작을 목격할 수 있다. 앱이 복잡해지면 10단계 이상 중첩되는 모습
도 어렵지 않게 접할 수 있다. 이쯤 되면 유지보수는 물론이고 읽기조차 상당히 힘든 코드가 탄
생한다.
리스트 4-8 콜백 지옥으로 고통받는 소규모 비동기식 프로그램
var fs = require('fs');
var fileName = 'README.txt';
fs.exists(fileName, function(exists) {
if (!exists) {
return console.error('File does not exist');
}
fs.stat(fileName, function(error, stats) {
if (error) {
return console.error(error);
} else if (!stats.isFile()) {
return console.error('Not a file');
}
fs.readFile(fileName, 'utf8', function(error, data) {
if (error) {
return console.error(error);
}
console.log(data);
});
});
});
다행히도 콜백 지옥은 코드를 잘 구조화하면 쉽게 회피할 수 있다. 가장 먼저, 코드를 잘 살펴보
면 if 문이 함수 전체를 감싸는 게 아니라 특정 조건을 확인해서 조건에 부합되면 결과를 반환
하며 함수를 끝낸다. 다음으로 익명 콜백 함수를 대신해서 이름 있는 함수를 사용할 수 있다.
[리스트 4-9]는 이름 있는 함수를 사용해서 위 예제를 다시 작성한 것이다. 이 방법을 사용하면
코드는 살짝 커지지만 콜백 지옥이 즉시 사라진다는 사실을 알 수 있다.4
4 콜백 지옥을 피하는 가장 일반적인 방법은 제어 흐름 모듈을 사용하는 것이다. 가장 인기 있는 제어 흐름 모듈은 async다. https://
github.com/caolan/async
81
3장에서는 노드의 모듈 시스템과 require( ) 함수를 설명했고, 4장에서는 노드 식의 코드 작성
법을 설명했다. 이 과정에서 http와 fs 핵심 모듈을 사용한 몇 가지 예를 살펴봤다. 이번 장에서
는 앞서 설명한 모든 내용을 정리해서 몇 가지 노드 핵심 모듈의 사용법을 자세히 설명한다. 시
작하기 전에 노드 핵심의 표면만 긁을 뿐이라는 사실을 지적하고 넘어간다. 얼마 되지 않은 페이
지로 모든 내용을 다루기에는 노드 핵심이 너무 방대하기 때문이다. 그럼에도 불구하고 이 장을
끝낼 무렵이면 노드 문서를 이해하는 데 충분한 지식을 확보할 수 있을 것이다.1
5.1 명령행 인자
노드에서 명령행 인자를 읽는 작업은 엄청나게 단순하다. 노드 앱으로 넘어온 모든 명령행 인자
는 process.argv 배열에서 얻을 수 있다. 이 배열의 처음 두 원소는 node 실행 파일과 호출된
자바스크립트 파일의 이름이다. 다시 말해 실제 앱 인자는 process.argv[2]부터 시작한다. [리
스트 5-1]은 forEach( ) 함수로 명령행 인자를 콘솔에 출력하는 방법을 보여준다. 예제 코드
를 argv-demo.js 파일로 저장하고 명령행에서 node argv-demo foo bar baz를 실행한다.
1 http://nodejs.org/api/
핵심 모듈
CHAPTER 5
82 1부 - Node.js
리스트 5-1 process.argv로 명령행 인자 확인하기
process.argv.forEach(function(value, index, args) {
console.log('process.argv[' + index + '] = ' + value);
});
5.2 파일시스템 작업
이미 몇 가지 예제에서 보았듯이 fs 모듈은 파일시스템 관련 기능을 제공한다. 과거에 클라이언
트 쪽 자바스크립트 개발자였다면, 파일시스템 관련 작업 API가 존재하지 않거나 일관성이 없
었다는 사실에 얼마나 불만을 느꼈었는지 알고 있을 것이다. 완벽한 서버 쪽 구현인 노드는 이런
불만을 과거의 유물로 만들었다.
5.2.1 __filename과 __dirname노드 앱에서는 __filename과 __dirname을 사용해서 파일의 절대 위치를 파악할 수 있다.
__filename과 __dirname는 문자열이며, 이름이 의미하듯이 실행한 파일 이름과 그 파일을 담
고 있는 디렉터리를 명시한다. [리스트 5-2]는 __filename과 __dirname의 사용 예를, [리스트
5-3]은 이 코드를 실행했을 때의 출력 결과를 보여준다. 출력 결과는 코드를 실행한 디렉터리에
따라 달라질 것이다.
리스트 5-2 파일 경로를 알려주는 __filename과 __dirname
console.log('Currently executing file is ' + __filename);
console.log('It is located in ' + __dirname);
리스트 5-3 [리스트 5-2]를 실행한 결과
$ node file-paths.js
Currently executing file is /home/node/file-paths.js
It is located in /home/node
835장 - 핵심 모듈
__filename과 __dirname이 전역 변수가 아니라는 사실에 주의하자. 이들은 모든 파일에 정의
된 지역 변수다. 따라서 두 변수의 값은 파일마다 달라질 것이다.
5.3 현재 작업 디렉터리
노드 앱에는 현재 작업 디렉터리라는 개념이 존재한다. 현재 작업 디렉터리는 상대 파일 경로의
기준이 되는 디렉터리를 일컫는다. 프로그램 수행 중에 process.cwd( ) 함수를 사용해서 언제
든지 현재 작업 디렉터리에 접근할 수 있다. 이 함수는 인자를 받지 않으며, 앱의 작업 디렉터리
를 표현하는 문자열을 반환한다.
또한 process.chdir( ) 함수로 현재 작업 디렉터리를 변경할 수 있다. 이 함수는 변경 대상 디
렉터리를 표현하는 문자열 하나를 인자로 받는다. 문제가 발생할 경우(예를 들면 목표 디렉터
리가 존재하지 않는 경우)에는 예외를 던진다.
[리스트 5-4]는 현재 작업 디렉터리를 검사하고 변경하는 방법을 보여준다. 이 예제는 현재 작
업 디렉터리를 출력하고 나서 루트(/) 디렉터리로 이동을 시도한다. 오류가 발생하면 stderr로
오류 내용을 출력한다. 마지막으로 새로운 작업 디렉터리를 콘솔에 출력한다.
리스트 5-4 현재 작업 디렉터리 변경 후 출력
console.log('Starting in ' + process.cwd());
try {
process.chdir('/');
} catch (error) {
console.error('chdir: ' + error.message);
}
console.log('Current working directory is now ' + process.cwd());
84 1부 - Node.js
5.3.1 파일 읽기
노드 앱에서 파일을 읽는 가장 단순한 방법은 fs 모듈의 readFile( )과 readFileSync( ) 함수
를 사용하는 것이다. 이 두 함수는 첫 번째 인자로 읽으려는 파일 이름을 요구한다. 선택사항인
두 번째 인자는 문자열 인코딩과 같은 추가사항을 명시하기 위해 사용한다. 인코딩을 명시하지
않으면 파일 내용은 Buffer (가공하지 않는 이진 데이터 저장에 사용되는 노드의 데이터 타입)
에 저장되어 반환된다.
동기식 호출인 readFileSync( )는 파일 내용을 반환하거나 뭔가 잘못되었을 경우 오류를 던진
다. 비동기식 호출인 readFile( )은 마지막 인자로 콜백 함수를 받는다. 콜백 함수는 오류 객체
와 파일 내용이라는 두 인자를 받는다. [리스트 5-5]의 앱은 __filename을 readFile( )의 인자
로 넘겨서 자기 자신의 소스 코드를 읽는다. [리스트 5-6]은 동일한 작업을 readFileSync( )를
사용해서 동기식으로 구현한 코드다.
리스트 5-5 자신의 소스 코드를 읽는 앱
var fs = require('fs');
fs.readFile(__filename, function(error, data) {
if (error) {
return console.error(error.message);
}
console.log(data);
});
리스트 5-6 [리스트 5-5]와 기능이 동일한 동기식 코드
var fs = require('fs');
var data;
try {
data = fs.readFileSync(__filename);
console.log(data);
} catch (error) {
console.error(error.message);
}
855장 - 핵심 모듈
이 두 예제는 readFile( )과 readFileSync( )가 반환하는 Buffer 객체를 가공되지 않은 연속
적인 바이트로 출력한다는 사실에 주목하자. 파일 내용을 그대로 표현하지만, 사용자 친화적이
라고 보기는 어렵다. 이 데이터를 문자열로 보는 방식에는 두 가지가 있다. 첫째는 data 변수의
toString( )을 호출하는 방식이다. 이 경우 Buffer 내용을 UTF-8로 인코딩된 문자열로 반환
한다. 둘째는 [리스트 5-7]처럼 두 번째 선택 인자를 사용해서 인코딩 방식을 명시하는 것이다.
이 경우 Buffer 대신 명시한 방식으로 인코딩된 문자열을 반환한다.
리스트 5-7 파일을 읽을 때 인코딩 방식 설정하기
var fs = require('fs');
fs.readFile(__filename, {
encoding: 'utf8'
}, function(error, data) {
if (error) {
return console.error(error.message);
}
console.log(data);
});
5.3.2 파일 쓰기
파일 쓰기도 writeFile( )과 writeFileSync( ) 함수를 사용해서 쉽게 처리할 수 있다. 두 함수
는 각각 readFile( )과 readFileSync( )에 대응하는 쓰기 함수다. 이들은 첫 번째 인자로 파일
이름을 받으며, 두 번째 인자로 파일에 쓸 데이터(문자열이나 Buffer로)를 받는다. 세 번째 인
자는 선택사항으로 인코딩 타입과 같은 추가 정보를 전달하기 위해 사용된다. readFile( ) 계
열과는 달리 두 쓰기 함수는 UTF-8 인코딩을 기본으로 한다. writeFile( )은 마지막 인자로
콜백 함수를 받는다. 이 콜백에 전달되는 유일한 인자는 오류 객체다. writeFileSync( )는 값
을 반환하지 않으며, 필요하다면 오류를 던진다. [리스트 5-8]은 writeFile( )을 사용해서 파
일에 쓰는 방법을 보여준다.
86 1부 - Node.js
리스트 5-8 writeFile()을 사용해서 파일에 데이터 쓰기
var fs = require('fs');
var data = 'some file data';
fs.writeFile(__dirname + '/foo.txt', data, function(error) {
if (error) {
return console.error(error.message);
}
});
기본적으로 writeFile( )은 새로운 파일을 생성하거나 기존 파일을 덮어쓴다. 이를 원치 않으
면 선택사항의 세 번째 인자의 flag 값을 변경해주면 된다. 예를 들어 flag에 ‘wx’를 넘기면 파
일이 이미 존재할 경우 오류를 던지고, ‘a’를 넘기면 기존 파일 뒤에 데이터를 덧붙인다. 전체
flag 목록은 fs 문서2를 참조한다. [리스트 5-9]에서는 ‘wx’ 값을 사용하고 있다.
리스트 5-9 writeFile()을 호출할 때 flag 옵션 설정하기
var fs = require('fs');
var data = 'some file data';
fs.writeFile(__dirname + '/foo.txt', data, {
flag: 'wx'
}, function(error) {
if (error) {
return console.error(error.message);
}
});
5.4 스트림
스트림stream은 두 지점 사이에서 데이터를 옮기는 메커니즘이다. 스트림은 단순한 정원용 호스
로 생각할 수 있다. 호스는 수원에 연결되어 있다. 물은 수원에서 호스의 다른 쪽으로 흘러간다.
다른 쪽 끝에는 스프링클러 같은 장치가 달려 있어 흐르는 물을 사용할 수 있다.
2 https://nodejs.org/api/fs.html#fs_fs_open_path_flags_mode_callback
95
지금까지 실제 노드 서버를 작성하는 데 필요한 사항을 모두 설명했다. 이를 바탕으로 이번 장
에서는 MEAN 스택용 예제인 인력 관리human resource (HR ) 앱의 노드 서버 부분을 구축해볼 것
이다.
6.1 서버 계획
코드를 작성하기 전에, 웹 서버가 반드시 해야 할 작업이 무엇인지 정의해야 한다. 우리의 예에
서는 직원 목록과 개인별 직원 정보를 보여주는 두 가지 기능이 필요하다. 서버는 CSS, 클라이
언트 쪽 자바스크립트, 이미지, HTML 파일과 같은 정적 자원을 전송할 수 있어야 한다. 서비
스 방식은 SOAP/WSDL1 대신 RESTful을 사용하기로 결정했다. 이 책과 함께 HR 앱을 개발
하다보면 앵귤러와 같은 다양한 프런트엔드 프레임워크와 연동할 때 RESTful API가 훨씬 쉽
다는 사실을 알게 될 것이다. 또한 RESTful 설계 패턴을 잘 따르면 HR 앱에서 요구하는 직원
관련 기능의 CRUDCreate: 생성, Retrieve: 검색, Update: 갱신, Delete: 삭제 API가 명확하게 드러난다. 그리고 정
적 자원은 별도의 디렉터리에 구분해서 저장하고, 코드는 최대한 논리적이고 재사용 가능한 조
각으로 분해해서 작성할 것이다.
1 http://en.wikipedia.org/wiki/Web_Services_Description_Language
노드 서버 구축하기
CHAPTER 6
96 1부 - Node.js
6.2 앱 구조 잡기
다음은 HR 앱의 파일 구조다. 여기에 열거된 파일과 디렉터리는 자주 참조할 테니 쉽게 찾아볼
수 있도록 표시해두자.
리스트 6-1 노드 예제 앱을 위한 최종 디렉터리 구조
|----database
| |----employees.json
|----index.js
|----lib
|----node_modules
| |----colors
|----package.json
|----public
| |----home.html
| |----style.css
일반적으로 lib 디렉터리에는 지역적이고 프로젝트에 밀접한 모듈이 위치한다. public 디렉터
리에는 정적 자원을 저장할 것이다. 이 예제를 최대한 단순하게 유지하기 위해 employees.json
을 질의를 위한 데이터베이스처럼 사용할 것이다. node_modules에는 colors 모듈을 이미 설치
해놓았다.
6.3 작업 착수
npm 명령을 사용해서 새로운 노드 프로젝트를 시작했던 것을 기억하는가? 새로운 디렉터리를
생성하고 그 디렉터리에서 적절한 npm 명령을 사용해서 새로운 노드 앱을 초기화하자. 그런 다
음에 colors를 설치하고 package.json이 제대로 생성되었는지 확인하자. 다음으로 최상위 앱
디렉터리에 index.js 파일을 생성하자.
마지막으로 이 책에서 이미 여러 차례 보았던 스텁 서버를 작성할 것이다.
976장 - 노드 서버 구축하기
리스트 6-2 스텁 서버
var http = require('http');
http.createServer(function (req, res) {
// 인자를 파싱한 url
var _url;
// 메서드명을 소문자로 사용하는 클라이언트에 대비해서 대문자로 통일
req.method = req.method.toUpperCase();
console.log(req.method + ' ' + req.url);
res.end('The current time is ' + Date.now())
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
[리스트 6-2]는 서버를 생성해서 포트 1337번을 듣기 시작한다. localhost:1337에 요청을 보
내면, 서버는 자신이 듣고 있음을 알려주는 로그를 콘솔에 출력한다. 하지만 클라이언트에는 결
코 응답하지 않는다. 이유를 알겠는가? 바로 res 객체에 아무런 작업도 하지 않았기 때문이다.
특히 res.end( )를 호출한 적이 없다. res.end( )는 응답의 끝을 의미하며 들어오는 요청에 대
한 응답을 전송하는 역할을 담당한다. 서버에 살을 붙이면서 차차 올바른 응답을 채울 것이다.
노트_ req와 res
노드 서버에서 자주 보이는 req와 res 객체는 ‘request’와 ‘response’를 줄인 표현이다. 이 예제에서 req
는 http.ClientRequest 객체다. 이 객체에 대한 세부 정보는 노드 문서2를 참조한다. 대응되는 res는
http.ServerResponse 객체다. 역시 노드 문서에서 세부 정보를 찾을 수 있다.3 지금은 ‘req/request’를
들어오는 요청으로 ‘res/response’를 서버가 생성해서 궁극적으로 전송할 응답으로 기억하고, 두 객체가 제
공하는 함수, 속성, 이벤트가 궁금하면 각각의 노드 문서를 참조하자.
23
2 http://nodejs.org/api/http.html#http_class_http_clientrequest
3 http://nodejs.org/api/http.html#http_class_http_serverresponse
98 1부 - Node.js
6.4 라우팅
모든 웹 서버의 가장 기본적인 기능은 바로 요청 라우트다. 6.1절 ‘서버 계획’에서 언급했듯이
고려해야 할 주요 라우트는 다음 세 가지다.
1. 직원 목록을 검색하는 라우트
2. 특정 직원을 찾는 라우트
3. 정적 파일을 찾는 다목적 라우트
또한 이 예제 서버는 GET 요청만 지원할 것이므로 클라이언트가 GET이 아닌 요청을 시도할 때
적절히 응답해야 한다.
리스트 6-3 기초적인 라우팅을 지원하는 노드 서버
http.createServer(function (req, res) {
// 인자를 파싱한 URL
var _url;
// 메서드명을 소문자로 사용하는 클라이언트에 대비해서 대문자로 통일
req.method = req.method.toUpperCase();
console.log(req.method + ' ' + req.url);
if (req.method !== 'GET') {
res.writeHead(501, {
'Content-Type': 'text/plain'
});
return res.end(req.method + ' is not implemented by this server.');
}
if (_url = /^\/employees$/i.exec(req.url)) {
// 직원 목록 반환
res.writeHead(200);
return res.end('employee list');
} else if (_url = /^\/employees\/(\d+)$/i.exec(req.url)) {
// 라우트에 포함된 id로 직원 검색
res.writeHead(200);
return res.end('a single employee');
} else {
// 정적 파일 전송
res.writeHead(200);
996장 - 노드 서버 구축하기
res.end('static file maybe');
}
}).listen(1337, '127.0.0.1');
먼저 메서드가 GET인지 확인하고, 그렇지 않으면 res.writeHead 함수를 호출하여 응답 코드
501을 반환한다. 이 함수의 첫 번째 인자는 클라이언트에 반환할 상태 코드다. 두 번째 인자는
응답 헤더로, 이 예제에서는 ‘Content-Type’을 일반 텍스트(plain/text )로 설정했다.
요청 메서드가 GET이면 요청을 라우팅해야 한다. 먼저 요청이 ‘/employees’인지 확인한다.
req.url이 정규표현식에 부합하는지 살핀다. 부합하면 _url에 값이 저장되므로 첫 if 블록이
수행되어 응답으로 ‘employee list’를 전송한다. req.url이 첫 번째 정규표현식과 일치하지
않으면 두 번째 정규표현식으로 ‘/employees/<직원 번호>’ 형태인지 확인한다. 일치하면 서버는
‘a single employee’로 응답할 것이다. 마지막으로 요청된 URL이 두 정규표현식과 일치하지
않을 경우 정적 파일로 가정한다. 이 코드는 파일시스템에서 해당 파일을 찾아서 전송한다. 만약
파일이 존재하지 않으면 반환해야 하는 올바른 응답 코드는 404다.
직원 정보를 주는 처음 두 라우트를 위해서는 데이터베이스를 질의해야 한다. 우리는 index.js
에 데이터베이스 질의 코드를 넣는 대신 아주 단순한 데이터베이스 모듈을 작성할 것이다. 이 예
제에서 데이터베이스가 JSON 파일이라는 사실을 기억하자.
6.5 데이터베이스 모듈
우리의 데이터베이스 모듈은 ‘직원 목록’과 ‘ID로 특정 직원 정보 검색’ 기능에 필요한 논리를
캡슐화해야 한다. 앞 장에서 데이터베이스 질의는 I/O며 비차단이어야 한다고 설명한 것을 기
억할 것이다. 비차단 I/O를 위해 자바스크립트에서 주로 사용하는 패턴은 I/O 완료 시 수행될
콜백 함수를 제공하는 것이다.
lib 디렉터리에 employees.js 파일을 생성하고, database 디렉터리에 employees.json 파일
을 생성하자.
www.hanbi t .co.kr
Hanbit eBook Realtime
DRM free!어떤 디바이스에서도 자유롭게
eBook Oriented!전자책에 꼭 맞는 최적의 내용과 디자인
Hanbit eBook
Realtime 70
김세훈 지음
MFC프로그래밍주식분석 프로그램 만들기
이연복 지음
Hanbit eBook
Realtime 49Hanbit eBook
Realtime 89
자바 개발자를 위한
Vert.x애플리케이션 개발
Hanbit eBook
Realtime 49Hanbit eBook
Realtime 92
모바일/웹 메시징STOMP와 MQTT로 개발하는 IoT
모바일/웹 애플리케이션
제프 메스닐 지음 / 조건희 옮김
Mobile and Web Messaging
Hanbit eBook
Realtime 90
JavaScriptPromiseazu지음 /주우영옮김
www.hanbi t .co.kr /ebook
www.hanbi t .co.kr
전자부품 백과사전 vol.1찰스 플랫 지음 / 배지은 옮김 / 30,000원
취미공학에 필요한 핵심 전자부품을 사전식으로 정리한 안내서.
Zero to Maker: 누구나 메이커가 될 수 있다데이비드 랭 지음 / 장재웅 옮김 / 14,000원
일반인에서 메이커로. 날백수에서 무인 잠
수정 회사 CEO가 된 사나이, 데이비드 랭의 메이커 도전기.
처음 시작하는 센서키모 카르비넨,테로 카르비넨 지음임지순 옮김 / 13,000원
세상을 수치로 읽어내는 부품인 센서를 알려주는 책. 이 책을 통해 자신만의 프로젝트에 다양한 센서를 사용해보자.
프로젝트로 배우는 라즈베리 파이 도날드 노리스 지음 / 임지순 옮김
다양한 실전 프로젝트를 통해 라즈베리 파이를 쉽고 재미있게 배워본다.
Maker Pro 존 베이첼 지음 / 가격미정
메이커라면 반드시 읽어야 할 필수 계발서. 프로 메이커들과의 인터뷰 및 에세이 수록.
Make: 센서 키모 카르비넨, 테로 카르비넨, 빌 발토카리 지음 / 가격미정
필수 전자부품인 센서를 마이크로 컨트롤러 보드에 응용하는 방법을 담았다.
전자부품 백과사전 vol.2 찰스 플랫 지음 / 가격미정
<전자부품 백과사전> 시리즈의 두 번째 도서다.
즐거운 상상이 가득! 2015년 화제의 신간
전자부품 백과사전 vol.1찰스 플랫 지음 / 배지은 옮김 / 30,000원
취미공학에 필요한 핵심 전자부품을 사전식으로 정리한 안내서.
Zero to Maker: 누구나 메이커가 될 수 있다데이비드 랭 지음 / 장재웅 옮김 / 14,000원
일반인에서 메이커로. 날백수에서 무인 잠
수정 회사 CEO가 된 사나이, 데이비드 랭의 메이커 도전기.
처음 시작하는 센서키모 카르비넨,테로 카르비넨 지음임지순 옮김 / 13,000원
세상을 수치로 읽어내는 부품인 센서를 알려주는 책. 이 책을 통해 자신만의 프로젝트에 다양한 센서를 사용해보자.
프로젝트로 배우는 라즈베리 파이 도날드 노리스 지음 / 임지순 옮김
다양한 실전 프로젝트를 통해 라즈베리 파이를 쉽고 재미있게 배워본다.
Maker Pro 존 베이첼 지음 / 가격미정
메이커라면 반드시 읽어야 할 필수 계발서. 프로 메이커들과의 인터뷰 및 에세이 수록.
Make: 센서 키모 카르비넨, 테로 카르비넨, 빌 발토카리 지음 / 가격미정
필수 전자부품인 센서를 마이크로 컨트롤러 보드에 응용하는 방법을 담았다.
전자부품 백과사전 vol.2 찰스 플랫 지음 / 가격미정
<전자부품 백과사전> 시리즈의 두 번째 도서다.
즐거운 상상이 가득! 2015년 화제의 신간
풀스
택 개
발자
를 위
한M
EA
N 스
택 입
문애
덤 브
레츠
, 콜린
J. 이릭
지음
박재
호 옮
김
웹 / 자바스크립트
정가 28,000원
스타트업을 위한 가장 확실한 선택, MEAN 스택
지금은 스타트업 무한 경쟁 시대다. 살아남기 위해서는 누구보다 빠르게 자신의 아이디어
를 세상에 선보여야 하기에 클라이언트 개발자, 서버 개발자, DB 전문가가 각기 다른 언
어를 사용하던 기존 개발 방식으로는 경쟁에서 뒤처질 수밖에 없다.
그리하여 등장한 MEAN 스택은 이 모든 계층을 자바스크립트만으로 개발할 수 있게 해
준다. 가장 적은 노력으로 빠르게 제품을 완성해주는 MEAN 스택, 그 최신 개발 기법을
담은 이 책과 함께 지금 당장 꿈에 도전해보자!
•Node.js를 설치하고, Node.js 프로그래밍 모델의 핵심을 파악한다.
•Node.js로 MongoDB에서 데이터를 삽입, 검색, 갱신, 삭제한다.
•Express의 핵심 기술을 빠르게 익히고, 라우트와 미들웨어를 파악한다.
•데이터 결합, 지시자, 컨트롤러, 라우팅, 서비스와 같은 AngularJS의 핵심을 마스터한다.
•MEAN 스택만으로 완벽하게 작동하는 앱을 구축한다.
•원서보다 완벽하게 다듬은 예제 코드로 독자의 시간을 절약해준다.
MEAN은 서버와 클라이언트 양쪽을 모두 다루는 풀스택 엔지니어를 위한 기술이며, 한 번 익혀
두면 여러 가지 상황에서 돌파구를 발견할 가능성을 높여준다. 그만큼 개발자의 경쟁력을 높일
수 있음을 의미한다. 모든 구성 요소가 자바스크립트를 사용하므로, 자바스크립트만 어느 정도
이해하고 있다면 이를 지렛대로 활용해서 진도를 빨리 뽑을 수 있다. 이게 바로 기존 다른 스택
과 비교한 MEAN의 가장 큰 특장점이다. - 박재호, 엑셈 CTO
예제 소스 : http://www.hanbit.co.kr/exam/2218
관련 도서
몽고디비
완벽 가이드
(개정2판)
클라이언트
-서버 웹 앱
만들기
하이브리드
앱을 구현하는 기술
애덤 브레츠, 콜린 J. 이릭 지음
박재호 옮김
Node.js
풀 스 택 개 발 자 를 위 한
MEAN 스택 입문
체계적으로 배우는 MongoDB, Express, AngularJS,
Node.js