node.js 입문 #15

글 삭제 버튼 구현

특정 글을 선택한 상태에서 delete 버튼이 나타나도록 구현해야 한다.
글을 선택했을 때 활성화되는 코드에서
HTML template에 delete 버튼을 추가해주자.
그동안 글생성, 글수정 버튼은 anchor을 사용하여 구현했었다.

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

이렇게.
하지만 delete는 위와 같이 링크로서 구현하면 안된다

글을 생성하는 페이지, 수정하는 페이지 등 어느 페이지로 이동하지 않고 그 곳에서 바로 글을 삭제할 수 있도록 구현해야 한다.
따라서 form을 통해 input의 submit 버튼을 사용하여 구현한다.

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

• action : 글 삭제 클릭 시 데이터를 전송할 웹 서버의 경로를 delete_process로 설정한다
• method : 글 수정과 같은 이유로 데이터를 get방식(querystring에 데이터가 드러나는 방식)이 아닌 POST 방식을 사용해야 한다.
• input type="hidden" : 글 수정때와 마찬가지로 현재 페이지에 해당되는, 선택된 파일이 어떤 것인지 웹서버에 함께 전송해야 하기 때문에 파일명을 default로 가지고 있는, id라는 이름의 숨겨진 input 칸을 만들어준다
• input type="submit" : input의 type을 submit으로 설정해줌으로써 웹서버로 데이터를 전송하는 버튼을 생성하고, 그 버튼의 Label을 "delete"로 설정한다.

---

글 삭제 기능 구현

현재까지 delete_process 웹서버로 삭제할 파일데이터를 전송해줄 버튼까지 구현하였다.
이젠 해당 프로세스(삭제)를 처리할 웹서버의 코드를 구현해야 한다.

글 수정용 웹서버 기능을 구현하는 코드는 다음과 같았다

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을 활용한 글 수정하는 코드
  });

• pathname : /update_process -> /delete_process
• request.on('data',~) : 웹서버로 전송된 데이터 조각을 body변수에 모으기
• request.on('end',~) : 데이터 수신이 끝난 뒤 해야할 일을 callback에 정의

💡 글 삭제 프로세스가 들어가야 하는 callback에 넣어줄 함수
: fs.unlink(path,callback)

이 함수는 file을 삭제하는 명령이다.

• path : 삭제할 파일의 경로 => data/${id}
• callback : 파일삭제를 완료하면 홈 화면으로 redirection시킨다.

//홈으로 redirection하는 코드
response.writeHead(302, {Location: `/`});
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();
    })
  });
}