[Node.js] 13. 데이터 처리 (수정,삭제)

데이터 처리

지금 까지 입력 데이터를 파일로 만들거나 경로를 재설정하는 등을 했다면, 이번에는 이 데이터들을 수정,

삭제하는 기능을 추가할 것 입니다.

---

코드 이해

/update

이전 create와 유사하게 링크를 만든 후 수정할 정보에 대한 입력이 완료되면 update_process 라는 페이지로 넘어가게 만들었습니다.

    <a href="/update?id=${title}">update</a>
    
    
    
    } else if(pathname === '/update'){
      fs.readdir('./data', function(error, filelist){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = templateList(filelist);
          var template = templateHTML(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?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    }

 

주의할 점

생성 때와는 다르게 title과 id가 분리돼 있는걸 볼 수 있습니다. 생성의 경우 지정한 타이틀을 id로 만들면 끝이지만,

수정의 경우엔 기존의 이름(id)과 바뀔 이름(title)이 따로 존재해야 함으로 따로 호출했습니다.

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

기존의 test 파일,  입력 title next_title

 

 

/update_process

/update로 부터 form으로 전송 받은 데이터에 따라 원본 파일을 수정할 수 있습니다.

    } 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, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
            })
          });
      });
    }

 

이름 재설정, 내용 덮어쓰기

기존의 텍스트 파일 이름(id)를 입력받은 이름(title)로 이름 재설정한 후

그 파일의 내용을 입력받아 수정된 내용(description)을 통해 덮어 씁니다.

fs.rename(`data/${id}`, `data/${title}`, function(error){
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
  response.writeHead(302, {Location: `/?id=${title}`});
  response.end();
 })
});

---

코드 이해

templateHTML

삭제의 경우 생성, 수정과는 상황이 다릅니다. 앞의 2개의 경우 링크를 달아 페이지를 이동하는 식으로 하면 되지만,

삭제는 버튼 이벤트에 따라 바로 데이터를 내보내야 하기 때문에 링크가 아닌 form을 통해 삭제할 데이터를 보냅니다.

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>`
);

 

/delete_process

삭제 버튼 이벤트로 데이터가 form의 형식으로 왔을 때 데이터를 삭제 할 수 있습니다.

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

 

링크 해제

삭제 명령을 받은 데이터(id)의 링크를 해제한 후 메인페이지로 돌아오게 하는 것으로 삭제 기능을 구현 할 수 있습니다.

fs.unlink(`data/${id}`, function(error){
response.writeHead(302, {Location: `/`});
response.end();
})