Fullstack JavaScript platform for modern web applications

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

JSON Document 기반의 NoSQL. 스키마가 없고 JSON 형태로 직접 저장

Node.js 환경에서 웹 어플리케이션 개발을 위한 프레임워크. 강력한 라우팅 기능

클라이언트 기반의 웹 어플리케이션 개발을 위한 프레임워크

V8엔진 기반의 (서버)어플리케이션 개발 플랫폼. 비동기 IO를 통한 성능 향상

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

LAMP

Linux Apache MySQL

PHP, Perl, Python

.NET

Windows IIS

MS-SQL Server C#, .NET

MEAN

(typically) Linux Node.js

MongoDB JavaScript

Express

AngularJS

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

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

유용한 제품을 빠르게 만들 수 있다

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

MEAN 스택을 이해하기 위한 비용

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 별도 스토리지 엔진을 통해 파일을 저장할 수 있습니다.

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

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 제공

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

MEAN Stack Architecture SE

RV

ER

D

B

CLIE

NT

MEMO 어플리케이션 개발

MEAN 스택 설치 1. MongoDB http://www.mongodb.org/downloads 설치 경로를 시스템 PATH에 지정 설치 후 데이터 저장을 위한 디렉토리를 만들고 설정 $ mongod --dbpath <path to data directory>

윈도우일 경우 서비스에 등록(옵션) 2. Node.js http://nodejs.org/download/ 설치 경로를 시스템 PATH에 지정

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를 사용하는 방법도 있음

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

public/js/app.js Write Controller 추가

public/js/app.js Edit Controller 추가

YOU THANK