풀스택개발자를위한

MEAN스택입문

초스피드 훑어보기

+

기존 자바스크립트는…

Ctrl C+

Ctrl V+

웹UI 를 살짝 꾸며주거나 그리 전문적이지 못한 인식

복사/붙여넣기

+

지금의 자바스크립트는?

기존의 인식변화

WEBUI뿐만 아니라 범용프로그래밍 언어

자바스크립트의 재평가

프로토타입기반언어

+

자바스크립트 환경의 변화

V8엔진각종

JS라이브러리등장HTML5의등장 AJAX로

시작된 지각변동웹의 영향력

증가

+

+

www.salmanq.com/blog/net-and-node-js-performance-comparison/2013/03/

+

+

+모든 것을자바스크립트로 한다고?

+모든 것을자바스크립트로 한다고!

DB는? 웹서버는? Front-end와 UI는? Back-end는?

+Full-Stack 자바스크립트개발의 전 영역을 자바스크립트로 간다!

+

+

V8 엔진위에서동작하는자바스크립트플랫폼

비동기I/O, 단일스레드이벤트 loop를이용한높은처리성능

내장HTTP 라이브러리네트워크프로그래밍에특화

+믿어도되는건가요?기존 개발방식과 비교하여 장단점이 있다.

빠른 개발

자바스크립트에 익숙하다면 O.K

굉장히 많은 모듈/라이브러리

비동기 I/O를 통한 효율증가

기존 개발자들에겐 부담

‘아직은…’ 이라는 망설임

여러 노하우들의 부재

동기 I/O에 익숙한 개발

+

실제사례로한번봅시다.

www.paypal-engineering.com/2013/11/22/node-js-at-paypal

+

그루폰, 월마트, 야후

www.zdnet.co.kr/news/news_view.asp?artice_id=20140307103242

+쉽고 빠른 개발수 많은 모듈들

+C 언어로만든 소켓서버

+ㅉJava로만든 소켓서버

C보단 낫네…

+ㅉ

Node.js 웹서버

어때요, 참쉽죠?

초간단

+ㅉ

Node.js 웹서버초간단

뭘해도 Hello World! 밖에 안뜨는데요?

페이지를 다양하게 보여주고 싶어요…

더 많은 기능은 없나요?

+ㅉExpress 그래서 Express가 등장하게 됩니다.

+ㅉExpress

Node.js에서 동작하는 웹 개발 프레임워크 모듈작고 유연한 구조. 미들웨어를 통한 확장.

+ㅉNode.js 모듈

수많은 모듈들

간편한 설치

빠른 개발의 원동력

+ㅉExpress

적은 코드, 신속한 웹 개발!

+ㅉ

비동기 I/OI/O 작업은 node에게 맡기고 하던 일 계속한다.

http://www.slideshare.net/Byungwook/nodejs-vertx

+ㅉ

비동기 I/OI/O 작업은 오버헤드가 크다.

http://www.slideshare.net/Byungwook/nodejs-vertx

+ㅉ

비동기 I/O vs 동기 I/O

http://www.slieshare.net/Byungwook/nodejs-vertx

동기 I/O 비동기 I/O

+ㅉ

비동기 I/O vs 동기 I/O

총 처리량의 차이

실행순서를 고려해주어야 함

But, 우리는 동기방식에 익숙해져있다.

+

Node.js를 제대로이용하기 위해서는

비동기 I/O에 친숙해져야 한다!

+ㅉ

MongoDB

NoSQL의 한 종류전통적인 RDBMS보다 덜 엄격함

+ㅉ

MongoDB

자바스크립트의 간결함

JSON 표현식의 편리함

차세대 오류처리 Promise와의 만남

Node만의 빠른 개발

+ㅉ

MongoDB

진작에 좀 알려주지

+아직 안 끝났다.

여기까지가 Back-end!

+ㅉ

AngularJS

MVC 구조의 개발 및 유지보수가 편리

양방향 데이터 바인딩 지원

Ajax와 웹 소켓 등 복잡함 해결

단일 페이지 앱(Single Page Application) 프레임워크

+ㅉ

양방향 데이터 바인딩

Binding

+jQuery로도 복잡한 코드가…

AngularJS는 간단하네!

+ㅉ

MVC 구조

Model

View Controller

사용자

갱신

일종의 데이터

데이터 조작함수/객체

데이터를 화면에보이게 하는 놈

조작

사용보여짐

+ㅉ

MVC 구조

+ㅉ

그 밖의 기능들

ng-repeat 지시자

디렉티브를 통한 확장

RESTful 지원

의존성 주입

간단한 SPA 구현

필터 기능

+

MEAN 스택에 대해서하지 못한 이야기는 매우 많지만

초스피드로 알아보았습니다.

좀 더 공부를 하고 싶다면…

풀스택개발자를위한

MEAN스택입문

초스피드 훑어보기

체계적으로 배우는 MongoDB, Express, AngularJS, Node.js

애덤 브레츠, 콜린 J. 이릭박재호 역

한빛미디어ISBN: 978-89-6848-218-2

+

같이 보면좋아요

HTML5의등장

자바스크립트 Node.js Express MongoDB AngularJS

+

이 책을 한 줄로말하자면요…

자바스크립트4/5

• 얇아요! 가벼워요!

• MEAN에 대해 전반적인 지식/분위기를 알 수 있어요!

• 필요한 내용은 다 들어가 있어요.

• 입문서로 제격이에요!

• 이제 다른 참고서적으로 이제 넘어갈 수가 있겠어요~

• 자바스크립트를 알아야 볼 수 있어요.

• 어느 정도 웹 개발 경험이 있어야 되요.

• 분명 좋은 예제들인데 지면으로 보면 힘들어요 ㅠㅠ

(예제소스 파일들 내려보면 되요~)

http://qnrdlqkrwhdgns.canxan.com