mskim Pages

1 minute read

12_Node.js 파일 Update

  • App 제작 - 글 수정 - 수정 링크 생성

localhost:3000/?id=
수정 링크는 특정한 글이 선택되었을 때 나와야 한다.

//수정 링크 update 생성
${list}
<a href="/create">create</a> <a href="/update">update</a>
${body}

templateHTML에서 <a href="/update">update</a> 태그를 ${control} 표현식으로 수정한다.

//control 변수 추가
function templateHTML(title, list, body, control){
...
${control}
...
}

홈과 create 페이지에서는 update 태그가 나오지 않고, id 값을 클릭한 페이지에 update a태그를 나타낸다.
사용자한테 UI를 최소화한다.

특정한 글을 선택하고 update를 누르면 /update로 이동한다.
update를 하려면, 어떤 것을 업데이트 하는 지에 대한 정보가 필요하다

어떤 것을 수정할 지에 대한 정보를 쿼리 스트링을 통해서 전달하기.

`<a href="/create">create</a> <a href="/update">update</a>`를
`<a href="/create">create</a> <a href="/update?=${title}">update</a>` 로 수정

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

업데이트를 클릭했을 때 보여지는 화면 만들기

Form에서 수정할 정보가 보여지는 read 기능이 필요하다.
특정 글을 읽어오는 부분(id값이 있는 경우의 처리)이 필요하다.

//추가
else if (pathname === '/update') {

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

UI를 표시하는 부분<h2>${title}</h2>${description}, 을 Form으로 바꾸기

<form action="http://localhost:3000/create_process" method="POST">
    <p><input type="text" name="title" placeholder="title"></p>
    <textarea name="description" placeholder="description"></textarea><p>
    <input type="submit">
</form>

form submit 했을 때 보내지는 정보를 어디로 action 할 것인지 수정하기

action="http://localhost:3000/update_process"
action 수정 action="/update_process"

HTML의 input 태그는 value라는 속성이 있다. value=”${title}” 기본값이 들어옴

submit해서 수정한 파일 정보를 전송할 때 어떤 파일을 수정하는 것인지 알 수 있어야 한다.
title을 전송한 정보를 바탕으로 하면 문제가 생긴다. title을 수정하면 파일을 찾을 수 없게 된다.
사용자가 수정하는 정보를 식별해야한다.

<input type="text" name="id" value="${title}"> 추가한다
input type="hidden" 으로 수정하면 수정할 파일의 이름을 받는다.

App 제작 - 글 수정 - 파일명 변경, 내용 저장

update_process 받는 코드를 작성한다. post 방식으로 들어온 데이터를 받아야한다.

create_process의 코드를 복사하고, 받아올 id값을 추가한다.

var id=post.id;

var post = qs.parse(body);
console.log(post); 로 찍어보면
{
0|main   |   id: 'JavaScript',
0|main   |   title: 'uuuu',
0|main   |   description:
0|main   |    'JavaScript ....' } //값을 확인 할 수 있다.
  • 사용자가 파일의 제목을 변경했을 경우

nodejs file rename 구글링

syntax - Asynchronous
fs.rename(oldPath, newPath, callback)

fs.rename(`../nodejs1/data/${id}`, `../nodejs1/data/${title}`, function(err){

})

`수정하고자 하는 예전 파일 이름의 id값`, `새 파일은 데이터에 있는 title로 이름 바꾸기`, function(err){}

작업이 끝난 뒤에는 __callback function__을 실행하기.

파일의 제목을 바꾸고 submit하면 파일명이 바뀐 것을 확인 할 수 있다.

  • 파일의 내용을 바꾸기

기존의 코드 재활용

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

내용 재검토 해보기 fs.writeFile

  1. 파일의 이름을 수정한다음, ../nodejs1/data/${title}
  2. 수정된 파일 이름에 해당되는 것에 받은 description 정보를 주고
  3. 그 id값으로 들어간다 response.writeHead(302, {Location : /?id=${title}});

파일 제목, 내용 수정 완료

You May Also Enjoy