JavaScript MEAN 스택
•
118 likes•16,054 views
Report
Share
JavaScript MEAN 스택
- 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
- 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 요청에 대한 미들웨어 정의
- 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>
- 36. public/list.html 메모 리스트 페이지에 수정, 삭제 기능 추가
- 37. public/js/app.js 메모 리스트 페이지에 수정, 삭제 기능 추가
- 38. public/js/app.js 리스트 컨트롤러에 삭제 기능 추가
- 43. YOU THANK