[Developer] [node.js] 8. 글 수정하기 기능 만들기 1) 링크생성 2) 전송

출처; 생활코딩의 Node.js의 강의 내용 / 이고잉 강사님 감사드립니다 (꾸벅)

node.js는 컨텐츠의 읽기, 쓰기, 수정, 삭제를 웹을 통해서 가능하게 해준다고 하였다. 이 포스팅에서는 특정 컨텐츠를 수정하는 방법에 대해서 node.js가 어떻게 처리하는지에 대해서 다루고자 한다. 사용자는 특정 페이지에서 수정하기 버튼을 통해서 컨텐츠를 수정할 수 있다. 즉, 나무위키는 [편집] 버튼을 통해서 내용을 수정하는 것과 같다.

 

1) 수정버튼(e.g. update, 편집)은 유저들이 참여하여 페이지를 수정할 수 있는 곳에만 나타나도록 한다. 내가 작업하는 페이지에는 main페이지를 제외하고 나머지 페이지에만 수정버튼을 나타나도록 하였다. 

2) 페이지의 컨텐츠를 업데이트할 경우에 어떤 컨텐츠를 업데이트할 것인지 수정버튼을 눌렀을 때의 향하게 되는 action url 지정해주어야 한다. 코드로는 ​​ <a href="./update?id={title}> 로 표현될 수 있다. 즉, update/?id=부분에 내가 수정하고 있는 문서의 querysting정보를 넣어주는 것이다.

3) update 버튼을 누르면 update를 하고자 하는 페이지 화면으로 넘어가고 이후에는 유저가 수정할 수 있는 영역을 form형태로 보여주는 것이다. 이 form에는 물론 수정하기 전까지의 모든 컨텐츠가 임시로 들어가 있어야 한다. 이와 관련한 코드는 html의 input tag의 속성값인 value로, 원래 적혀있었던 값들을 적어주는 역할을 한다. title과 이에 해당하는 실제 값과 이에 대한 설명값은 description값을 기본값으로 설정해준다. 즉 하단의 웹페이지 부분에서 personal_tastes가 해당 웹페이지의 title에 해당하고, I want to do ... 이하의 부분은 description이기 때문에 update버튼을 클릭했을 시 이에 대한 기본 정보값이 디폴트로 수정란, 포맷에 들어갈 수 있도록 해야 한다. 

<p><input type="text" name="title" placeholder="your title" value=${title}></p>

<p><textarea name="description" placeholder="your idea">${description}</textarea>

 

4) update한 내용을 보낼 주소값을 설정해 주어야 된다. 주의해야 할 점은, 현재 수정한 title주소값으로 설정하게 되면 에러값이 뜰 수 있다. 왜냐하면 personal_tastes를 taste로 수정했을 경우, 이에 대한 주소값이 아직 설정되지 않았다. 따라서, 현재의 파일값 personal_tastes를 현 웹페이지에서 잠시 보관하고 있어야 하며, 이를 나중에 활용하게 된다. 이와 관련한 코드는 다음과 같다. 수정하기 전의 title값을 저장하되, 이를 유저에게 보여주지 않게 하는 코드는 다음과 같다. type="hidden"으로 설정해놓아야 한다. 

<input type="hidden" name="id" value=${title}>

 

5) 이 id에 저장된 값 (수정전의 title값)은 다음의 정보로 활용된다. 먼저, 내가 만드는 웹페이지의 경우 querysting과 각 웹페이지의 title값이 일치한다. 기존의 수정 전 title값을 새로운 querysting값으로 교체시키는데 사용된다. data의 하위 목록에 담긴 각각의 title값 중에서 수정할 파일 id-> 수정된 title로 바꿔주는 코드이다. 또한 그 컨텐츠는 description에 담긴 내용으로 넣어지게 된다. 이런 과정을 거쳐서 최종적으로 사용자가 update를 마친 후에 만나는 웹페이지의 querysting은 새로운 title의 이름으로 수정되어 있다. 

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