수업소개
상세보기 페이지를 Express 버전으로 변환해볼 것입니다. 이 과정에서 query string을 사용하지 않는 pretty url(clean url, semantic url..)로 라우트 기능을 구현하는 방법을 살펴보겠습니다.
강의 1
Clean URL로 Route를 구현하는 방법을 소개해드립니다.
소스코드
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | var express = require('express')var app = express()var fs = require('fs');var template = require('./lib/template.js');//route, routing//app.get('/', (req, res) => res.send('Hello World!'))app.get('/', function(request, response) { fs.readdir('./data', function(error, filelist){ var title = 'Welcome'; var description = 'Hello, Node.js'; var list = template.list(filelist); var html = template.HTML(title, list, `<h2>${title}</h2>${description}`, `<a href="/create">create</a>` ); response.send(html); });});app.get('/page/:pageId', function(request, response) { response.send(request.params);});app.listen(3000, function() { console.log('Example app listening on port 3000!')}); |
강의2
상세보기 페이지를 완성해봅시다.
소스코드
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | var express = require('express')var app = express()var fs = require('fs');var path = require('path');var sanitizeHtml = require('sanitize-html');var template = require('./lib/template.js');//route, routing//app.get('/', (req, res) => res.send('Hello World!'))app.get('/', function(request, response) { fs.readdir('./data', function(error, filelist){ var title = 'Welcome'; var description = 'Hello, Node.js'; var list = template.list(filelist); var html = template.HTML(title, list, `<h2>${title}</h2>${description}`, `<a href="/create">create</a>` ); response.send(html); });});app.get('/page/:pageId', function(request, response) { fs.readdir('./data', function(error, filelist){ var filteredId = path.parse(request.params.pageId).base; fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){ var title = request.params.pageId; var sanitizedTitle = sanitizeHtml(title); var sanitizedDescription = sanitizeHtml(description, { allowedTags:['h1'] }); var list = template.list(filelist); var html = template.HTML(sanitizedTitle, list, `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`, ` <a href="/create">create</a> <a href="/update?id=${sanitizedTitle}">update</a> <form action="delete_process" method="post"> <input type="hidden" name="id" value="${sanitizedTitle}"> <input type="submit" value="delete"> </form>` ); response.send(html); }); });});app.listen(3000, function() { console.log('Example app listening on port 3000!')}); |
lib/template.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | module.exports = { HTML:function(title, list, body, control){ return ` <!doctype html> <html> <head> <title>WEB1 - ${title}</title> <meta charset="utf-8"> </head> <body> <h1><a href="/">WEB</a></h1> ${list} ${control} ${body} </body> </html> `; },list:function(filelist){ var list = '<ul>'; var i = 0; while(i < filelist.length){ list = list + `<li><a href="/page/${filelist[i]}">${filelist[i]}</a></li>`; i = i + 1; } list = list+'</ul>'; return list; }} |
