SlideShare una empresa de Scribd logo
1 de 43
Descargar para leer sin conexión
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
SERVERDB
CLIENT
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

Más contenido relacionado

La actualidad más candente

Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
Nathaniel Richand
 

La actualidad más candente (20)

Hacking Jenkins
Hacking JenkinsHacking Jenkins
Hacking Jenkins
 
Build optimization mechanisms in GitLab and Docker
Build optimization mechanisms in GitLab and DockerBuild optimization mechanisms in GitLab and Docker
Build optimization mechanisms in GitLab and Docker
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
 
Ajax cheat sheet
Ajax cheat sheetAjax cheat sheet
Ajax cheat sheet
 
CH09:Collection與Map
CH09:Collection與MapCH09:Collection與Map
CH09:Collection與Map
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
 
Introduction to Node JS.pdf
Introduction to Node JS.pdfIntroduction to Node JS.pdf
Introduction to Node JS.pdf
 
Spring - Ecosistema
Spring - EcosistemaSpring - Ecosistema
Spring - Ecosistema
 
오픈소스를 사용하고, 준비하는 개발자를 위한 가이드
오픈소스를 사용하고, 준비하는 개발자를 위한 가이드오픈소스를 사용하고, 준비하는 개발자를 위한 가이드
오픈소스를 사용하고, 준비하는 개발자를 위한 가이드
 
Spring ppt
Spring pptSpring ppt
Spring ppt
 
3장. Garbage Collection
3장. Garbage Collection3장. Garbage Collection
3장. Garbage Collection
 
Jsp presentation
Jsp presentationJsp presentation
Jsp presentation
 
Advanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsAdvanced front-end automation with npm scripts
Advanced front-end automation with npm scripts
 
Tomcat and apache httpd training
Tomcat and apache httpd trainingTomcat and apache httpd training
Tomcat and apache httpd training
 
Introduction to ASP.NET Core
Introduction to ASP.NET CoreIntroduction to ASP.NET Core
Introduction to ASP.NET Core
 
Spring mvc
Spring mvcSpring mvc
Spring mvc
 
Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with ThymeleafSpring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
Spring I/O 2012: Natural Templating in Spring MVC with Thymeleaf
 
03.Ansible 소개
03.Ansible 소개03.Ansible 소개
03.Ansible 소개
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
 
Spring ioc
Spring iocSpring ioc
Spring ioc
 

Similar a JavaScript MEAN 스택

차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
Changhwan Yi
 
OCE - Cno 2014 private sector oriented open paas oce
OCE - Cno 2014 private sector oriented open paas   oceOCE - Cno 2014 private sector oriented open paas   oce
OCE - Cno 2014 private sector oriented open paas oce
uEngine Solutions
 

Similar a JavaScript MEAN 스택 (20)

One ASP.NET
One ASP.NETOne ASP.NET
One ASP.NET
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트
 
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
오픈소스 프레임워크 기반 웹 서비스 설계 (Example)
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
[오픈소스컨설팅]오픈소스 클라우드 개발플랫폼_및_Docker의_이해_v1
 
DevOps를 위한 AWS 서비스 및 개발도구 -김상필 솔루션아키텍트 :: AWS 파트너 테크시프트 세미나
DevOps를 위한 AWS 서비스 및 개발도구  -김상필 솔루션아키텍트 :: AWS 파트너 테크시프트 세미나 DevOps를 위한 AWS 서비스 및 개발도구  -김상필 솔루션아키텍트 :: AWS 파트너 테크시프트 세미나
DevOps를 위한 AWS 서비스 및 개발도구 -김상필 솔루션아키텍트 :: AWS 파트너 테크시프트 세미나
 
Intro to hpe helion stackato_paa_s
Intro to hpe helion stackato_paa_sIntro to hpe helion stackato_paa_s
Intro to hpe helion stackato_paa_s
 
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해
 
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
hexa core
hexa corehexa core
hexa core
 
마이크로서비스 아키텍처로 개발하기
마이크로서비스 아키텍처로 개발하기마이크로서비스 아키텍처로 개발하기
마이크로서비스 아키텍처로 개발하기
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
 
OCE - Cno 2014 private sector oriented open paas oce
OCE - Cno 2014 private sector oriented open paas   oceOCE - Cno 2014 private sector oriented open paas   oce
OCE - Cno 2014 private sector oriented open paas oce
 
개발자 지향 WAS : IBM WebSphere Liberty Server
개발자 지향 WAS : IBM WebSphere Liberty Server개발자 지향 WAS : IBM WebSphere Liberty Server
개발자 지향 WAS : IBM WebSphere Liberty Server
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
 
ASP.NET 웹 서비스 플랫폼으로 날다
ASP.NET 웹 서비스 플랫폼으로 날다ASP.NET 웹 서비스 플랫폼으로 날다
ASP.NET 웹 서비스 플랫폼으로 날다
 
데브옵스(DevOps) 문화 모범 사례와 구현 도구 살펴보기 – 박선준 :: AWS Builders Online Series
데브옵스(DevOps) 문화 모범 사례와 구현 도구 살펴보기 – 박선준 :: AWS Builders Online Series데브옵스(DevOps) 문화 모범 사례와 구현 도구 살펴보기 – 박선준 :: AWS Builders Online Series
데브옵스(DevOps) 문화 모범 사례와 구현 도구 살펴보기 – 박선준 :: AWS Builders Online Series
 
크로스플랫폼으로 다시 태어난 ASP.NET Core
크로스플랫폼으로 다시 태어난 ASP.NET Core크로스플랫폼으로 다시 태어난 ASP.NET Core
크로스플랫폼으로 다시 태어난 ASP.NET Core
 

JavaScript MEAN 스택