웹 어플리케이션 보안 2016년 2학기 1. 강의 개요.

Presentation on theme: "웹 어플리케이션 보안 2016년 2학기 1. 강의 개요."— Presentation transcript:

1 웹 어플리케이션 보안 2016년 2학기 1. 강의 개요

2 1. 강의개요 Chap 1. Introduction  Chap 2. Primers  Chap 3. MEAN Thinking Chap 4. Getting Started and Installation

3 웹 개발의 방법론 과거의 방법론 새로운 방법론

4 교재 소개 MEAN MACHINE The Beginner’s Guide to the Javascript Stack
Chris Sevilleja and Holly Lloyd 구입 소스코드

5 교재 목차 1. Introduction 2. Primers 3. MEAN Thinking
4. Getting Started and Installation 5. Starting Node 6. Starting a Node Server 7. Routing Node Applications 8. Using MongoDB 9. Build a RESTful Node API 10. Node Authentication 11. Starting Angular 12. Animating Angular Applications 13. MEAN Stack Application Structure 14. Angular Services to Access an API 15. Angular Authentication 16. MEAN App: User Management CRM 17. Deploying MEAN Applications 18. MEAN Development Workflow Tools

6 자바스크립트로 (모던)웹어플리케이션을 개발하기 위한 클라이언트-서버-DB 플랫폼 및 프레임워크 스택(Full Stack)
MEAN 스택이란? 자바스크립트로 (모던)웹어플리케이션을 개발하기 위한 클라이언트-서버-DB 플랫폼 및 프레임워크 스택(Full Stack)

7 MEAN 스택이란? MongoDB, ExpressJS, AngularJS, and NodeJS
서버측 프로그래밍: NodeJS, ExpressJS 클라이언트측 프로그래밍: AngularJS DB 활용: MongoDB (데이터를 JSON 객체로 저장) JSON (자바스크립트 객체 표현 방식) 전체 스택이 모두 자바스크립트를 이용하므로 학습이 쉽고 생산성이 높다

8 MEAN 스택이란?

9 MEAN 스택의 구성요소

10 대규모 웹서비스들이 MEAN을 활용

11 웹 개발의 방법론

12 웹 개발의 방법론 비교 MEAN 스택이 다른 웹 개발 스택과 다른점 MEAN 스택을 사용하면 좋은 점
복잡한 웹어플리케이션을 개발하기 위한 레이아웃을 제공 모던(클라이언트 기반, SPA) 웹 어플리케이션을 위한 스택 실행 플랫폼, 개발 프레임워크 제공 모든 스택(DB-서버-클라이언트)에서 자바스크립트로 개발 낮은 진입장벽 - 자바스크립트만 알면 개발 가능 비동기 기반의 개발 스택 OS와 상관 없이 구동 가능 MEAN 스택을 사용하면 좋은 점 자바스크립트로만 DB-서버-클라이언트 개발 가능 JSON 객체를 DB, 서버, 클라이언트에서 동일하게 사용 라우팅 기반의 유연한 개발 클라이언트 two-way 데이터 바인딩 테스트가 효율적이다 다양한 bootstrap, 플러그인 SPA, RESTful, 프론트엔드 어플리케이션 개발에 최적화

13 MongoDB Humongous(거대한)라는 단어에서 딴 이름 오픈소스 NoSQL 데이터베이스
데이터를 JSON 포맷의 문서로 저장 문서기반 DB

14 MongoDB Document-Oriented Storage Full Index Support
모든 데이터가 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 별도 스토리지 엔진을 통해 파일을 저장할 수 있습니다.

15 MongoDB 관계형 DB (relational database) 문서기반 DB
데이터를 테이블 형식으로 저장. 정보간의 관계를 이용. MySQL 문서기반 DB 비관계형 데이터베이스로 데이터를 문서 형태로 저장 JSON (JavaScript Object Notation) 복잡한 형태의 데이터를 JSON, XML, BSON(Binary JSON) 등의 포맷으로 데이터베이스에 넣을 수 있음 PDF 문서를 DB에 직접 저장할 수 있다?

16 MongoDB 사례 Elf Info json { id: "1234", name: "holly", age: "400", type: "high-elf" } Elf Address Book json { elven_id: "1234", city: "rivendell", state: "middle-earth" } XML vs. JSON

17 MongoDB Consistency(일관성) vs. Availability(가용성)
샤딩(Sharding) 기능 제공 데이터가 많아져서 DB가 커지면 몇 개의 DB로 자동 파티션 복수개의 파티션 DB가 하나의 컬렉션으로 동작함 주요 기능 • Agile and Scalable • Document-Oriented Storage - JSON-style documents with dynamic schemas offer simplicity and power. • Full Index Support - Index on any attribute, just like you’re used to. • Replication & High Availability - Mirror across LANs and WANs for scale and peace of mind. • Auto-Sharding - Scale horizontally without compromising functionality. • Querying - Rich, document-based queries. • Fast In-Place Updates - Atomic modifiers for contention-free performance. • Map/Reduce - Flexible aggregation and data processing. • GridFS - Store files of any size without complicating your stack.

18 Node.js Node.js는 자바스크립트를 이용한 웹서비스 개발 언어 로 최근 빠르게 확산되고 있음
구글 크롬의 V8 자바스크립트 엔진에 기반한 서버측 플랫폼. Apache와 같은 별도의 서버 프로그램을 사용하지 않고 서비스를 직접 제공 이벤트기반, 비동기 I/O, 단일 스레드 루프를 통한 높은 처리성능 대규모 회사들에서도 널리 사용 중 Microsoft, eBay LinkedIn, Yahoo WalMart, Uber Oracle

19 Node.js LAMP 스택과의 비교 웹서버: Apache, Nginx 등
서버측 스크립트언어: PHP, Perl, Python DB 연결: Mysql 등 새로운 접속요청이 있으면 Apache는 새로운 쓰레드(thread)를 생성하여 서비스 (멀티쓰레딩). 동시접속자수에 제한이 있음. 서비스 사용자를 늘리려면 서버를 증설해야 함

20 Node.js Node는 이벤트 기반 언어 비동기식 단일쓰레드로 모든 서비스 요구에 응답

21 Node.js Node의 프로그래밍 방법론 이벤트 기반 프로그래밍 (Event driven programming)
마우스클릭, 키보드입력, 메시지입력 등 이벤트 발생에 따라 프로그 램 진행. GUI 프로그래밍이 대표적인 사례 비동기 프로그래밍 (Asynchronous programming) 메인 프로그램은 이벤트를 기다림 이벤트 발생시 이벤트핸들러에게 처리를 넘기고 메인 프로그램은 다 른 이벤트를 기다림 이벤트 처리가 끝나면 콜백(callback) 함수를 실행 비동기 콜백 (Asynchronous callbacks, non-blocking callbacks) 함수의 인자로 또 다른 함수를 지정하는 방식 처리할 준비가 완료되면 실행되는 함수 처리에 시간이 걸리는 경우에 유용 Synchronous callback: blocking (작업이 끝날때까지 기다림) Asynchronous callback: non-blocking (작업을 시켜놓고 다른 일 수행)

22 Node와 NPM NPM (Node Package Manager) 노드에서는 많은 확장 패키지들을 설치하여 사용할 수 있음.
Node.js 설치시 NPM도 기본 설치됨 자신이 프로그래밍한 코드를 패키지 형태로 만들어 재활용할 수 있음 Popular packages • ExpressJS is currently the most starred package on npm’s site. • Mongoose is the package we will use to interact with MongoDB. • GruntJS for automating tasks • PassportJS for authentication with many social services. • Socket.io for building real time websocket applications • Elasticsearch for providing high scalability search operations.

23

24 Express node.js 환경에서 웹 어플리케이션을 쉽게 개발하기 위 해 사용할 수 있는 프레임워크
웹 어플리케이션 개발에 필요한 유용한 API 제공 Express는 현재 NPM 사이트에서 가장 인기있는 패키지 Express의 주요 기능 Router Handling Requests Application Settings Middleware

25 Express

26 Express Express를 사용하는 회사들 MySpace, LinkedIn, Klout, Segment.io
express.html

27 AngularJS 구글이 만든 front-end 자바스크립트 프레임워크
Back-end: 서버측 Dynamic 요소들을 사용하기 위한 all-in-one 솔루션 데이터 바인딩(data binding) 폼 유효성 검사(Form validation) DOM 이벤트 처리 Dependency injection 다양한 지시어를 통한 개발 생산성 향상 ng-if, ng-repeat, ng-validate Form, Form validation 관련 도구 제공

28 AngularJS Data binding Dependency injection 주요 기능 사용자 입력을 매우 쉽게 처리 가능
MVC(model-view-controller) 모델에서 데이터의 일관성 유지 Dependency injection 객체에게 타 객체와의 의존성을 명시 모듈화 개념. 하나의 모듈을 다른 프로젝트에 재사용이 쉬움 주요 기능 MVC Directives Scopes Templates Testing

29 Client-server model MEAN stack으로 어플리케이션 개발시 클라이언트-서버 의 역할을 구분하여 설계해야 함
Server/backend/Node – 리소스, 서비스의 제공자 Client/frontend/Angular – 서비스 요청자 서버는 접근 가능한 API 가지고 서비스하는 독립적인 개체임. 클 라이언트는 이런 API를 통해 서버에 서비스를 요청. 서버사이드 코드는 분리되어 운영되며, 여러가지 클라이언트 어 플리케이션(웹사이트, 안드로이드 앱, 아이폰 앱, 윈도우 앱)이 똑 같은 데이터에 접근하도록 설계 페이스북, 구글, 트위터, Github 등 대규모 사이트들은 외부에서 접근 가능한 서버의 API 를 공개

30 Client-server model Server Components Client Components
Database (MongoDB) Server/API (Node and Express) Client Components Frontend Layer (Angular)

31 요약