과목명: 웹프로그래밍응용 교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch19. node.js 기본 2014년 1학기 Professor Seung-Hoon Choi
19 node.js 기본 이 책에서는 서버 구현 시 node.js 를 사용함 자바스크립트로 서버를 개발 다른서버구현기술 ASP.NET, ASP.NET MVC, PHP, JSP, Rails, Sinatra, Django, Flask
19.1 Ajax 개요 Ajax 구현 방식을 지칭하는 말 예: www.naver.com 에서 검색어 추천 기능 요소 검사 > Network 에서 글자 입력 시 데이터 송수신 확인 가능함 Ajax 기술을 사용하면, 클라이언트 쪽에서의 웹 페이지 전환 없이 서버에서 데이터를 받아와 웹 페이지의 일부분을 변경할 수 있다.
19.2 데이터 전송 형식 서버와 클라이언트 사이의 데이터 형식 1) CSV (Comma Separated Values) 2) XML (extensible Markup Language) 3) JSON (JavaScript Object Notation)
19.2.1 CSV 형식 CSV 형식 각 항목을 컴마(, )로 구분해 데이터를 표현하는 방식 많은 양의 데이터를 전송할 때 유리함 가독성이 떨어짐 String.split( ) 메소드 CSV 형식의 스트링을 분해하는 메소드 코드 19-1 input = input.split( \n ); \n 을 구분 문자로 해서 input 문자열을 자른 문자열 배열을 input 에 할당함 input[i] = input[i].split(, ); input[i][j].trim( ) : 양쪽 공백을 제거함
19.2.2 XML 형식 XML 형식 데이터를 태그를 이용하여 표현 가장 많이 사용되는 데이터 형식 예제 (523 페이지) <books> <book> <name>모던웹</name> <publisher>한빛</publisher> <author>윤인성</author> <price>30000원</price> </book> </books> 용량을 많이 차지하는 단점이 있다.
19.2.2 XML 형식 JSON 형식 객체 형태로 데이터를 표현하는 방법 Ajax를 사용할 때의 거의 표준으로 사용됨 예제(525 페이지) [ ] 제약 조건 { name : 모던웹, publisher : 한빛, author : 윤인성, price : 30000원 }, { },. JSON에는 객체, 배열, 문자열, 숫자, 부울, null 만 들어갈 수 있다. 문자열은 반드시 큰따옴표를 사용해야 한다. 데이터 용량이 아주 커지면, 데이터 추출 속도가 현저히 떨어진다.
19.3 node.js 개요와 설치 node.js 웹 브라우저가 아닌 곳에서 자바스크립트를 실행할 수 있도록 해 주는 플랫폼 인스톨 http://nodejs.org 다운받아서, 적당한 폴더에 설치
19.3 node.js 개요와 설치 명령 프롬프트 실행 node.js 설치 폴더로 이동 후 shift + 마우스 오른쪽 버튼 > [여기서 명령 창 열기] 선택 c:\node>node 입력 REPL(Read Eval Print Loop)가 실행됨 이 상태에서 자바스크립트 코드를 한 줄 씩 입력하여 실행할 수 있음 > console.log( Hello World..! )
19.4 기본 파일 실행 파일 작성 JavaScript.js 생성 코드 19-2 입력 console.log( )를 이용하여 화면에 출력함 JavaScript.js 실행 명령 프롬프트 실행 JavaScript.js 파일이 있는 폴더로 이동 명령 프롬프트에서 다음 명령 실행 c:\> node JavaScript.js
19.5 내부 모듈 모듈 node.js의 기능을 확장하기 위해 사용하는 개념 내부 모듈 node.js에 기본적으로 포함되어 있는 모듈 http://nodejs.org/api 에서 확인 가능 Use require('os') to access this module. 코드 19-3 require('os') 적용 후 os 모듈 내부의 속성과 메소드를 출력함 코드 19-4 os 모듈의 메소드 호출
19.6 외부 모듈 외부 모듈 node.js에 기본적으로 포함되어 있는 것이 아니라 개인 또는 단체가 만들어 배포하는 모듈 http://npmjs.org 에서 확인 가능함 참고사항 node.js에서 MySQL 데이터베이스와 연동하는 모듈을 찾고자 하면 구글 검색 시, node.js mysql 이라고 입력함
19.6 외부 모듈 외부 모듈 설치 방법 c:\> npm install 모듈명 예: request 외부 모듈 설명: http 요청을 쉽게 해 주는 모듈 설치 c:\> npm install request 기본 사용 방법 http://npmjs.org에서 request 모듈 검색 Super simple to use 부분의 코드를 복사 실행 c:\> node 19-05.js
19.7 서버 생성 및 실행 서버 구현 준비 필요한 외부 모듈 express (node.js web application framework) expressjs.com 실습: express 모듈 설치 c:> npm install express@3.4.7 (2014년4월 부터 버전 4.x가 나 왔으나 이전 버전과 호환성이 떨어짐) cshserver.js 파일 작성
19.7 서버 생성 및 실행 코드 19-6 필요한 모듈 추출 var http = require( http ); var express = require( express );
19.7 서버 생성 및 실행 코드 19-7 서버 객체 생성 var app = express( ); 웹 서버 실행 http.createserver(app).listen(52273, function() { console.log( Server Running at http://127.0.0.1:52273 ); }); 52273: 포트 번호
19.7 서버 생성 및 실행 코드 19-8 웹 서버 기능 구현: app.use( ) 메소드 사용 app.use( function(request, response) { response.send( <h1>안녕하세요, 최승훈!</h1> ); }); 서버 실행 c:\> node server.js 웹 브라우저 실행 http://127.0.0.1:52273
19.8 미들웨어 request 이벤트 리스너 app.use( ) 메소드에 매개변수로 입력되는 콜백 함수 사용자가 서버에 접속하면 자동으로 실행되는 함수 형식: app.use(function(request, response, next) { } ); request: 요청 객체 response: 응답 객체 next: 다음 콜백 함수를 의미함
19.8 미들웨어 코드 19-9, 19-10 app.use( ) 메소드를 3개 정의함 클라이언트(웹 브라우저)로부터 요청이 오면 3개의 콜백 함수가 자동으로 실행됨 클라이언트 요청 시, 웹 서버로 응답이 가기 전에 실행되는 콜 백 함수를 미들웨어라고 한다. 명령 프롬프트에 first와 second가 두 번 출력된 이유 웹 브라우저가 웹 사이트의 파비콘(favicon)을 얻기위해자동으 로 웹 서버에 요청함 favicon: 웹 브라우저 상단의 탭 왼쪽에 보이는 아이콘 실행 c:\> node 19-09.js
19.8 미들웨어 미들웨어를 이용하면 response 객체와 response 객체 속성과 메소드를 추가할 수 있다. 응답 완료 전까지 여러 가지 일을 처리할 수 있다. 코드 19-11 request 객체와 response 객체에 test 속성을 추가함 미들웨어 실행 순서 위에 정의된 것부터 아래로 실행됨
19.8 미들웨어 미들웨어 목적 이미 존재하는 기능을 현재 서버에 추가시킬 때 사용함 특정한 일을 수행하는 모듈을 분리해서 만들고 이를 호출할 수 있다. express 모듈은 이미 다양한 미들웨어를 가지고 있다. 코드 19-12 app.use(express.logger()) express 모듈에 존재하는 logger( ) 미들웨어를 실행함 logger 미들웨어 요청이 들어왔을 때 로그를 출력하는 미들웨어
19.9 정적 파일 제공 static 미들웨어 클라이언트에게 정적 파일을 제공할 때 사용하는 미들웨어 static 미들웨어를 사용해서 폴더를 지정하면, 이폴더를웹서버 의 루트 폴더로 등록함 요청이 들어오면 이 폴더를 자동으로 접근한다. 파일 종류 동적 파일 요청 시 마다 내용이 바뀌는 파일 예: 네이버의 메인 페이지 정적 파일 내용이 변화하지 않는 파일 예: 자바스크립트 파일, CSS 파일, 그림 파일 등
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. 웹 브라우저로 접근(http://127.0.0.1:52273) public 폴더에 있는 index.html이 보여짐 static 미들웨어는, public 폴더에 원하는 파일이 없는 경우에만 그 다음 미들웨어를 실행함 => 따라서, Hello Middleware..! 이 출력됨
19.9 정적 파일 제공 static 미들웨어는 요청이 들어오는 순간에 등록된 폴더에 가서 파일을 새로 읽는 다. 따라서, 그 폴더(예: public 폴더) 내부에 있는 파일이 변경되어 도 서버를 다시 시작하지 않아도 된다
19.10 라우터 router 미들웨어 페이지 라우팅을 구현하는 미들웨어 페이지 라우팅 클라이언트의 요청에 대하여 적절한 페이지를 제공하는 기술 예제 server_router.js 서버 작성 코드 19-16 app.use(app.router); 문장 추가 주의: express 객체에 있지 않으며, 함수 호출이 아님
19.10 라우터 router 미들웨어를 사용하면, 다음 메소드를 이용할 수 있다. 표19-5 app.get(): 클라이언트의 GET 요청을 처리한다. app.post(): 클라이언트의 POST 요청을 처리한다. app.put(): 클라이언트의 PUT 요청을 처리한다. app.del(): 클라이언트의 DELETE 요청을 처리한다. app.all(): 클라이언트의 모든 요청을 처리한다.
19.10 라우터 server_router.js 작성 (계속) 코드 19-17 app.all( ) 메소드 실행 문장 추가 클라이언트의 모든 종류의 요청을 처리해라. app.all( /a, function (request, response) { response.send('<h1>page A<h1>'); }); 클라이언트가 http://127.0.0.1:52273/a 로 접속하면 콜백함수를 실행 해라. 서버 실행 c:> node server_router.js 브라우저에서 접속 http://127.0.0.1:52273/a 접속시Page A 가 출력됨
19.11 응답과 응답 형식 응답 데이터 형식 HTML 응답 JSON 응답 XML 응답 코드 19-19 기본 서버 파일 /data.html, /data.json, /data.xml 에 대한 라우트 설정 코드 19-20 items 변수 정의 3개의 객체를 포함하는 배열
19.11.1 HTML 응답 코드 19-21 HTML 응답 보내기 response.send(문자열); 코드 19-22 HTML 문자열 생성 서버 실행 c:> node 19-22.js 브라우저 접속 http://127.0.0.1:52273/data.html
19.11.2 JSON 응답 코드 19-23 JSON 응답 보내기 response.send(배열); 또는 response.send(객체); 서버 실행 c:> node 19-23.js 브라우저 접속 http://127.0.0.1:52273/data.json 참고: JSON Formatter 크롬 확장 프로그램을 크롬 웹 스토 어에서 설치해 볼 것
19.11.3 XML 응답 XML로 응답할 때는 response.type( ) 메소드를 이용하여 응답 형식을 지정해야 함 send( ) 메소드는 HTML 형식과 JSON 형식만 지원함 코드 19-25 response.type( text/xml ); text/xml : MIME(Multipurpose Internet Mail Extensions) 타입 중 하나 서버 실행 c:> node 19-25.js 브라우저 접속 http://127.0.0.1:52273/data.xml
19.12 Postman 크롬 확장 프로그램 Postman 크롬 확장 프로그램 HTTP 요청을 수행해 주는 프로그램 크롬 웹 스토어에서 설치 chrome.google.com/webstore 실행 방법 서버 URL 입력 후, send 버튼 클릭
19.13 요청과 요청 매개변수 요청 매개변수 클라이언트가 서버로 전달하는 데이터 형식 http://주소/경로?키a=값a&키b=값b 경로 뒤에? 를 붙이고 키=값 형태를 & 기호로 이어 붙임
19.13.1 일반 요청 매개변수 일반 요청 매개변수를 추출하는 메소드 request.param(키) 코드 19-28 app.all( /parameter, function(request, response) { } ); 코드 19-29 var name = request.param( name ); 서버 실행 c:> node 19-29.js postman 에서 접속 http://127.0.0.1:52273/parameter => URL params 버튼 클릭 => 키와 값 지 정 => send 버튼 클릭
19.13.2 동적 라우트 요청 매개변수 위키피디아 검색의 경우 key=value 형태가 아니라 다음과 같이 경로 형태로 검색이 됨 HTML 검색 시 http://en.wikipedia.org/wiki/html Cloud 검색 시 http://en.wikipedia.org/wiki/cloud 이를 지원하기 위해서는 라우트를 이용한다. 그러나, 검색할 단어가 매우 많으므로, 모든 단어에 대해 라우 트를 할 수가 없다. 따라서, 동적 라우트를 이용한다. 경로가, http://en.wikipedia.org/wiki/키워드 형식이므로 다음과 같이 라우트한다. app.all( /wiki/:keyword, function(request, response) { } );
19.13.2 동적 라우트 요청 매개변수 코드 19-30 app.all('/parameter/:id', function (request, response) { } http://127.0.0.1:52273/parameter/test 로 요청이 오면, test 문자열을 id 속성의 값으로 넣어라. var id = request.param( id ); 를 이용하여 id 속성의 값을 추출함 서버 실행 c:> 19-30.js 브라우저 접속 http://127.0.0.1:52273/parameter/test
19.14 요청 방식 요청 방식 GET: 자원 조회 => 서버의 app.get( ) 메소드가 처리함 POST: 자원 추가 => 서버의 app.post( ) 메소드가 처리함 PUT: 자원 수정 => 서버의 app.put( ) 메소드가 처리함 DELETE: 자원 삭제 => 서버의 app.del( ) 메소드가 처리함
19.14 요청 방식 요청 방식 관리 예 GET 요청: 127.0.0.1/products (제품 전체 조회를 요청함) GET 요청: 127.0.0.1/products/273 (273 제품 조회를 요청함) POST 요청: 127.0.0.1/products (제품 추가를 요청함) PUT 요청: 127.0.0.1/products/273 (273번 제품을 수정함) DELETE 요청: 127.0.0.1/products/273 (273 제품을 제거함) RESTful 웹 서비스 위와 같이 URI(URL)을 이용하여 서비스의 종류를 구분하고 http와 같은 표준화된 인터페이스를 통해 서비스를 제공하는 기술을 RESTful 웹 서비스라고 함
19.14 요청 방식 코드 19-31 app.use(express.bodyparser()); GET 이외의 요청에서 요청 매개변수를 추출하려면 body parser 미들웨어가 필요함 반드시 아래 문장 이전에 실행해야 한다. app.use(app.router); // 라우팅 기능을 사용 코드 19-32 라우트 구성
19.14.1 데이터 조회 코드 19-33 서버 실행 c:> 19-33.js 브라우저 접속(postman 이용) http://127.0.0.1:52273/products GET 요청
19.14.1 데이터 조회 코드 19-34 개별 데이터 조회 코드 19-35 id 값에 대한 오류 처리 추가 서버 실행 c:> 19-35.js 브라우저 접속 (postman 이용) http://127.0.0.1:52273/products/0 GET 요청
19.14.2 데이터 추가 코드 19-36 요청 매개변수인 name과 price를 추출해서 items 배열에 추가함 서버 실행 c:> 19-36.js 브라우저 접속 (postman 이용) http://127.0.0.1:52273/products/ name, price 속성 값 지정 POST 요청
19.14.3 데이터 수정 코드 19-37 서버 실행 c:> 19-37.js 브라우저 접속 (postman 이용) http://127.0.0.1:52273/products/0 name, price 속성 값 지정 PUT 요청
19.14.4 데이터 삭제 코드 19-38 서버 실행 c:> 19-38.js 브라우저 접속 (postman 이용) http://127.0.0.1:52273/products/0 name, price 속성 값 지정 DELETE 요청
19.15 클라이언트 페이지 HTML5 부터는 form 태그에서 PUT 요청과 DELETE 요청은 보낼 수 없음 XMLHttpRequest 객체를 이용하여 PUT과 DELETE 요청을 보냄 20장에서 배움 클라이언트 페이지 작성 (파일명: index.html) 코드 19-39 코드 19-40 코드 19-41 코드 19-42 클라이언트 페이지를 서버에 설치 index.html을 public/product 폴더에 설치
19.15 클라이언트 페이지 브라우저에서 클라이언트 페이지 접속 http://localhost:52273/product/ GET 요청과 POST 요청을 테스트함