node.js, express, jade, mongodb를 이용한 웹 어플리케이션 개발

Presentation on theme: "node.js, express, jade, mongodb를 이용한 웹 어플리케이션 개발"— Presentation transcript:

1 node.js, express, jade, mongodb를 이용한 웹 어플리케이션 개발 2015. 2.
중부대학교 이병천 교수

2 차례 Part 1. 시스템 설치 Part 2. Hello World 페이지 제작 1.1 node.js 설치
1.2 Express 설치 1.3 Express 프로젝트 생성 1.4 상호의존성 편집 1.5 패키지 설치 1.6 서버 실행 Part 2. Hello World 페이지 제작 2.1 app.js 파일 분석 2.2 hello world 페이지 추가 2.3 서비스 재시작

3 차례 Part 3. DB 생성 및 읽기 Part 4. DB에 쓰기 구현 3.1 MongoDB 설치 3.2 MongoDB 실행
3.3 데이터베이스 생성 3.4 데이터 입력 3.5 MongoDB를 node app에 연결 3.6 Mongo의 데이터를 화면에 표시 3.7 서버 재시작 Part 4. DB에 쓰기 구현 4.1 데이터 입력 폼 생성 4.2 사용자 입력을 위한 DB함수 생성 4.3 서버 재시작 및 새로운 사용자 등록

4 차례 Part 5. RESTful 서비스 개발 5.1 프로젝트 생성 5.2 HTML 작성 5.3 데이터베이스 생성
5.4 사용자 테이블 표시 5.5 사용자 상세정보 보기 화면 제작 5.6 사용자 추가 기능 구현 5.7 사용자 삭제 기능 구현 5.8 완성

5 핵심 개념 설명 Node.js Express Jade MongoDB 서버사이드 자바스크립트 프로그래밍
이벤트 기반 서비스 제공, 다수 이용자 환경에서 성능 향상 Express 웹서비스 개발을 위한 프레임워크 웹서비스 템플릿을 쉽게 생성 Jade HTML 문서를 쉽게 만들어주는 템플릿 MongoDB 이벤트 기반 효율적인 데이터베이스 Non-SQL 데이터베이스

6 Part 1. 시스템 설치 Part 1. 시스템 설치 1.1 node.js 설치 1.2 Express 설치
1.4 상호의존성 편집 1.5 패키지 설치 1.6 서버 실행

7 1.1 node.js 설치 Node.js란? 설치 서버사이드 자바스크립트 프로그래밍
자바스크립트를 이용한 서버(웹서버) 제작 가능 설치 C:\Program Files\nodejs 에 설치했음 환경변수 path에 설치폴더 추가

8 1.2 Express 설치 앱을 개발할 디렉토리 생성 Express란? C:\node 생성하고 명령프롬프트에서 이 폴더로 이동
윈도우 탐색기에서 이 폴더로 이동하고 Shift 상태에서 “여기서 명령창 열기” 실행 Express란? 웹서비스를 쉽게 만들 수 있는 프레임워크 기본적인 웹서비스 템플릿을 자동 생성

9 1.2 Express 설치 Express 설치 C:\node>npm install -g express
C:\node>npm install -g express-generator -g 옵션은 전역설치를 의미. 컴퓨터 내 어디에서나 이용 가능

10 1.3 Express 프로젝트 생성 Express 프로젝트 생성 프로젝트명 결정: (예) nodetest
Express 실행: C:\node>express nodetest 프로젝트명의 폴더와 각종 파일들이 자동 생성

11 1.3 Express 프로젝트 생성 폴더 구성 App.js : 웹서비스의 시작점
Package.json : express 실행에 필요한 패키지 정보 기록 Bin 폴더 : www 파일 Public 폴더 : 공용 파일들을 배치 Routes 폴더 : 라우팅 정보들을 배치 Views 폴더 : 화면에 표시하는 파일들을 배치 화면 표시는 jade 스크립트를 이용

12 1.4 상호의존성 편집 package.json 파일 편집 c:\node\nodetest\package.json
데이터베이스 사용을 위해 MongoDB와 Monk 추가 여기에 등록된 정보에 따라 패키지들이 설치됨

13 1.5 패키지 설치 프로젝트 디렉토리로 이동 npm이란? 데이터베이스가 이용할 디렉토리 생성 설치
c:\node\nodetest\ npm이란? node.js 패키지 매니저 node.js에 부가적인 패키지들을 설치하여 사용할때 사용 데이터베이스가 이용할 디렉토리 생성 c:\node\nodetest>mkdir data 추후 이용 설치 c:\node\nodetest>npm install Package.json 파일의 정보를 참조하여 설치

14 1.5 패키지 설치 여러가지 패키지들이 설치되는 것을 볼 수 있음

15 1.6 서버 실행 서버 시작 C:\node\nodetest>npm start 웹브라우저로 접속 3000번 포트 사용

16 Part 2. Hello World 페이지 제작 Part 2. Hello World 페이지 제작 2.1 app.js 파일 분석
2.3 서비스 재시작

17 2.1 App.js 파일 분석 app.js 파일은 웹서비스의 시작점 패키지 활용을 위한 자바스크립트 변수 생성
Express 실행하여 app 변수 생성 var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express();

18 2.1 App.js 파일 분석 뷰 설정: 뷰 폴더는 views임, jade 엔진 사용 선언 여러가지 미들웨어 메소드들을 실행
// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); // uncomment after placing your favicon in /public //app.use(favicon(__dirname + '/public/favicon.ico')); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users);

19 2.1 App.js 파일 분석 에러 핸들러 선언 // catch 404 and forward to error handler
app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} });

20 2.1 App.js 파일 분석 App 오브젝트를 export 다른 코드에서 app이라는 오브젝트명을 이용 가능하도록 함
module.exports = app;

21 2.2 hello world 페이지 추가 routes\index.js 에 “hello world” 내용 추가
c:\node\nodetest\routes\index.js views 폴더에 helloworld.jade 파일 생성 c:\node\nodetest1\views\helloworld.jade Layout.jade 파일을 상속받고 내용을 추가함 /* GET Hello World page. */ router.get('/helloworld', function(req, res) { res.render('helloworld', { title: 'Hello, World!' }) }); extends layout block content h1= title p Hello, World! Welcome to #{title}

22 2.3 서비스 재시작 서비스 다시 시작 웹브라우저로 새로 만든 페이지 접속 루트 페이지에 새로 만든 페이지 링크 생성
Ctrl+c로 기존 서비스 중지 cd c:\node\nodetest\ 서버 재시작: npm start 웹브라우저로 새로 만든 페이지 접속 루트 페이지에 새로 만든 페이지 링크 생성 c:\node\nodetest\views\index.jade extends layout block content h1= title p Welcome to #{title} a(href="helloworld")="Hello world"

23 Part 3. DB 생성 및 읽기 Part 3. DB 생성 및 읽기 3.1 MongoDB 설치 3.2 MongoDB 실행
3.3 데이터베이스 생성 3.4 데이터 입력 3.5 MongoDB를 node app에 연결 3.6 Mongo의 데이터를 화면에 표시 3.7 서버 재시작

24 3.1 MongoDB 설치 웹사이트: http://mongodb.org/ 설치
C:\Program Files\MongoDB 2.6 Standard\에 설치 C:\Program Files\MongoDB 2.6 Standard\bin 에 실행파일 이 폴더에 있는 실행파일들을 다른 폴더로 복사/이동해서 쓸 수 있음

25 3.2 MongoDB 실행 서버 시작 클라이언트 실행 및 서버 연결 설치장소에서 명령프롬프트 열기
서버 데몬 실행: mongod --dbpath c:\node\nodetest\data 서버 데몬 실행시 DB의 실행경로 설정 클라이언트 실행 및 서버 연결 설치장소에서 새로운 명령프롬프트 열기 쉘 실행: mongo

26 3.2 MongoDB 실행 클라이언트 실행 서버 실행

27 3.3 데이터베이스 생성 DB명 생성 테이블 구조 설계 Mongo 콘솔에서 Use “DB명”
> use nodetest (nodetest 라는 이름의 데이터베이스를 생성) 테이블 구조 설계 예: Username, 의 두 개의 필드만 가진 테이블 이용 MongoDB는 DB 스키마를 설계하지 않아도 됨. 데이터를 처음 입력하면 그에 맞게 스키마가 자동 생성됨

28 3.4 데이터 입력 데이터 입력 db.usercollection.insert({ "username" : "testuser1", " " : }) 데이터 보기 db.usercollection.find().pretty()

29 3.4 데이터 입력 데이터 추가 입력 추가된 전체 데이터 보기
newstuff = [{ "username" : "testuser2", " " : }, { "username" : "testuser3", " " : }] db.usercollection.insert(newstuff); 추가된 전체 데이터 보기 db.usercollection.find().pretty()

30 3.5 MongoDB를 node app에 연결 app.js에 코드 추가 Mongo, monk 사용을 선언
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); // New Code var mongo = require('mongodb'); var monk = require('monk'); var db = monk('localhost:27017/nodetest');

31 3.5 MongoDB를 node app에 연결 app.js에 코드 추가 db를 사용함을 선언
routes 미들웨어 전에 선언해야 함 // Make our db accessible to our router app.use(function(req,res,next){ req.db = db; next(); }); app.use('/', routes); app.use('/users', users);

32 3.6 Mongo의 데이터를 화면에 표시 routes\index.js에 코드 추가
/userlist 라는 페이지에 사용자 리스트를 표시하도록 함 /* GET Userlist page. */ router.get('/userlist', function(req, res) { var db = req.db; var collection = db.get('usercollection'); collection.find({},{},function(e,docs){ res.render('userlist', { "userlist" : docs }); module.exports = router;

33 3.6 Mongo의 데이터를 화면에 표시 View\userlist.jade 파일을 새로 생성
Index.js에서 userlist 페이지에 연결될때 표시할 형식을 지정 ul 형식의 리스트로 표시 Jade 파일은 들여쓰기(indentation)가 매우 중요하므로 잘 지켜 야 함 extends layout block content h1. User List ul each user, i in userlist li a(href="mailto:#{user. }")= user.username

34 3.7 서버 재시작 메인페이지에 링크 달기 서버 재시작
npm start 웹브라우저로 페이지 열기 extends layout block content h1= title p Welcome to #{title} a(href="helloworld")="Hello world" br a(href="userlist")="User list"

35 Part 4. DB에 쓰기 구현 Part 4. DB에 쓰기 구현 4.1 데이터 입력 폼 생성
4.3 서버 재시작 및 새로운 사용자 등록

36 4.1 데이터 입력 폼 생성 POST 입력을 받는 route를 설정 필요
routes\index.js에 newuser라는 사용자 입력 루트 추가 이에 해당하는 newuser라는 view를 만들어야 함 /* GET New User page. */ router.get('/newuser', function(req, res) { res.render('newuser', { title: 'Add New User' }); }); module.exports = router;

37 4.1 데이터 입력 폼 생성 사용자 입력을 위한 폼 생성 views 폴더에 newuser.jade 파일 새로 생성
extends layout block content h1= title form#formAddUser(name="adduser",method="post",action="/adduser") input#inputUserName(type="text", placeholder="username", name="username") input#inputUser (type="text", placeholder="user ", name="user ") button#btnSubmit(type="submit") submit

38 4.1 데이터 입력 폼 생성 서버를 다시 시작 웹브라우저로 사용자 입력 페이지 접속
에 접속

39 4.2 사용자 입력을 위한 DB함수 생성 /adduser 라는 POSTing 함수 추가
routes\index.js 함수에 다음 내용 추가 /* POST to Add User Service */ router.post('/adduser', function(req, res) { // Set our internal DB variable var db = req.db; // Get our form values. These rely on the "name" attributes var userName = req.body.username; var user = req.body.user ; // Set our collection var collection = db.get('usercollection'); // Submit to the DB collection.insert({ "username" : userName, " " : user }, function (err, doc) { if (err) { // If it failed, return error res.send("There was a problem adding the information to the database."); } else { // If it worked, set the header so the address bar doesn't still say /adduser res.location("userlist"); // And forward to success page res.redirect("userlist"); }); module.exports = router;

40 4.2 사용자 입력을 위한 DB함수 생성 메인페이지에 링크 추가 Index.jade 파일 수정 extends layout
block content h1= title p Welcome to #{title} a(href="helloworld")="Hello world" br a(href="userlist")="User list" a(href="newuser")="Add new user"

41 4.3 서버 재시작 및 새로운 사용자 등록 서버 재시작 npm start 새로운 사용자 등록 성공! 축하합니다.

42 Part 5. RESTful 서비스 개발 Part 5. RESTful 서비스 개발 5.1 프로젝트 생성 5.2 HTML 작성
5.3 데이터베이스 생성 5.4 사용자 테이블 표시 5.5 사용자 상세정보 보기 화면 제작 5.6 사용자 추가 기능 구현 5.7 사용자 삭제 기능 구현 5.8 완성

43 RESTful 서비스 개발 RESTful? REST 특징 Representational State Transfer (REST)
Use HTTP methods explicitly GET, POST, PUT, DELETE 등의 Http 메서드를 이용 Be stateless 상태정보를 서버에 저장하지 않음 Expose directory structure-like URIs 디렉토리 구조 형태의 URL 주소를 사용 Transfer XML, JavaScript Object Notation (JSON), or both. 데이터를 XML 또는 JSON 형태로 전달 an architectural style that abstracts the architectural elements within a distributed hypermedia system. 

44 RESTful 서비스 개발 한 페이지에서 모든 작업이 수행되는 웹서비스 개발

45 5.1 프로젝트 생성 편의상 새로운 express 프로젝트를 생성하자 Package.json 파일 수정 패키지 설치
c:\node\ 폴더로 이동 express nodetest2 (nodetest2 프로젝트 생성) Package.json 파일 수정 c:\node\nodetest2\package.json Mongodb, mongoskin 추가 패키지 설치 c:\node\nodetest2\ 폴더로 이동 npm install DB가 사용할 디렉토리 생성 mkdir data { "dependencies": { "body-parser": "~1.10.2", "cookie-parser": "~1.3.3", "debug": "~2.1.1", "express": "~4.11.1", "jade": "~1.9.1", "morgan": "~1.5.1", "serve-favicon": "~2.2.0", "mongodb": "*", "mongoskin": "*" }

46 5.2 HTML 작성 Layout.jade 수정 c:\node\nodetest2\views\layout.jade
jQuery 링크 추가 (이 프로젝트에서 jQuery 이용 예정) /javascripts/global.js 파일 추가 (공용 자바스크립트 파일, 새로 만들어야 함) 스타일 파일을 예쁜 것으로 업데이트 /public/stylesheets/style.css 를 다음 링크의 것으로 덮어씀 doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content script(src=' script(src='/javascripts/global.js')

47 5.2 HTML 작성 index.jade에 사용자 리스트를 보여주는 기능 구현 서버 재시작 브라우저로 확인
c:\node\nodetest2\views\index.jade jade 파일 수정시에는 들여쓰기를 정확하게 사용해야 함 사용자명, 이메일, 삭제여부?의 테이블로 표시 서버 재시작 npm start 브라우저로 확인 extends layout block content h1= title p Welcome to our test // Wrapper #wrapper // USER LIST h2 User List #userList table thead th UserName th th Delete? tbody // /USER LIST // /WRAPPER

48 5.3 데이터베이스 생성 서버 실행 클라이언트 실행 신규 데이터베이스 생성
mongod --dbpath c:\node\nodetest2\data 데이터 저장할 디렉토리명 지정 클라이언트 실행 mongo 신규 데이터베이스 생성 > use nodetest2

49 5.3 데이터베이스 생성 데이터베이스 구조 설계 및 입력 데이터 보기
필드명: username, , fullname, age, location, gender > db.userlist.insert({'username' : 'test1',' ' : : 'Bob Smith','age' : 27,'location' : 'San Francisco','gender' : 'Male'}) 데이터 보기 db.usercollection.find().pretty()

50 5.4 사용자 테이블 표시 app.js에 mongoskin과의 연결 추가 c:\node\nodetest2\app.js
MongoDB는 27017번 포트 사용 데이터베이스명 nodetest2 명시 var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); // Database var mongo = require('mongoskin'); var db = mongo.db("mongodb://localhost:27017/nodetest2", {native_parser:true});

51 5.4 사용자 테이블 표시 app.js에 db와의 연결 추가 routes 보다 앞에 추가해야 함
// Make our db accessible to our router app.use(function(req,res,next){ req.db = db; next(); }); app.use('/', routes); app.use('/users', users);

52 5.4 사용자 테이블 표시 라우팅 설정 c:\node\nodetest2\routes\users.js 파일을 다음과 같이 수정
기본 view를 지우고 사용자 리스트를 나타내도록 기능 변경 db에서 받은 items들을 json형식으로 반환 var express = require('express'); var router = express.Router(); /* * GET userlist. */ router.get('/userlist', function(req, res) { var db = req.db; db.collection('userlist').find().toArray(function (err, items) { res.json(items); }); module.exports = router;

53 5.4 사용자 테이블 표시 /nodetest2/public/javascripts/global.js 파일 생성
DB에서 사용자 리스트를 불러와서 html로 테이블을 만듬 // Userlist data array for filling in info box var userListData = []; // DOM Ready ============================================================= $(document).ready(function() { // Populate the user table on initial page load populateTable(); }); // Functions ============================================================= // Fill table with data function populateTable() { // Empty content string var tableContent = ''; // jQuery AJAX call for JSON $.getJSON( '/users/userlist', function( data ) { // For each item in our JSON, add a table row and cells to the content string $.each(data, function(){ tableContent += '<tr>'; tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.username + '">' + this.username + '</a></td>'; tableContent += '<td>' + this. + '</td>'; tableContent += '<td><a href="#" class="linkdeleteuser" rel="' + this._id + '">delete</a></td>'; tableContent += '</tr>'; // Inject the whole content string into our existing HTML table $('#userList table tbody').html(tableContent); };

54 5.4 사용자 테이블 표시 브라우저로 결과 확인

55 5.5 사용자 상세정보 보기 화면 제작 사용자 상세정보 보기 화면 제작
c:\node\nodetest2\public\javascripts\global.js 파일 수정 DB로부터 읽어온 data를 글로벌 변수 userListData에 입력. (쉽게 수행하기 위한 임시방편의 방식이며 한번에 읽어오는 데이터 개 수가 많은 경우에는 매우 좋지 않은 방법임) // jQuery AJAX call for JSON $.getJSON( '/users/userlist', function( data ) { // Stick our user data array into a userlist variable in the global object userListData = data; // For each item in our JSON, add a table row and cells to the content string $.each(data, function(){

56 5.5 사용자 상세정보 보기 화면 제작 상세정보 보기 함수 생성
global.js 파일 뒷부분에 다음의 showUserInfo 함수 추가 // Show User Info function showUserInfo(event) { // Prevent Link from Firing event.preventDefault(); // Retrieve username from link rel attribute var thisUserName = $(this).attr('rel'); // Get Index of object based on id value var arrayPosition = userListData.map(function(arrayItem) { return arrayItem.username; }).indexOf(thisUserName); // Get our User Object var thisUserObject = userListData[arrayPosition]; //Populate Info Box $('#userInfoName').text(thisUserObject.fullname); $('#userInfoAge').text(thisUserObject.age); $('#userInfoGender').text(thisUserObject.gender); $('#userInfoLocation').text(thisUserObject.location); };

57 5.5 사용자 상세정보 보기 화면 제작 사용자 이름을 클릭하면 showUserInfo 함수가 실행되도 록 설정
global.js 파일에서 다음 부분 추가 // DOM Ready ========================================= $(document).ready(function() { // Populate the user table on initial page load populateTable(); // Username link click $('#userList table tbody').on('click', 'td a.linkshowuser', showUserInfo); });

58 5.5 사용자 상세정보 보기 화면 제작 showUserInfo 함수의 결과를 화면에 표시하도록 설정
c:\node\nodetest2\views\index.jade 파일 수정 #wrapper 영역 앞부분에 사용자정보 표시 화면 추가 // Wrapper #wrapper // USER INFO #userInfo h2 User Info p strong Name: | <span id='userInfoName'></span> br strong Age: | <span id='userInfoAge'></span> strong Gender: | <span id='userInfoGender'></span> strong Location: | <span id='userInfoLocation'></span> // /USER INFO

59 5.5 사용자 상세정보 보기 화면 제작 결과

60 5.6 사용자 추가 기능 구현 index.jade에 사용자 추가 화면 구성
c:\node\nodetest2\views\index.jade 의 //wrapper 뒷부분에 다음 내용을 추가 // ADD USER h2 Add User #addUser fieldset input#inputUserName(type='text', placeholder='Username') input#inputUser (type='text', placeholder=' ') br input#inputUserFullname(type='text', placeholder='Full Name') input#inputUserAge(type='text', placeholder='Age') input#inputUserLocation(type='text', placeholder='Location') input#inputUserGender(type='text', placeholder='gender') button#btnAddUser Add User // /ADD USER // /WRAPPER

61 5.6 사용자 추가 기능 구현 사용자 입력을 DB에 저장하는 기능 구현
c:\node\nodetest2\routes\users.js 파일에 다음 내용 추가 /* * POST to adduser. */ router.post('/adduser', function(req, res) { var db = req.db; db.collection('userlist').insert(req.body, function(err, result){ res.send( (err === null) ? { msg: '' } : { msg: err } ); }); module.exports = router;

62 5.6 사용자 추가 기능 구현 Add user 버튼에 addUser 함수 연결
c:\node\nodetest2\public\javascripts\global.js 버튼을 클릭하면 addUser 함수가 실행됨 // Username link click $('#userList table tbody').on('click', 'td a.linkshowuser', showUserInfo); // Add User button click $('#btnAddUser').on('click', addUser);

63 5.6 사용자 추가 기능 구현 addUser 함수 추가 기능 테스트
c:\node\nodetest2\public\javascripts\global.js 뒷부분에 다 음 addUser 함수 추가 (확대해서 볼 것) 기능 테스트 // Add User function addUser(event) { event.preventDefault(); // Super basic validation - increase errorCount variable if any fields are blank var errorCount = 0; $('#addUser input').each(function(index, val) { if($(this).val() === '') { errorCount++; } }); // Check and make sure errorCount's still at zero if(errorCount === 0) { // If it is, compile all user info into one object var newUser = { 'username': $('#addUser fieldset input#inputUserName').val(), ' ': $('#addUser fieldset input#inputUser ').val(), 'fullname': $('#addUser fieldset input#inputUserFullname').val(), 'age': $('#addUser fieldset input#inputUserAge').val(), 'location': $('#addUser fieldset input#inputUserLocation').val(), 'gender': $('#addUser fieldset input#inputUserGender').val() } // Use AJAX to post the object to our adduser service $.ajax({ type: 'POST', data: newUser, url: '/users/adduser', dataType: 'JSON' }).done(function( response ) { // Check for successful (blank) response if (response.msg === '') { // Clear the form inputs $('#addUser fieldset input').val(''); // Update the table populateTable(); else { // If something goes wrong, alert the error message that our service returned alert('Error: ' + response.msg); // If errorCount is more than 0, error out alert('Please fill in all fields'); return false; };

64 5.7 사용자 삭제 기능 구현 user.js 파일에 /deleteuser 기능 추가
c:\node\nodetest2\routes\users.js /* * DELETE to deleteuser. */ router.delete('/deleteuser/:id', function(req, res) { var db = req.db; var userToDelete = req.params.id; db.collection('userlist').removeById(userToDelete, function(err, result) { res.send((result === 1) ? { msg: '' } : { msg:'error: ' + err }); }); module.exports = router;

65 5.7 사용자 삭제 기능 구현 global.js 파일의 delete 링크에 deleteUser 함수 연결
DOM Ready 섹션에 다음 내용을 추가 // DOM Ready ========================================== $(document).ready(function() { // Populate the user table on initial page load populateTable(); // Username link click $('#userList table tbody').on('click', 'td a.linkshowuser', showUserInfo); // Add User button click $('#btnAddUser').on('click', addUser); // Delete User link click $('#userList table tbody').on('click', 'td a.linkdeleteuser', deleteUser); });

66 5.7 사용자 삭제 기능 구현 global.js 파일의 뒷부분에 deleteUser 함수 선언 // Delete User
function deleteUser(event) { event.preventDefault(); // Pop up a confirmation dialog var confirmation = confirm('Are you sure you want to delete this user?'); // Check and make sure the user confirmed if (confirmation === true) { // If they did, do our delete $.ajax({ type: 'DELETE', url: '/users/deleteuser/' + $(this).attr('rel') }).done(function( response ) { // Check for a successful (blank) response if (response.msg === '') { } else { alert('Error: ' + response.msg); // Update the table populateTable(); }); // If they said no to the confirm, do nothing return false; };

67 5.8 완성 서버 재시작 npm start 삭제 기능 테스트 – 성공

68 6. 결론 최종 웹서비스 완성

69 참고자료 1. web-app-node-express-mongodb/