[생활코딩]WEB2-Node.js (7)(2020.12.22)

본 내용은 해당 강의 토대로 작성

App - 글수정 - 수정 링크 생성

이제, 사용자가 수정을 할 수 있도록 update 기능을 추가한다. 전체 템플릿의 틀을 바꾸고 주소에 따른 템플릿 또한 그에 맞게 변경한다. 홈에 있을 때는 update기능을 넣지 않는다.

함수 templateHTML 에 control 인자를 넣는다.

function templateHTML(title, list, body, control){
  .
  .
  ${control}

사용자가 홈 / 에 있을 경우의 템플릿을 수정한다.

 var template = templateHTML(title, list,
             `<h2>${title}</h2>${description}`,
             `<a href="/create">create</a>`
           );

사용자가 리스트의 페이지에 있을 경우의 템플릿을 수정한다.

var template = templateHTML(title, list,
               `<h2>${title}</h2>${description}`,
               `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
             );

App - 글수정 - 수정할 정보 전송

이제 pathname === '/update' 일때, 화면을 출력할 수 있도록하고 HTML-form을 사용하여, 서버로 수정할 정보를 전송하게 한다.

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

<input type="hidden" name="id" value="${title}"> : type에 hidden 속성을 부여하면, 보이지 않는 박스가 생성된다. 사용자가 변경하면 id 도 변경되지 않게 유지하기 위함이다.

각 컨트롤의 기본값들은 해당 id 의 tilte 과 description 을 넣도록한다.

App - 글수정 - 수정된 내용 저장

전송된 수정 내용을 받아서 파일명과 내용에 저장한 뒤, 수정이 완료된 페이지를 사용자에게 출력한다.

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

pathname === '/update_process' 로 이동되면, request.on 에 의해서 콜백함수가 실행된다. 그리고 전송받은 data 를 변수 body 에 넣게 된다. 전송이 끝나면, qs.parse(body) 에 의해서 받은 data 가 post 에 들어오고 id,title,description 에 내용들이 채워진다.

fs.rename() 에 의해서, id (옛 이름)가 title (새로운 이름)으로 바뀌게 된다. 이어서, 콜백 함수 fs.writeFile 이 실행된다. 이 함수는 새로운 이름의 파일로 들어가서 description 을 utf8 형식으로 작성 한다. fucntion(error) 가 실행되고 사용자는 자신이 변경한 파일의 페이지로 바로 이동된다. 아래의 스크린샷에 이 event의 과정들을 요약했다.

수정 내용 입력	파일 적용	수정된 페이지

App - 글삭제 - 삭제버튼 구현

수정 버튼 옆에 컨텐츠를 삭제하는 버튼을 만든다.

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

삭제 기능은 get방식이 아니라, post 방식으로 한다. 왜냐하면, 링크를 생성하면 무분별하게 누구나 컨텐츠를 삭제할 수 있기 때문이다. HTML-form을 생성하여 post 속성을 부여하고 hidden 박스와 submit 버튼을 생성한다.

App - 글삭제 기능 완성

HTML-form에 의해서, 삭제 버튼을 클릭시 pathname === '/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 에 의해서 data/${id} 가 삭제된다. 이어서 콜백 함수가 실행되어, 사용자를 홈으로 리다이렉트 한다.

느낀점

Nodej.js를 사용해서 CRUD 중 Update와 Delete 기능을 추가했다. 내가 평소에 대수롭지 않게 사용했던 웹의 기능들이 이렇게 많은 시간이 들어가는 것인 줄 몰랐다. 웹 개발자분들께 경의를…

이렇게 웹 애플리케이션 기능을 다 만들어보고 복습도 두번 세번 하면서, 처음에 이해가 잘 안되거나 와닿지 않았던 것들도 자연스럽게 습득이 되었다. 학창시절, 대학시절에 복습의 중요성을 알았어야 했다…