Download presentation
Presentation is loading. Please wait.
1
웹 어플리케이션 보안 2016년 2학기 2. Node routing
2
2. Node 시작하기 Chap 5. Starting Node Chap 6. Starting a Node Server Chap 7. Routing Node Applications
3
환경 구축 방법 자신의 PC에서 운용 Vmware 에 우분투 리눅스를 설치하여 운용 Mac에서 운용 클라우드 서비스에서 운용
윈도우 버전 node.js 설치 Vmware 에 우분투 리눅스를 설치하여 운용 리눅스 버전 node.js 설치 Mac에서 운용 Mac 버전 node.js 설치 클라우드 서비스에서 운용 향후 완성된 버전을 클라우드 서비스로 이전 설치
4
환경 구축 방법 텍스트 편집기: 자바스크립트 문법 오류 여부를 확인 가 능한 편집기 필요 EditPlus
Sublimetext (권장)
5
Node.js 설치 https://nodejs.org/ 사이트에서 최신버전 설치
설치 기본위치 - C:\Program Files\nodejs\ 윈도우 환경변수 path에 node 설치폴더 등록 Path=C:\Program Files\nodejs 명령프롬프트에서 설치 확인 Node –v (node 버전 확인) Npm -v (npm 버전 확인)
6
프로젝트 환경설정 Configuration (package.json)
7
Node 개발의 시작 1. 프로젝트를 개발할 폴더를 만든다. 2. 프로젝트 폴더로 이동한다.
3. npm init 명령을 실행한다. 질의에 대해 응답하면 입력 내용이 적용된 package.json 파일이 생성된다. Main 항목은 서버가 시작되는 파일명을 나타낸다. 여기서는 server.js로 바꿈.
8
Node 개발의 시작 Server.js 파일 생성 Node 서버 시작 서버를 중지시키려면 ctrl + C 명령
9
Nodemon 이용 서버파일을 수정할때마다 서버를 중지시키고 다시 시작 시키는 것은 번거로운 노동
Nodemon은 파일이 수정될때마다 이것을 감지하여 node 서버를 자동 재시작하는 npm 패키지로 매우 유용 Nodemon의 설치 Nodemon을 이용한 서버 실행 npm install -g nodemon -g 옵션은 시스템 전체에서 사용할 수 있도록 하는 전역 설치 -g 옵션이 없으면 현재 프로젝트에서만 사용할 수 있도록 로컬 설치 nodemon server.js
10
Nodemon 이용 Server.js 파일 수정, 저장 Nodemon이 서버를 자동 재시작
11
패키지 설치 에서 패키지를 검색하여 설치 가능 WOW, 30만개 이상의 패키지
12
프로젝트에 패키지 설치하는 두가지 방법 나의 프로젝트에 express 패키지를 설치해보자
1. package.json 파일을 편집하여 패키지 의존성을 먼저 등록하고 npm install 명령으로 설치하는 방법 2. 커맨드라인 명령으로 패키지를 설치하고 package.json에 자동 등록하는 방법 npm install npm install express --save Express 패키지를 설치하고 package.json에 등록하라. 현재 프로젝트 폴더에 node_modules 라는 폴더를 생성하고 여기에 패키지들을 설치함 npm install express mongoose passport --save 여러 패키지들을 한번에 설치 가능
13
Node 프로젝트를 시작하는 방법 1. 프로젝트 폴더를 만들고 그 폴더로 이동한다. 2. npm init 명령을 실행
Package.json 파일 생성 3. 필요한 패키지들을 설치 npm install express --save
14
Node로 웹서버 만들어보기 (1) Node 만으로 웹서버 만들기 (express 사용 안함)
http-server 프로젝트 폴더를 만들고 package.json과 index.html 파일을 만들자. Index.html: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> First date</title> </head> <body> <h1> Hello Universe! </h1> </body> </html> Package.json: { "name": "http-server", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
15
(1) Node 만으로 웹서버 만들기 server.js 파일 생성
16
(1) Node 만으로 웹서버 만들기 http, fs 모듈은 node.js의 내장 객체
에서 API를 찾아볼 수 있음
17
(1) Node 만으로 웹서버 만들기 Nodemon으로 server.js 실행 웹브라우저로 열기
18
(2) Express를 이용하여 웹서버 쉽게 만들기
Server.js 파일 편집하기 npm install express --save 많이 간단해짐
19
(2) Express를 이용하여 웹서버 쉽게 만들기
Express API document 참조
20
(2) Express를 이용하여 웹서버 쉽게 만들기
Nodemon으로 server.js 실행 웹브라우저로 열기
21
Express 코드 설명 Express 패키지를 불러와서 자바스크립트 객체 생성 Express()를 실행하여 app변수에 할당
Path 기능을 활용하기 위해 객체 생성 홈페이지 요청이 오면 현재 폴더에 있는 index.html 파일을 전송 서버의 포트번호를 1337으로 설정하고 listening 실행 서버의 콘솔에 서버실행 메시지 프린트
22
라우팅 Express의 router기능을 이용하여 여러 페이지를 갖는 홈페이지 운영하기 라우팅을 위한 API .use()
.get() .param() .route()
23
라우팅 현재의 홈페이지에 다음 기능들을 추가해보자.
• Basic Routes (We’ve already created the homepage) • Site Section Routes (Admin section with sub routes) • Route Middleware to log requests to the console • Route with Parameters ( • Route Middleware for Parameters to validate specific parameters • Login routes doing a GET and POST on /login • Validate a parameter passed to a certain route • 기본 루트 • admin 섹션 라우팅 /admin • route 미들웨어를 이용하여 서버의 콘솔에 request 로그 남기기 • 파라메터를 이용하는 라우팅 ( • route 미들웨어를 이용하여 파라메터의 유효성 검사 • 로그인 루트 제공 /login 루트에서 GET, POST 기능 • 어떤 루트에 전달된 파라메터의 유효성 검증
24
admin 섹션 라우팅 1. express.Router()를 이용하여 admin section 만들기
Server.js 에 다음 내용 추가 Express의 라우터 기능을 가진 adminRouter 객체 생성 / 기본 홈페이지 라우팅 /users 라우팅 /posts 라우팅 /admin 루트에 adminRouter 객체를 적용
25
admin 섹션 라우팅 1. express.Router()를 이용하여 admin section 만들기 브라우저로 확인
26
라우팅 미들웨어 사용 2. Route Middleware 사용하여 기능 추가하기
미들웨어란? Express에서 route middleware는 사용자의 요청 을 처리하기 전에 어떤 작업을 실행하도록 하는 방법 사용자 인증 여부 확인하기 데이터를 로그에 기록하기 등등 Router.use() 이용 adminRouter.use() 메서드를 이용하여 미들웨어 정의 미들웨어는 라우트가 정의되기 이전에 정의해야 함 Server.js 에서 정의된 순서대로 적용
27
라우팅 미들웨어 사용 예제: Admin 루트를 사용하는 경우 서버에 로그 남기기 서버에 로그를 남김 라우터 객체 정의
미들웨어 정의 - 서버콘솔에 로그 남김 - 작업을 계속 각각의 라우터 정의 서버에 로그를 남김
28
라우트의 구조화 라우트의 구조화 사례 app.use('/', basicRoutes); // 일반 사용자를 위한 라우트
app.use('/admin', adminRoutes); // 관리자를 위한 인증 라우트 app.use('/api', apiRoutes); // 특수 API를 사용하는 라우트
29
파라메터를 가지는 라우팅 3. 파라메터를 가지는 라우팅
30
파라메터를 가지는 라우팅 파라메터를 처리하는 Route Middleware (.param())
사용자 입력의 유효성 검증에 사용 가능
31
app.route()를 이용한 라우팅 4. Login Routes (app.route())
로그인 라우트에서 .GET .POST 등 여러 개의 액션 설정 필요 액션을 링크하여 설정 GET - 로그인폼 표시 POST - 사용자 입력을 서버로 전달
32
라우팅 기능 요약 Express의 router는 여러 가지 유연한 방식으로 라우트 를 정의할 수 있음
Use express.Router() multiple times to define groups of routes Apply the express.Router() to a section of our site using app.use() Use route middleware to process requests Use route middleware to validate parameters using .param() Use app.route() as a shortcut to the Router to define multiple requests on a route
Similar presentations
