Microsoft PowerPoint - web-part03-ch19-node.js기본.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - web-part03-ch19-node.js기본.pptx"

한비 공
8 years ago
Views:

1 과목명: 웹프로그래밍응용 교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch19. node.js 기본 2014년 1학기 Professor Seung-Hoon Choi

2 19 node.js 기본 이 책에서는 서버 구현 시 node.js 를 사용함 자바스크립트로 서버를 개발 다른서버구현기술 ASP.NET, ASP.NET MVC, PHP, JSP, Rails, Sinatra, Django, Flask

3 19.1 Ajax 개요 Ajax 구현 방식을 지칭하는 말 예: 에서 검색어 추천 기능 요소 검사 > Network 에서 글자 입력 시 데이터 송수신 확인 가능함 Ajax 기술을 사용하면, 클라이언트 쪽에서의 웹 페이지 전환 없이 서버에서 데이터를 받아와 웹 페이지의 일부분을 변경할 수 있다.

4 19.2 데이터 전송 형식 서버와 클라이언트 사이의 데이터 형식 1) CSV (Comma Separated Values) 2) XML (extensible Markup Language) 3) JSON (JavaScript Object Notation)

5 CSV 형식 CSV 형식 각 항목을 컴마(, )로 구분해 데이터를 표현하는 방식 많은 양의 데이터를 전송할 때 유리함 가독성이 떨어짐 String.split( ) 메소드 CSV 형식의 스트링을 분해하는 메소드 코드 19-1 input = input.split( \n ); \n 을 구분 문자로 해서 input 문자열을 자른 문자열 배열을 input 에 할당함 input[i] = input[i].split(, ); input[i][j].trim( ) : 양쪽 공백을 제거함

$split( \n ); \n 을 구분 문자로 해서 input 문자열을 자른 문자열 배열을 input 에 할당함$

6 XML 형식 XML 형식 데이터를 태그를 이용하여 표현 가장 많이 사용되는 데이터 형식 예제 (523 페이지) <books> <book> <name>모던웹</name> <publisher>한빛</publisher> <author>윤인성</author> <price>30000원</price> </book> </books> 용량을 많이 차지하는 단점이 있다.

7 XML 형식 JSON 형식 객체 형태로 데이터를 표현하는 방법 Ajax를 사용할 때의 거의 표준으로 사용됨 예제(525 페이지) [ ] 제약 조건 { name : 모던웹, publisher : 한빛, author : 윤인성, price : 30000원 }, { },. JSON에는 객체, 배열, 문자열, 숫자, 부울, null 만 들어갈 수 있다. 문자열은 반드시 큰따옴표를 사용해야 한다. 데이터 용량이 아주 커지면, 데이터 추출 속도가 현저히 떨어진다.

8 19.3 node.js 개요와 설치 node.js 웹 브라우저가 아닌 곳에서 자바스크립트를 실행할 수 있도록 해 주는 플랫폼 인스톨 다운받아서, 적당한 폴더에 설치

9 19.3 node.js 개요와 설치 명령 프롬프트 실행 node.js 설치 폴더로 이동 후 shift + 마우스 오른쪽 버튼 > [여기서 명령 창 열기] 선택 c:\node>node 입력 REPL(Read Eval Print Loop)가 실행됨 이 상태에서 자바스크립트 코드를 한 줄 씩 입력하여 실행할 수 있음 > console.log( Hello World..! )

$선택 c:\node>node 입력 REPL(Read Eval Print Loop)가 실행됨$

10 19.4 기본 파일 실행 파일 작성 JavaScript.js 생성 코드 19-2 입력 console.log( )를 이용하여 화면에 출력함 JavaScript.js 실행 명령 프롬프트 실행 JavaScript.js 파일이 있는 폴더로 이동 명령 프롬프트에서 다음 명령 실행 c:\> node JavaScript.js

11 19.5 내부 모듈 모듈 node.js의 기능을 확장하기 위해 사용하는 개념 내부 모듈 node.js에 기본적으로 포함되어 있는 모듈 에서 확인 가능 Use require('os') to access this module. 코드 19-3 require('os') 적용 후 os 모듈 내부의 속성과 메소드를 출력함 코드 19-4 os 모듈의 메소드 호출

org/api 에서 확인 가능 Use require('os') to access this

12 19.6 외부 모듈 외부 모듈 node.js에 기본적으로 포함되어 있는 것이 아니라 개인 또는 단체가 만들어 배포하는 모듈 에서 확인 가능함 참고사항 node.js에서 MySQL 데이터베이스와 연동하는 모듈을 찾고자 하면 구글 검색 시, node.js mysql 이라고 입력함

13 19.6 외부 모듈 외부 모듈 설치 방법 c:\> npm install 모듈명 예: request 외부 모듈 설명: http 요청을 쉽게 해 주는 모듈 설치 c:\> npm install request 기본 사용 방법 request 모듈 검색 Super simple to use 부분의 코드를 복사 실행 c:\> node js

14 19.7 서버 생성 및 실행 서버 구현 준비 필요한 외부 모듈 express (node.js web application framework) expressjs.com 실습: express 모듈 설치 c:> npm install (2014년4월 부터 버전 4.x가 나 왔으나 이전 버전과 호환성이 떨어짐) cshserver.js 파일 작성

com 실습: express 모듈 설치 c:> npm install express@3.4.

15 19.7 서버 생성 및 실행 코드 19-6 필요한 모듈 추출 var http = require( http ); var express = require( express );

16 19.7 서버 생성 및 실행 코드 19-7 서버 객체 생성 var app = express( ); 웹 서버 실행 http.createserver(app).listen(52273, function() { console.log( Server Running at ); }); 52273: 포트 번호

17 19.7 서버 생성 및 실행 코드 19-8 웹 서버 기능 구현: app.use( ) 메소드 사용 app.use( function(request, response) { response.send( <h1>안녕하세요, 최승훈!</h1> ); }); 서버 실행 c:\> node server.js 웹 브라우저 실행

18 19.8 미들웨어 request 이벤트 리스너 app.use( ) 메소드에 매개변수로 입력되는 콜백 함수 사용자가 서버에 접속하면 자동으로 실행되는 함수 형식: app.use(function(request, response, next) { } ); request: 요청 객체 response: 응답 객체 next: 다음 콜백 함수를 의미함

19 19.8 미들웨어 코드 19-9, app.use( ) 메소드를 3개 정의함 클라이언트(웹 브라우저)로부터 요청이 오면 3개의 콜백 함수가 자동으로 실행됨 클라이언트 요청 시, 웹 서버로 응답이 가기 전에 실행되는 콜 백 함수를 미들웨어라고 한다. 명령 프롬프트에 first와 second가 두 번 출력된 이유 웹 브라우저가 웹 사이트의 파비콘(favicon)을 얻기위해자동으 로 웹 서버에 요청함 favicon: 웹 브라우저 상단의 탭 왼쪽에 보이는 아이콘 실행 c:\> node js

20 19.8 미들웨어 미들웨어를 이용하면 response 객체와 response 객체 속성과 메소드를 추가할 수 있다. 응답 완료 전까지 여러 가지 일을 처리할 수 있다. 코드 request 객체와 response 객체에 test 속성을 추가함 미들웨어 실행 순서 위에 정의된 것부터 아래로 실행됨

21 19.8 미들웨어 미들웨어 목적 이미 존재하는 기능을 현재 서버에 추가시킬 때 사용함 특정한 일을 수행하는 모듈을 분리해서 만들고 이를 호출할 수 있다. express 모듈은 이미 다양한 미들웨어를 가지고 있다. 코드 app.use(express.logger()) express 모듈에 존재하는 logger( ) 미들웨어를 실행함 logger 미들웨어 요청이 들어왔을 때 로그를 출력하는 미들웨어

22 19.9 정적 파일 제공 static 미들웨어 클라이언트에게 정적 파일을 제공할 때 사용하는 미들웨어 static 미들웨어를 사용해서 폴더를 지정하면, 이폴더를웹서버 의 루트 폴더로 등록함 요청이 들어오면 이 폴더를 자동으로 접근한다. 파일 종류 동적 파일 요청 시 마다 내용이 바뀌는 파일 예: 네이버의 메인 페이지 정적 파일 내용이 변화하지 않는 파일 예: 자바스크립트 파일, CSS 파일, 그림 파일 등

23 19.9 정적 파일 제공 예제 1. 프로젝트 폴더 내에 다음 내용을 생성함 public 폴더와 server_static.js 2. public 폴더에 index.html 생성함 (코드 19-13) 3. server_static.js 파일 내에 app.use(express.static( public )) 문장 추가(코드 19-14) 현재 디렉토리 아래의 public 폴더에, 클라이언트에 제공할 정적 파일이 들어 있다는 의미 4. 서버 실행 (node server02.js) 5. 웹 브라우저로 접근( public 폴더에 있는 index.html이 보여짐 static 미들웨어는, public 폴더에 원하는 파일이 없는 경우에만 그 다음 미들웨어를 실행함 => 따라서, Hello Middleware..! 이 출력됨

24 19.9 정적 파일 제공 static 미들웨어는 요청이 들어오는 순간에 등록된 폴더에 가서 파일을 새로 읽는 다. 따라서, 그 폴더(예: public 폴더) 내부에 있는 파일이 변경되어 도 서버를 다시 시작하지 않아도 된다

25 19.10 라우터 router 미들웨어 페이지 라우팅을 구현하는 미들웨어 페이지 라우팅 클라이언트의 요청에 대하여 적절한 페이지를 제공하는 기술 예제 server_router.js 서버 작성 코드 app.use(app.router); 문장 추가 주의: express 객체에 있지 않으며, 함수 호출이 아님

26 19.10 라우터 router 미들웨어를 사용하면, 다음 메소드를 이용할 수 있다. 표19-5 app.get(): 클라이언트의 GET 요청을 처리한다. app.post(): 클라이언트의 POST 요청을 처리한다. app.put(): 클라이언트의 PUT 요청을 처리한다. app.del(): 클라이언트의 DELETE 요청을 처리한다. app.all(): 클라이언트의 모든 요청을 처리한다.

27 19.10 라우터 server_router.js 작성 (계속) 코드 app.all( ) 메소드 실행 문장 추가 클라이언트의 모든 종류의 요청을 처리해라. app.all( /a, function (request, response) { response.send('<h1>page A<h1>'); }); 클라이언트가 로 접속하면 콜백함수를 실행 해라. 서버 실행 c:> node server_router.js 브라우저에서 접속 접속시Page A 가 출력됨

28 19.11 응답과 응답 형식 응답 데이터 형식 HTML 응답 JSON 응답 XML 응답 코드 기본 서버 파일 /data.html, /data.json, /data.xml 에 대한 라우트 설정 코드 items 변수 정의 3개의 객체를 포함하는 배열

29 HTML 응답 코드 HTML 응답 보내기 response.send(문자열); 코드 HTML 문자열 생성 서버 실행 c:> node js 브라우저 접속

30 JSON 응답 코드 JSON 응답 보내기 response.send(배열); 또는 response.send(객체); 서버 실행 c:> node js 브라우저 접속 참고: JSON Formatter 크롬 확장 프로그램을 크롬 웹 스토 어에서 설치해 볼 것

31 XML 응답 XML로 응답할 때는 response.type( ) 메소드를 이용하여 응답 형식을 지정해야 함 send( ) 메소드는 HTML 형식과 JSON 형식만 지원함 코드 response.type( text/xml ); text/xml : MIME(Multipurpose Internet Mail Extensions) 타입 중 하나 서버 실행 c:> node js 브라우저 접속

32 19.12 Postman 크롬 확장 프로그램 Postman 크롬 확장 프로그램 HTTP 요청을 수행해 주는 프로그램 크롬 웹 스토어에서 설치 chrome.google.com/webstore 실행 방법 서버 URL 입력 후, send 버튼 클릭

33 19.13 요청과 요청 매개변수 요청 매개변수 클라이언트가 서버로 전달하는 데이터 형식 경로 뒤에? 를 붙이고 키=값 형태를 & 기호로 이어 붙임

34 일반 요청 매개변수 일반 요청 매개변수를 추출하는 메소드 request.param(키) 코드 app.all( /parameter, function(request, response) { } ); 코드 var name = request.param( name ); 서버 실행 c:> node js postman 에서 접속 => URL params 버튼 클릭 => 키와 값 지 정 => send 버튼 클릭

35 동적 라우트 요청 매개변수 위키피디아 검색의 경우 key=value 형태가 아니라 다음과 같이 경로 형태로 검색이 됨 HTML 검색 시 Cloud 검색 시 이를 지원하기 위해서는 라우트를 이용한다. 그러나, 검색할 단어가 매우 많으므로, 모든 단어에 대해 라우 트를 할 수가 없다. 따라서, 동적 라우트를 이용한다. 경로가, 형식이므로 다음과 같이 라우트한다. app.all( /wiki/:keyword, function(request, response) { } );

36 동적 라우트 요청 매개변수 코드 app.all('/parameter/:id', function (request, response) { } 로 요청이 오면, test 문자열을 id 속성의 값으로 넣어라. var id = request.param( id ); 를 이용하여 id 속성의 값을 추출함 서버 실행 c:> js 브라우저 접속

37 19.14 요청 방식 요청 방식 GET: 자원 조회 => 서버의 app.get( ) 메소드가 처리함 POST: 자원 추가 => 서버의 app.post( ) 메소드가 처리함 PUT: 자원 수정 => 서버의 app.put( ) 메소드가 처리함 DELETE: 자원 삭제 => 서버의 app.del( ) 메소드가 처리함

38 19.14 요청 방식 요청 방식 관리 예 GET 요청: /products (제품 전체 조회를 요청함) GET 요청: /products/273 (273 제품 조회를 요청함) POST 요청: /products (제품 추가를 요청함) PUT 요청: /products/273 (273번 제품을 수정함) DELETE 요청: /products/273 (273 제품을 제거함) RESTful 웹 서비스 위와 같이 URI(URL)을 이용하여 서비스의 종류를 구분하고 http와 같은 표준화된 인터페이스를 통해 서비스를 제공하는 기술을 RESTful 웹 서비스라고 함

39 19.14 요청 방식 코드 app.use(express.bodyparser()); GET 이외의 요청에서 요청 매개변수를 추출하려면 body parser 미들웨어가 필요함 반드시 아래 문장 이전에 실행해야 한다. app.use(app.router); // 라우팅 기능을 사용 코드 라우트 구성

40 데이터 조회 코드 서버 실행 c:> js 브라우저 접속(postman 이용) GET 요청

41 데이터 조회 코드 개별 데이터 조회 코드 id 값에 대한 오류 처리 추가 서버 실행 c:> js 브라우저 접속 (postman 이용) GET 요청

42 데이터 추가 코드 요청 매개변수인 name과 price를 추출해서 items 배열에 추가함 서버 실행 c:> js 브라우저 접속 (postman 이용) name, price 속성 값 지정 POST 요청

43 데이터 수정 코드 서버 실행 c:> js 브라우저 접속 (postman 이용) name, price 속성 값 지정 PUT 요청

44 데이터 삭제 코드 서버 실행 c:> js 브라우저 접속 (postman 이용) name, price 속성 값 지정 DELETE 요청

45 19.15 클라이언트 페이지 HTML5 부터는 form 태그에서 PUT 요청과 DELETE 요청은 보낼 수 없음 XMLHttpRequest 객체를 이용하여 PUT과 DELETE 요청을 보냄 20장에서 배움 클라이언트 페이지 작성 (파일명: index.html) 코드 코드 코드 코드 클라이언트 페이지를 서버에 설치 index.html을 public/product 폴더에 설치

46 19.15 클라이언트 페이지 브라우저에서 클라이언트 페이지 접속 GET 요청과 POST 요청을 테스트함

3장

C H A P T E R 03 CHAPTER 03 03-01 03-01-01 Win m1 f1 e4 e5 e6 o8 Mac m1 f1 s1.2 o8 Linux m1 f1 k3 o8 AJAX