Fullstack JavaScript platform for modern web applications
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Fullstack JavaScript platform for modern web applications
김태훈 [email protected] 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
Related Documents
