JSON-RPC 서버 만들기 11장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03

Slides:



Advertisements
Similar presentations
Tcl/Tk 민 인학 한국 Tcl/Tk 커뮤니티.
Advertisements

제 1장 자바스크립트란 ?.
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이 gpio.
MEAN Stack Front to Back (MEANAuthApp)
PHP programming 2000년 11월 13일 데이터베이스 연구실 김호숙.
웹 2.0 및 Ajax 개요.
암호학 응용 Applied cryptography
로그인 로그인을 하시기 전에 상단 엑티브엑스 프로그램을 실행 후 로그인을 해주시기 바랍니다.
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
채팅 서버 만들기 10장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
모바일 서버 만들기 13장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
데이터 구조 - 소개 순천향대학교 컴퓨터공학과 하 상 호.
C++ 프로그래밍 년 2학기 전자정보공학대학 컴퓨터공학부.
2 서블릿의 기초.
Toad for Oracle 설치 방법.
프로시저 와 인수전달 컴퓨터응용 및 실습 I.
HTML CSS 자바스크립트 무작정 따라하기
C++ 프로그래밍 년 2학기 전자정보공학대학 컴퓨터공학부.
위치기반서비스 서버 만들기 12장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
Power Java 제4장 자바 프로그래밍 기초.
웹 서버 만들기 5장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
데이터베이스 사용하기 6장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
ActiveX 개발 KnowHow (C++ Builder 6.0)
AJAX 커머스아이 박준열.
게시판 만들기 14장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
간단한 이벤트 연결 jQuery 단축 이벤트 메서드 사용법
IS lab. 김건영 Awk, Posting list IS lab. 김건영
Computer Architecture
웹서버와 설치에 필요한 것 WWW ( world wide web ) TCP/IP 프로토콜을 이용하는 클라이언트/서버 환경
MEAN Stack Front to Back (MEANAuthApp)
뷰 템플릿 적용하기 8장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
5주차: Functions in C.
제주닷컴 매뉴얼 (실시간 예약시스템) 2013년 10월.
저수준의 시각적 효과 jQuery의 기본 효과.
진상현 노현철 박주호 김민구 이보라 박종빈 Ajax.
jQuery jQuery 개요 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리
Web Socket.
프로그래밍 원리 Chapter 05 자바스크립트 기초 신한대학교 IT융합공학부 박 호 균.
암호학 응용 Applied cryptography
목차 INDEX 1. 회원가입 및 로그인 2. 업체정보 3. 제조검사 신청 4. 인보이스 5. 검사진행현황(현장검사 신청)
웹 어플리케이션 보안 2016년 2학기 2. Node routing.
JavaScript COOKIE Chapter 10 Part III
JavaScript 기초 Chapter 8 Part II
웹어플리케이션보안 암호프로그래밍, crypto-js
스마트폰 전자신고 방법 국세청 모바일 통합 앱 다운로드(갤럭시S) 가. 교재 15~19페이지
SNS 로그인 API 연동 조휘제.
상품등록 방식 비교 년 4월 23일 (주)에이치케이넷츠.
인터넷응용프로그래밍 JavaScript(array).
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지. PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지.
User Datagram Protocol (UDP)
XSS (Cross Site Script)
1장. HTML5 소개 To Flash 정보영재세미나 1 김태영교수님 홍창의.
가계부 자동작성 APP Ucloud를 이용한 카드 내역 자동 작성 정보통신공학과 김대웅
노드 알아보고 개발도구 설치하기 1장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
노드로 만들 수 있는 대표적인 서버와 용도 준비마당 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안
작성일 참고서적 – Programing Game AI by Example
세션 (Session) Yang-Sae Moon Department of Computer Science
암호학 응용 Applied cryptography
반복문의 기능 반복문 반복문 특정 영역을 특정 조건이 만족하는 동안에 반복 실행하기 위한 문장 while문
이번 시간에는... 지난 시간까지 2회차에 걸쳐 WML의 택스트 포맷, 이미지 처리, 페이지 이동, 태스크 수행과 이벤트 처리 및 WML 사용자 Input 처리 태그 등, WML 개발에 대해서 알아보았습니다. 이번 시간에는 2회차에 걸쳐, WML 스크립트 개발에 대해서.
웹어플리케이션보안 난수화 토큰인증 중부대학교 정보보호학과 이병천 교수.
Node Red 컴퓨터공학과 오동근 1.
유예 X-FILE *조사자* 1301권희원 1315이예지 1317장아정 1322홍자현.
책을 읽읍시다  탈향 진지하게 설명해드림 1303 김소희 1309박지호 1315이지수.
Web & Internet [10] 입문 – input 태그
2016년 제1차 운영위원회 평택시건강가정 ∙다문화가족지원센터
머니투데이 메인 UI수정 Moneytoday.co.kr - 작성자 : 한정환 - 작성일 :
MEAN Stack Front to Back (MEANAuthApp)
Ajax와 자바스크립트 라이브러리 발표자 : 경준호(파이어준) 이메일 :
Presentation transcript:

JSON-RPC 서버 만들기 11장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03 ○ 본 강의 자료는 이지스퍼블리싱에서 제공하는 강의 교안입니다. ○ 본 강의 교안은 아래 출판 서적의 내용을 기준으로 구성되었습니다. 또한 다수의 기타 서적이나 사이트를 참조하였습니다. 레퍼런스를 참조하십시오. 2017, 정재곤, “Do it! Node.js 프로그래밍 (개정판)”, 이지스퍼블리싱 - 강의 교안에 사용된 화면 캡처나 실습 자료의 경우에는 문서 업데이트에 따라 변경될 수 있습니다.

JSON-RPC 서버를 어떻게 만드는지 알아보자 강의 주제 및 목차 강의 주제 JSON-RPC 서버를 어떻게 만드는지 알아보자 목 차 1 JSON-RPC를 웹서버에 적용하기 2 계산기 모듈 추가하여 실행하기 3 데이터베이스에서 사용자 리스트 조회하기 4 데이터 부분을 암호화하기

1. JSON-RPC를 웹서버에 적용하기 난이도 소요시간 20분

JSON-RPC란? RPC(Remote Procedure Call)는 서버에 데이터를 요청하여 응답 받는 과정을 라이브러리에서 자동으로 처리 JSON 포맷으로 데이터를 주고 받는 경우 JSON-RPC라고 부름

라이브러리 사용 jayson 모듈 설치하고 불러들여 사용 % npm install jayson --save var handler_loader = require('./handlers/handler_loader'); ……. // JSON-RPC 사용 var jayson = require('jayson'); // JSON-RPC 핸들러 정보를 읽어 들여 핸들러 경로 설정 var jsonrpc_api_path = config.jsonrpc_api_path || '/api'; handler_loader.init(jayson, app, jsonrpc_api_path); console.log('JSON-RPC를 [' + jsonrpc_api_path + '] 패스에서 사용하도록 설정함.');

기본 패스를 설정에 등록 기본 패스를 설정에 등록한 후 요청하는 방식 module.exports = { ……. ▶ http://localhost : 3000/api module.exports = { ……. jsonrpc_api_path : '/api' }

핸들러 정보 등록 Handlers 폴더 안에 handler_info.js 파일 만들어 각각의 핸들러 등록 console.log('handler_info 파일 로딩됨.'); var handler_info = [ {file : './echo', method : 'echo'} ]; module.exports = handler_info; var echo = function(params, callback) { console.log('JSON-RPC echo 호출됨.'); console.dir(params); callback(null, params); }; module.exports = echo;

호출 방식 서버에 등록한 모듈을 클라이언트 웹에서 호출하여 사용

클라이언트 웹 페이지 작성 jquery.jsonrpc.js 라이브러리 사용 ▶ https://github.com/datagraph/jquery-jsonrpc <script src = "jquery-2.1.4.min.js"></script> <script src = "jquery.jsonrpc.js"></script> <script> $(function() { $.jsonRPC.setup({ endPoint : 'http://localhost:3000/api', namespace : '' });

클라이언트 웹 페이지 작성 요청 버튼 클릭 시 처리 $("#requestButton").click(function() { var message = $("#messageInput").val(); var method = 'echo'; $.jsonRPC.request(method, { id : 1001, params : [message], success : function(data) { println('정상 응답을 받았습니다.'); console.dir(data); println(data.result); }, error: function(data) { println('오류 응답을 받았습니다.'); println(data.error.message); } }); println('[' + method + '] method로 요청을 보냈습니다.');

서버에 요청할 때 전달되는 객체의 속성 $.jsonRPC.request() 메소드를 호출하여 전달 속성 이름 설명 id params 서버로 보낼 데이터를 넣는 배열 객체입니다. success 응답을 성공적으로 받았을 때 호출되는 콜백 함수입니다. error 오류 응답을 받았을 때 호출되는 콜백 함수입니다. 속성 이름 설명 id 요청할 때 전달한 id 값이 들어 있습니다. jsonrpc JSON-RPC 스펙의 버전을 표기합니다. 여기에서는 ’2.0’입니다. result 응답 데이터가 배열 객체로 들어 있습니다.

echo 기능 테스트 웹 페이지에서 요청한 후 응답 확인 ▶ http://localhost:3000/public/echo.html

echo 함수를 실행하는 과정 서버에 함수를 정의한 후 클라이언트에서 호출

오류 발생 시 처리 오류 발생했을 때 처리하는 방식 알아보기 var echo_error = function(params, callback) { console.log('JSON-RPC echo_error 호출됨.'); console.dir(params); // 파라미터 체크 if (params.length < 2) { // 파라미터 개수 부족 callback({ code : 400, message : 'Insufficient parameters' }, null); return; } var output = 'Success'; callback(null, output); }; module.exports = echo_error;

오류 발생 확인을 위한 웹페이지 서버 모듈 등록 후 클라이언트 웹페이지 작성 $("#requestButton").click(function() { var message = $("#messageInput").val(); var method = 'echo_error'; $.jsonRPC.request(method, { params : [message], success : function(data) { println('정상 응답을 받았습니다.'); console.dir(data); println(data.result); }, error : function(data) { println('오류 응답을 받았습니다.'); println(data.error.code + ', ' + data.error.message); } }); println('[' + method + '] method로 요청을 보냈습니다.'); ▶ http://localhost:3000/public/echo_error.html

2. 계산기 모듈 추가하여 실행하기 난이도 소요시간 20분

서버에 add 모듈 추가하는 방식 더하기 모듈을 만들어 서버에 추가하고 클라이언트 웹 페이지 작성

1단계 : 핸들러 모듈 파일 만들기 add.js 파일 작성 var add = function(params, callback) { console.log('JSON-RPC add 호출됨.'); console.dir(params); if (params.length < 2) { // 파라미터 개수 부족 callback({ code : 400, message : 'Insufficient parameters' }, null); return; } var a = params[0]; var b = params[1]; var output = a + b; callback(null, output); }; module.exports = add;

2단계 : 핸들러 모듈 파일 등록하기 add.js 파일에 대한 정보를 handler_info.js 파일에 등록 ……. var handler_info = [ {file : './add', method : 'add'}, ];

3단계 : 클라이언트 웹 문서 만들어 호출하기 태그 추가 및 자바스크립트 코드 작성 <h3>JSON-RPC Add 테스트</h3> <br> <input type = "text" value = "10" name = "aInput" id = "aInput"/> <p>+</p> <input type = "text" value = "10" name = "bInput" id = "bInput"/> <input type = "button" name = "requestButton" id = "requestButton" value = "요청하기"/> <p>결과<p> <div id = "results"></div> …….

3단계 : 클라이언트 웹 문서 만들어 호출하기 태그 추가 및 자바스크립트 코드 작성 $("#requestButton").click(function() { var aStr = $("#aInput").val(); var bStr = $("#bInput").val(); var a = parseInt(aStr); var b = parseInt(bStr); var method = 'add'; $.jsonRPC.request(method, { id: 1002, params: [a, b], success: function(data) { println('정상 응답을 받았습니다.'); console.dir(data); println(data.result); }, error: function(data) { println('오류 응답을 받았습니다.');

3. 데이터베이스에서 사용자 리스트 조회하기 난이도 소요시간 30분

실제 사용하는 코드에 적용 사용자 리스트 조회 함수를 만들어 호출하도록 구성할 수 있음 var listuser = function(params, callback) { console.log('JSON-RPC listuser 호출됨.'); console.dir(params); var database = global.database; if (database) { console.log('database 객체 참조됨.'); } else { console.log('database 객체 불가함.'); callback({ code : 410, message : 'database 객체 불가함.' }, null); return; } if (database.db) { database.UserModel.findAll(function(err, results) {

실제 사용하는 코드에 적용 사용자 리스트 조회 함수를 만들어 호출하도록 구성할 수 있음 if (results) { console.log('결과물 문서 데이터의 개수 : %d', results.length); var output = [ ]; for (var i = 0; i < results.length; i++) { var curId = results[i]._doc.id; var curName = results[i]._doc.name; output.push({id : curId, name : curName}); } console.dir(output); callback(null, output); ……. {

함수 등록 새로 만든 listuser 함수를 handler_info.js 파일에 등록 var handler_info = [ ……. {file : './listuser', method : 'listuser'} ];

클라이언트 웹 페이지에서 요청 요청 버튼 클릭 시 동작하는 자바스크립트 코드 작성 ……. // 버튼을 클릭했을 때 서버에 요청 $("#requestButton").click(function() { var method = 'listuser'; var id = 1004; var params = [ ]; sendRequest(method, id, params); println('[' + method + '] method로 요청을 보냈습니다.'); });

클라이언트 웹 페이지에서 요청 요청을 위한 공통 함수 ……. function sendRequest(method, id, params) { $.jsonRPC.request(method, { id : id, params : params, success : function(data) { println('정상 응답을 받았습니다.'); console.dir(data); processResponse(data); }, error : function(data) { println('오류 응답을 받았습니다.'); processError(data); } });

클라이언트 웹 페이지에서 요청 정상 응답을 받았을 때 호출되는 함수 ……. // 성공 응답을 받은 경우 호출되는 함수 function processResponse(data) { if (Array.isArray(data.result)) { println('사용자 수 : ' + data.result.length); data.result.forEach(function(item, index) { println('#' + index + ' : ' + item.id + ', ' + item.name); }); } else { println('결과 데이터가 배열 타입이 아닙니다.'); }

코드 구조 요청을 하면 listuser 함수가 실행되고 응답을 보내주는 방식 ▶ http://localhost:3000/public/listuser.html

4. 데이터 부분을 암호화하기 난이도 소요시간 20분

암호화 송수신 과정 JSON-RPC로 데이터를 주고받는 부분을 암호화

클라이언트 웹 페이지 수정 암호화 라이브러리를 사용하는 방식으로 수정 ▶ https://code.google.com/p/crypto-js/ $("#requestButton").click(function() { var message = $("#messageInput").val(); // 암호화 테스트 var secret = 'my secret'; var encrypted = '' + CryptoJS.AES.encrypt(message, secret); console.log(encrypted); // 복호화 테스트 var decrypted = CryptoJS.AES.decrypt(encrypted, secret).toString(CryptoJS.enc.Utf8); console.log(decrypted); var method = 'echo_encrypted'; $.jsonRPC.request(method, { id : 1001, params : [encrypted], success : function(data) { println('정상 응답을 받았습니다.'); console.dir(data);

클라이언트 웹 페이지 수정 암호화 라이브러리를 사용하는 방식으로 수정 var secret = 'my secret'; var encrypted = data.result[0]; var decrypted = CryptoJS.AES.decrypt(encrypted, secret).toString(CryptoJS.enc.Utf8); console.log(decrypted); println(decrypted); }, error : function(data) { println('오류 응답을 받았습니다.'); console.dir(data); println(data.error.message); } }); println('[' + method + '] method로 요청을 보냈습니다.'); …….

서버 코드에서 암호화 외장 모듈 crypto-js를 설치한 후 코드 수정 % npm install crypto-js --save var crypto = require('crypto-js'); var echo = function(params, callback) { console.log('JSON-RPC echo_encrypted 호출됨.'); console.dir(params); try { // 복호화 테스트 var encrypted = params[0]; var secret = 'my secret'; var decrypted = crypto.AES.decrypt(encrypted, secret).toString(crypto.enc.Utf8); console.log('복호화된 데이터 : ' + decrypted);

서버 코드에서 암호화 외장 모듈 crypto-js를 설치한 후 코드 수정 // 암호화 테스트 var encrypted = '' + crypto.AES.encrypt(decrypted + ' -> 서버에서 보냄.', secret); console.log(encrypted); params[0] = encrypted; } catch(err) { console.dir(err); console.log(err.stack); } callback(null, params); }; module.exports = echo;

웹페이지에서 요청한 결과 확인 요청 후 서버 쪽 콘솔 확인 ▶ http://localhost:3000/public/echo_encrypted.html

참고 문헌 [ References] 기본 서적 2017, 정재곤, “Do it! Node.js 프로그래밍 (개정판)”, 이지스퍼블리싱 Node.js Site http://nodejs.org/