[생활코딩] Node.js 강의 10일차 (Web3-Express)

Hello world - Express 기본 골격 만들기

강의 준비

기초 node.js 강의 를 마치고 express 강의를 이어듣고 있다.

예전에 express를 살짝 써본적이 있어 설치 과정은 생략하고 버전확인만 해줬다. 

expree 버전 확인 : npm show express version 

(다른 패키지들도 마찬가지로 npm show {패키지명} version 을 입력하면 버전 확인이 가능하다)

 

잘 설치되고 작동되는 것을 아래 코드로 확인해줬다.

const express = require('express')
const app = express()
 
app.get('/', (req, res) => res.send('Hello World!'))
 
app.listen(3000, () => console.log('Example app listening on port 3000!'))

강의 내용

get 메서드는 라우팅 역할을 해준다.

라우팅은 쉬운 말로 갈림길에서 적당한 방향을 잡아주는 것이다. 사용자가 특정한 url을 요청하면 그에 맞는 페이지를 내보낸다. 

이전 Web2 node.js 강의에서는 라우팅을 이런식으로 if(pathname ==='/') 해줬다. 그런데 if문으로 해주게되면 코드가 늘어나면서 계속 복잡해지고 코드가 길어지는 문제점이 있다. 이 방식을 쓰면  app.get('/', function(req, res){return res.send('/');});  우리는 if문을 이용해 라우팅해주는 것보다 훨씬 가독성 좋은 코드를 작성할 수 있게 된다. 

 

---

홈페이지 구현

강의 내용

Web2 node.js 강의에서 작성한 코드는

var app = http.createServer(function(request,response){});안에 130여줄의 코드가 들어있었다. 정의된 부분과 사용한 부분의 거리가 너무 멀다. 반면 아래의 코드는 훨씬 간결해진것을 확인할 수 있다. 

var express = require('express')
var app = express()
var fs = require('fs');
var template = require('./lib/template.js');

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', function(req, res){
  return res.send('/page');
});

app.listen(3000, function(){
  console.log('Example app listening on port 3000!')
});

---

 

 

상세페이지구현 1 - Route Parameter

강의 내용

강의 목표 : express로 url path를 통해 parameter를 전달할때 처리하는 방식을 배워보자

 

Web2 Node.js 강의에서는 url 주소에서 parameter를 QueryString 으로 넘겨줬다.

최근에는 Route parameter 로 많이 처리한다고 하니 Web3  express 강의에서는 이 방식으로 parameter를 넘기는 코드를 작성했다.

 

Route Parameter 예시

/*
Route path: /users/:userId/books/:bookId
Requests URL : https://localhost:3000/users/34/books/8989
req.params : {"userId":"34","bookId":"8989"}
*/

app.get('/users/:userId/books/:bookId',function(request,response){
		response.send(request.params)});

main.js 

사용자가 접속했을 때 그 어떤 값을 pageId라고 하자. 그럼 다음과 같은 코드를 작성할 수 있다.

//밑의 왼쪽 결과
app.get('/page/:pageId', function(request, response){
  return response.send(request.params);
});

//밑의 오른쪽 결과
app.get('/page/:pageId/:chapterId', function(request, response){
  return response.send(request.params);
});

route parameter 적용 결과

---

상세페이지 구현 2

강의내용

• Web2 Node.js에서 쿼리스트링 방식으로 가져왔던 값 filteredID를, request.params.pageId로 받아온다.
• 쿼리스트링 방식으로 저장해 목록으로 출력해줬던 fileList를 url path 방식으로 바꾼다. 

main.js

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;
      /*생략*/
      response.send(html); });
      });
   });

lib/template.js

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;
    }

 

강의코드

//main.js

var express = require('express')
var app = express()
var fs = require('fs');
var path = require('path');
var sanitizeHtml =require('sanitize-html');
const { request } = require('http');
var template = require('./lib/template.js');

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(title,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

var template = {
    html: function(title,list,body,control){
      return ` 
      <!doctype html>
      <html>
      <head>
        <title>WEB- ${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>`
        // list = list +`<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`
        i = i+1;
      }
      list = list + `</ul>`;
      return list;
    }
  }

  module.exports = template;