node.js 입문 #14

글 수정 기능 구현

• 홈 화면에서는 update 버튼이 보이지 않고, 본문이 있는 화면에서만 update 버튼이 보이도록 구현
• UI를 구성하는 HTML을 함수화한 templateHTML에서 글 생성/수정할 버튼을 추가할 부분도 ${control}을 통해 함수의 매개변수로 받아온다.
• 홈 화면을 구현하는 코드에서 control에 넣어줄 인자 :
  <a href="/create">create</a>
• 파일 본문을 보이는 상세 페이지를 구현하는 코드에서 control에 넣어줄 인자 :
  <a href="/create">create</a> <a href="/update">update</a>
• 파일 생성 페이지 (create 버튼 클릭) 에서는 create 버튼이 보이지 않도록 :
  (공백)

---

• 글 수정을 할 땐 어떤 글을 수정할지에 대한 정보를 QueryString을 통해 전달해야 한다.
  전 : <a href="/update">update</a>
  후 : <a href="/update?id=${title}">update</a>

---

수정할 정보 전송

글 수정 화면 UI 만들기

• 글 수정 화면으로 접속하는 경우의 조건문을 추가한다
  else if (pathname === '/update') { }
• 글 수정 화면에서는 선택한 파일을 본문이 필요하기 때문에 fs.readFile을 통해 data directory에 있는 파일 내용을 불러온다.

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,
            //html form 작성 파트,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });

• 글 수정 html을 넣어줘야하는 부분에 적합한 form을 넣어준다.
  - form은 /update_process주소의 웹서버로 전송해야 한다.

<form action="/update_process" method="post">
  <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>

• input 태그의 value 속성 : 기본값을 설정할 수 있다.

• textarea 태그의 기본 값은 <textarea></textarea> 내부에 입력할 수 있다.

• 주의 사항 : 사용자가 title을 수정할 수 있기 때문에, 사용자가 입력한 title 값을 기반으로 수정할 대상이 될 파일을 찾으면 안된다.
  -> 따라서 처음 불러온 파일 제목 (수정할 대상이 될 파일명) 과, 사용자가 입력한 파일 제목 (새로운 값) 이 둘다 별도로 웹서버로 전송되어야 한다.

• 처음 불러온 파일 제목 (수정할 대상이 될 파일명) 은 사용자가 접근할 수 없어야 하기 때문에, input 태그의 hidden type 을 통해 사용자에게 보이지는 않지만 기존 파일제목을 기본값으로 갖고 있는 input 칸을 form에 추가하여 웹서버로 함께 보낸다. (물론 name은 사용자의 입력칸인 title과 다른 이름으로 설정해야 한다 ex- id)
  <input type="hidden" name="id" value="${title}">

• 최종 form

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

---

수정된 내용 저장

• 입력한 수정사항을 전송한 웹서버인 update_process를 처리해야한다.
  else if (pathname === '/update_process')
• 웹서버에서 수신한 정보를 처리하는 로직을 create_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;
  //여기까지 데이터 수신. 
  });
});

현재까지 post에 담기는 수신 데이터 형태

{ id : '수정할 대상 파일',
  title : '수정한 파일명',
  description : '수정한 본문' }

앞으로 해야할 일은

• 파일명 수정사항을 반영해야 한다
  fs.rename(oldPath, newPath, callback)
• oldPath : data/${id}
• newPath : data/${title}
• callback : 파일명을 바꾼 뒤에 본문 내용도 바꾸면 된다.
• 본문 수정사항 반영하는 방법 : 파일에 내용 새로 쓰기
  fs.wrtieFile(파일경로, 본문내용, 'utf8', callback)
• 파일 경로 : 파일명이 수정된 이후에 실행되는 함수이기 때문에 data/${title}
• 본문내용 : description
• callback : 수정한 내용이 확인될 수 있도록 보여주는 페이지로 Redirection

response.writeHead(302, {Location: `/?id=${title}`});
response.end();

최종적으로 update_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(`data/${id}`, `data/${title}`, function(error){
      fs.writeFile(`data/${title}`, description, 'utf8', function(err){
        response.writeHead(302, {Location: `/?id=${title}`});
        response.end();
      })
    });
  });
}