공부 저장소/Node.js

[생활코딩 Node.js] 16. 글 삭제 기능 만들기

tipsygypsy 2022. 8. 4. 20:50

이제 CRU까지 됐고 마지막 Delete. 고지가 보인다.

create, update와 마찬가지로 일단 delete 링크를 만들어줘야 하는데… 이전이랑 같은 패턴으로

<a href="/delete?id=${title}">delete</a>

이렇게 하면 될 것 같지만 안 된다. create, update 링크는 그냥 입력 페이지로 연결해 주는 기능이지만 delete링크는 누르는 것으로 실제 삭제 작업을 수행하기 때문에.. id값이 노출되는 get방식으로 만들면 보안 관련 문제가 생길 수 있다. 그래서 form을 사용해 삭제 버튼을 만들어 주기로 한다.

<form action="/delete_process" method="post">
  <input type="hidden" name="id" value="${title}">
  <input type="submit" value="delete">
</form>

create, update랑 보여지는 포맷이 좀 달라서 웹페이지가 약간 못생겨 보이는 단점이 있기는 한데 나중에 CSS 쓰면 해결되는 문제니까 일단은 신경쓰지 않는 걸로.(CSS는 언제 배우나..)

아무튼 히든으로 id를 받는 form으로 만들었으니, 이제 해당 id와 같은 이름을 가진 파일을 삭제하는 기능을 가진 delete_process 를 작성한다.

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

fs.unlink 함수가 파일의 삭제 기능을 수행한다. 삭제되고 나면 루트 페이지로 돌아가도록 콜백 함수를 처리해 주면 간단하게 완성된다. 삭제 버튼을 눌렀을 때 ‘정말 삭제하시겠습니까?’ 류의 팝업을 한 번 띄우는 게 좋을 것 같은데 나중에 찾아보고 추가해 줄 예정이다.

 

이렇게 Node.js를 이용한 CRUD 모두 섭렵 완료!!! 👏👏👏

 

전체 소스(main.js)

더보기 
var http = require('http');
var fs = require('fs');
var url = require('url'); //url모듈 사용
var qs = require('querystring');

function templateHTML(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>
  `;
}

function templateList(filelist){
  var list = '<ul>';
  var i = 0;
  while(i < filelist.length){
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`
    i = i + 1
  }
  list = list + '</ul>';
  return list;
}

var app = http.createServer(function(request,response){
  var url_add = request.url;
  var queryData = url.parse(url_add, true).query;
  var pathname = url.parse(url_add, true).pathname;

  if(pathname === '/'){
    if(queryData.id === undefined){
      fs.readdir('./data', function(error, filelist){
        var title = 'Welcome';
        var description = 'Hello, Node.js';
        var list = templateList(filelist);
        var template = templateHTML(title, list,
          `<h2>${title}</h2>${description}`,
          `<a href="/create">create</a>`);
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf-8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list,
              `<h2>${title}</h2>${description}`,
              `<a href="/create">create</a>
              <a href="/update?id=${title}">update</a>
              <form action="/delete_process" method="post">
                <input type="hidden" name="id" value="${title}">
                <input type="submit" value="delete">
              </form>
              `);
              response.writeHead(200);
              response.end(template);
            });
          });
        }
      } else if(pathname === '/create'){
        fs.readdir('./data', function(error, filelist){
          var title = 'Web - Create';
          var list = templateList(filelist);
          var template = templateHTML(title, list, `
            <form class="" action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="제목"></p>
            <p>
            <textarea name="description" rows="8" cols="60" placeholder="내용"></textarea>
            </p>
            <p>
            <input type="submit">
            </p>
            </form>
            `, '');

            response.writeHead(200);
            response.end(template);
          });
        } else if(pathname === '/create_process'){
          var body = '';
          //이벤트 시작
          request.on('data', function(data){
            //callback 함수가 실행될 때마다 body에 data 추가
            body = body + data;
          });
          request.on('end', function(){
            //정보 수신이 끝나면 end가 호출됨
            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 : `/?id=${title}`});
              response.end();
            });
          });
          //이벤트 종료
        } else if(pathname === '/update') {
          fs.readdir('./data', function(error, filelist){
            fs.readFile(`data/${queryData.id}`, 'utf-8', function(err, description){
              var title = queryData.id;
              var list = templateList(filelist);
              var template = templateHTML(title, list,
                `<form class="" action="/update_process" method="post">
                <input type="hidden" name="id" value=${title}>
                <p><input type="text" name="title" placeholder="제목" value="${title}"></p>
                <p>
                <textarea name="description" rows="8" cols="60" placeholder="내용">${description}</textarea>
                </p>
                <p>
                <input type="submit" value="수정">
                </p>
                </form>`,
                `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`);
                response.writeHead(200);
                response.end(template);
              });
            });
          } else if(pathname === '/update_process'){
            var body = '';
            request.on('data', function(data){
              body = 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(error){
                fs.writeFile(`data/${title}`, description, 'utf-8', function(err){
                  response.writeHead(302, {Location : `/?id=${title}`});
                  response.end();
                });
              });
            });
          } else if(pathname === '/delete_process'){
            var body = '';
            request.on('data', function(data){
              body = body + data;
            });
            request.on('end', function(){
              var post = qs.parse(body);
              var id = post.id;
              fs.unlink(`data/${id}`, function(error){
                response.writeHead(302, {Location : `/`});
                response.end();
              });
            });
          } else {
            // 존재하지 않는 pathname일 경우 에러처리
            response.writeHead(404);
            response.end('Not found');
          }
        });
        app.listen(5000);
저작자표시 비영리 동일조건

'공부 저장소 > Node.js' 카테고리의 다른 글

[생활코딩 Node.js+MySQL] 2. DB를 이용한 홈페이지 글목록 출력  (0) 2022.08.10
[생활코딩 Node.js+MySQL] 1. 설치 및 환경세팅  (0) 2022.08.10
[생활코딩 Node.js] 15. 글 수정 기능 만들기  (0) 2022.08.04
[생활코딩 Node.js] 14. 데이터 받아서 파일 저장하기  (0) 2022.08.04
[생활코딩 Node.js] 13. 입력 페이지 만들기  (0) 2022.08.04

'공부 저장소/Node.js'의 다른글

  • 현재글[생활코딩 Node.js] 16. 글 삭제 기능 만들기

관련글

댓글

티스토리툴바