[Node.js] Express의 hello world, Route Parameter, 홈페이지 구현, 페이지 생성, 수정, 삭제 기능 구현

Node.js에서 http 모듈만으로 웹 서버를 구성하게 된다면 사실 많은 것들을 직접 만들어야하고 번거로워진다.

Node.js의 프레임워크 중 Express를 사용한다면 보다 편리하고 간편하게 웹서버를 구축할 수 있다.

 

Express 프레임워크에 대한 자세한 내용은 공식 홈페이지에서 확인 가능

https://expressjs.com/

Express - Node.js web application framework

 

Express부터는 VSCode 에디터를 사용

 

1. Express 설치

Terminal에 npm install express --save 로 설치

 

 

 

2. Express - Hello World

 

var express = require('express');
var app = express()

// app.get('/', {req, res} => res.send('Hello World!'))
app.get('/', function(req,res){
	return res.send('Hello World!');
});



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

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

 

http 모듈을 사용할 때에는 pathname을 통해서 routing 하는 방식이었다면 express를 통해서는 app.get에서 경로를 설정해서 페이지를 이동하는 방식.

이 방식은 보다 깔끔하고 가독성이 좋은 코드로 만들어 줌

 

 

 

3. Route Parameter

 

app.get('/page/:pageid', function(request, response){
   response.send(request.params);
});

여기서 html이라는 pageid를 가지고 data/html을 페이지에 띄우는 것을 구현하면, 

app.get('/page/:pageid', function(request, response){
  fs.readdir('./data', function(err, 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><p>${sanitizedDescription}</p>`,
      `<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);
    });
  });
});

request.params로 객체 형식의 데이터를 가져오고 이를 활용 할 수 있다. 

 

4. http 모듈로 짰던 코드를 express 형식으로 바꿔 구현

 

var express = require('express');
var app = express()
var fs = require('fs');
var template = require('../lib/template.js');
var qs = require('querystring');
var path = require('path');
var sanitizeHtml = require('sanitize-html');


app.get('/', function(request,response){
  fs.readdir('./data', function(err, filelist){
    var title = 'Welcome';
    var description = 'Hello, Node.js';
    var list = template.list(filelist);
    var html = template.HTML(title, list,
      `<h2>${title}</h2><p>${description}</p>`,
    `<a href="/create">create</a>`,'');
    response.send(html);
  });
});

app.get('/page/:pageid', function(request, response){
  fs.readdir('./data', function(err, 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><p>${sanitizedDescription}</p>`,
      `<a href="/create">create</a>  <a href="/update/${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.get('/create', function(request,response){
  fs.readdir('./data', function(err, filelist){
    var title = 'Web- create';
    var list = template.list(filelist);
    var html = template.HTML(title, list, `
      <form action="/create_process" method="post">
        <p><input type="text" name="title" placeholder="title"></p>
        <p>
          <textarea name="description" placeholder="description"></textarea>
        </p>
        <p>
          <input type="submit">
        </p>
      </form>
    `,'');
    response.send(html);
  });
});

app.post('/create_process', function(request, response){
  var body = '';
  request.on('data',function(data){
    body += data;
  });
  request.on('end',function(){
    var post = qs.parse(body);
    var title = post.title;
    var description = post.description;
    
    fs.writeFile(`data/${title}`,description,'utf-8',function(err){
      response.writeHead(302,
      {Location: `/`});
      response.end();
    });
  });
});

app.get('/update/:pageid', function(request, response){
  fs.readdir('./data', function(err, filelist){
    var filteredId = path.parse(request.params.pageid).base;
    fs.readFile(`./data/${filteredId}`,'utf-8', function(err, description){
      var title = request.params.pageid;
      var list = template.list(filelist);
      var html = template.HTML(title, list,`
      <form action="/update_process" method="post">
        <input type="hidden" name="id" value="${title}">
        <p><input type="text" name="title" placeholder="title" value="${title}"></p>
        <p>
          <textarea name="description" placeholder="description">${description}</textarea>
        </p>
        <p>
          <input type="submit">
        </p>
      </form>
    `,`<a href="/create">create</a> <a href="/update/${title}">update</a>`);
    response.send(html);
    });
  });
});
app.post('/update_process', function(request, response){
  var body = '';
  request.on('data', function(data){
    body += data;
  });
  
  request.on('end',function(){
    var post = qs.parse(body);
    var id = post.id;
    var title = post.title;
    var description = post.description;
    fs.rename(`data/${id}`,`data/${title}`,function(err){
      fs.writeFile(`data/${title}`,description,'utf-8', function(err){
        response.writeHead(302,
          {Location: `/page/${title}`});
          response.end();
      });
    });
  });
});

app.post('/delete_process', function(request, response){
  var body = '';
  request.on('data',function(data){
    body += data;
  });
  request.on('end', function(){
    var post = qs.parse(body);
    var id = post.id;  
    fs.unlink(`./data/${id}`, function(err){
      response.writeHead(302,{Location: `/`});
      response.end();
    });

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

});

 

참조한 생활코딩 URL :

https://opentutorials.org/module/3590/21387

https://opentutorials.org/module/3590/21388

https://opentutorials.org/module/3590/21389

https://opentutorials.org/module/3590/21391

https://opentutorials.org/module/3590/21392

https://opentutorials.org/module/3590/21394