[D2 오픈세미나]3.자바스크립트mean스택 김태훈
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

[D2 오픈세미나]3.자바스크립트mean스택 김태훈

  • 5,196 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,196
On Slideshare
2,569
From Embeds
2,627
Number of Embeds
11

Actions

Shares
Downloads
82
Comments
0
Likes
25

Embeds 2,627

http://helloworld.naver.com 2,374
http://www.hanrss.com 156
http://redgoose.me 39
http://feedly.com 19
https://twitter.com 18
http://www.newsblur.com 8
http://programmingsummaries.tistory.com 7
http://newsblur.com 2
http://www.slideee.com 2
http://mail.sensmail.com 1
http://116.122.158.233 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 별도 스토리지 엔진을 통해 파일을 저장할 수 있습니다.
  • 10. 자바스크립트 기반의 어플리케이션 실행 플랫폼 이벤트 기반, 비동기 I/O, 단일 스레드 루프를 통한 높은 처리 성능 자바스크립트 실행 엔진으로 구글 V8 기본 탑재 다양한 종류의 I/O를 이벤트 기반으로 비동기 처리 HTTP 서버 라이브러리를 포함하고 있어 웹, 네트워크 어플리케이션 개발에 적합
  • 11. 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 제공
  • 12. 다양한 (클라이언트)웹 어플리케이션 개발에 필요한 구조, 모듈 집합 MVVM HTML 템플릿 지원 two-way data binding 다양한 지시어를 통한 개발 생산성 향상 ng-if, ng-repeat, ng-validate Form, Form validation 관련 도구 제공 DOM 컨트롤 with jQLite
  • 13. MEAN Stack Architecture SERVERDB CLIENT
  • 14. MEMO 어플리케이션 개발
  • 15. MEAN 스택 설치 1. MongoDB http://www.mongodb.org/downloads 설치 경로를 시스템 PATH에 지정 설치 후 데이터 저장을 위한 디렉토리를 만들고 설정 $ mongod --dbpath <path to data directory> 윈도우일 경우 서비스에 등록(옵션) 2. Node.js http://nodejs.org/download/ 설치 경로를 시스템 PATH에 지정
  • 16. 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를 사용하는 방법도 있음
  • 17. server/app.js express를 실행하고 요청에 대한 테스트 응답 생성
  • 18. server/models/memo.js mongoose를 통해 메모 모델 스키마 정의
  • 19. server/routes/memo.js post 요청에 실행 될 미들웨어 정의
  • 20. server/app.js json 파싱 설정, 라우터 사용 설정, mongodb 연결
  • 21. server/routes/memo.js get, put, delete 요청에 대한 미들웨어 정의
  • 22. public/index.html 클라이언트 메인 페이지 개발
  • 23. public/js/app.js 클라이언트 라우터, 컨트롤러 정의
  • 24. public/list.html 메모 리스트 템플릿 개발
  • 25. server/app.js public path를 사용할 수 있게 등록하고 '/'요청시 반환할 페이지를 설정
  • 26. 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>
  • 27. public/write.html 메모 작성(수정) 페이지 개발
  • 28. public/list.html 메모 리스트 페이지에 수정, 삭제 기능 추가
  • 29. public/js/app.js 메모 리스트 페이지에 수정, 삭제 기능 추가
  • 30. public/js/app.js 리스트 컨트롤러에 삭제 기능 추가
  • 31. public/js/app.js Write Controller 추가
  • 32. public/js/app.js Edit Controller 추가
  • 33. YOU THANK