1. Fullstack JavaScript platform for modern web applications

2. 김태훈 kishu@nhn.com
NHN Technology Services
프론트엔드개발팀장
SADI HTML5 초빙교수
Project Management Professional(PMP)
페이스북 프론트엔드개발그룹 운영
wit.nts-corp.com
facebook.com/rlaxogns
facebook.com/groups/webfrontend

3. JSON Document 기반의 NoSQL. 스키마가 없고 JSON 형태로 직접 저장
Node.js 환경에서 웹 어플리케이션 개발을 위한 프레임워크. 강력한 라우팅 기능
클라이언트 기반의 웹 어플리케이션 개발을 위한 프레임워크
V8엔진 기반의 (서버)어플리케이션 개발 플랫폼. 비동기 IO를 통한 성능 향상

4. 자바스크립트로 (모던)웹어플리케이션을 개발하기 위한
클라이언트-서버-DB 플랫폼 및 프레임워크 스택(Full Stack)

5. LAMP
Linux
Apache
MySQL
PHP, Perl, Python
.NET
Windows
IIS
MS-SQL Server
C#, .NET
MEAN
(typically) Linux
Node.js
MongoDB
JavaScript
Express
AngularJS

6. MEAN 스택이 다른 웹 개발 스택과 다른점
복잡한 웹어플리케이션을 개발하기 위한 레이아웃을 제공
모던(클라이언트 기반, SPA) 웹 어플리케이션을 위한 스택
실행 플랫폼, 개발 프레임워크 제공
모든 스택(DB-서버-클라이언트)에서 자바스크립트로 개발
낮은 진입장벽 - 자바스크립트만 알면 개발 가능
비동기 기반의 개발 스택
OS와 상관 없이 구동 가능
All are free and open-source

7. MEAN 스택을 사용하면 좋은 점
자바스크립트로만 DB-서버-클라이언트 개발 가능
JSON 객체를 DB, 서버, 클라이언트에서 동일하게 사용
라우팅 기반의 유연한 개발
클라이언트 two-way 데이터 바인딩
테스트가 효율적이다
다양한 bootstrap, 플러그인
SPA, RESTful, 프론트엔드 어플리케이션 개발에 최적화
유용한 제품을 빠르게 만들 수 있다

8. 하지만 말 처럼 쉽지만은 않습니다...
웹 어플리케이션 개발에 대한 패러다임 변화가 필요
극도로 추상화된 프레임워크, 비동기 기반 프로그래밍
MVVM, SPA, 자바스크립트의 이상한 특성들..
MEAN 스택을 이해하기 위한 비용

9. Document-Oriented Storage
모든 데이터가 JSON 형태로 저장되며 schema가 없음
Full Index Support
RDBMS에 뒤지지 않는 다양한 인덱싱을 제공합니다.
Replication & High Availability
데이터 복제를 통해 가용성을 향상시킬 수 있습니다.
Auto-Sharding
Primary key를 기반으로 여러 서버에 데이터를 나누는 scale-out이 가능합니다.
Querying
key 기반의 get, put 뿐만이 아니라 다양한 종류의 쿼리들을 제공합니다.
Fast In-Place Updates
고성능의 atomic operation을 지원합니다.
Map/Reduce
맵/리듀스를 지원합니다.
GridFS
별도 스토리지 엔진을 통해 파일을 저장할 수 있습니다.

11. 자바스크립트 기반의 어플리케이션 실행 플랫폼
이벤트 기반, 비동기 I/O, 단일 스레드 루프를 통한 높은 처리 성능
자바스크립트 실행 엔진으로 구글 V8 기본 탑재
다양한 종류의 I/O를 이벤트 기반으로 비동기 처리
HTTP 서버 라이브러리를 포함하고 있어 웹, 네트워크 어플리케이션 개발에 적합

13. Web Applications
Express is a minimal and flexible node.js web application framework,
providing a robust set of features for building single and multi-page,
and hybrid web applications.
APIs
With a myriad of HTTP utility methods and Connect middleware
at your disposal, creating a robust user-friendly API is quick and easy.
Performance
Express provides a thin layer of features fundamental to any web
application, without obscuring features that you know and love in node.js
node.js 환경에서 웹 어플리케이션을 개발하기 위한 프레임워크
웹 어플리케이션 개발에 필요한 유용한 API 제공

15. 다양한 (클라이언트)웹 어플리케이션 개발에 필요한 구조, 모듈 집합
MVVM
HTML 템플릿 지원
two-way data binding
다양한 지시어를 통한 개발 생산성 향상
ng-if, ng-repeat, ng-validate
Form, Form validation 관련 도구 제공
DOM 컨트롤 with jQLite

17. MEAN Stack Architecture
SERVERDB
CLIENT

18. MEMO 어플리케이션 개발

19. MEAN 스택 설치
1. MongoDB
http://www.mongodb.org/downloads
설치 경로를 시스템 PATH에 지정
설치 후 데이터 저장을 위한 디렉토리를 만들고 설정
$ mongod --dbpath <path to data directory>
윈도우일 경우 서비스에 등록(옵션)
2. Node.js
http://nodejs.org/download/
설치 경로를 시스템 PATH에 지정

20. MEAN 스택 설치
3. express
어플리케이션 디렉토리 생성
$ mkdir memo
package.json 작성
{
"name": "memoApp",
"description": "memo application is ......",
"version": "0.0.1",
"dependencies": {
"express": "4.2.0",
"body-parser": "1.2.0",
"mongoose": "3.8.9"
}
}
npm 실행
$ npm install
node_modules 디렉토리가 생성되고 expressjs가 설치 됨
express-generator를 사용하는 방법도 있음

21. server/app.js
express를 실행하고 요청에 대한 테스트 응답 생성

23. server/models/memo.js
mongoose를 통해 메모 모델 스키마 정의

24. server/routes/memo.js
post 요청에 실행 될 미들웨어 정의

25. server/app.js
json 파싱 설정, 라우터 사용 설정, mongodb 연결

28. server/routes/memo.js
get, put, delete 요청에 대한 미들웨어 정의

29. public/index.html
클라이언트 메인 페이지 개발

30. public/js/app.js
클라이언트 라우터, 컨트롤러 정의

31. public/list.html
메모 리스트 템플릿 개발

32. server/app.js
public path를 사용할 수 있게 등록하고 '/'요청시 반환할 페이지를 설정

34. http://<server>/
$routeProvider.when('/', {
templateUrl: 'list.html'
controller: 'ListController'
});
app.js
list.html
ListController
$http.get('/memo').success(function(data) {
$scope.memos = data;
});
http://<server>/memo
Memo.find(
function(err, memos) {
if(err) res.send(err);
res.send(memos);
});{data}
data binding
<div ng-repeat="memo in memos">
<h3>{{memo.author}}</h3>
{{memo.contents}}
</div>

35. public/write.html
메모 작성(수정) 페이지 개발

36. public/list.html
메모 리스트 페이지에 수정, 삭제 기능 추가

37. public/js/app.js
메모 리스트 페이지에 수정, 삭제 기능 추가

38. public/js/app.js
리스트 컨트롤러에 삭제 기능 추가

39. public/js/app.js
Write Controller 추가

40. public/js/app.js
Edit Controller 추가

43. YOU
THANK