node.js 입문 #13

파일생성과 redirection

특정 dir에 파일 생성하는 법

post방식으로 전송된 data를 data directory 안에 파일로 저장하기

fs.writeFile(file,data[,options],callback)

• file : data/${title}, data directory안에 title 컨트롤에 입력한 이름을 파일명으로 생성
• data : description , 사용자가 description 컨트롤에 입력한 내용을 사용
• callback : data directory 안에 파일을 생성/쓰기 한 이후에 호출할 함수를 작성해야 한다.

request.on('end', function(){
  var post = qs.parse(body);
  var title = post.title;
  var description = post.description;
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
    //...
  })
});

---

사용자가 자신이 직접 입력하여 추가한 파일을 확인할 수 있도록 입력한 내용을 보여주는 페이지로 곧장 이동되어야 한다.

그러기 위해서 /?id=...와 같이 url의 QueryString가 id=파일명인 경로로 이동해야 한다. 이때 필요한 기능이 Redirection이다

Redirection

response.writeHead(코드, {Location: 경로});
response.end();

• 코드 302 : 페이지를 다른 페이지로 redirection 시키라는 의미
• {Location : 경로} : redirection 시키고자 하는 경로를 지정한다.
  현재 내가 이동해야 하는 경로는 ?id=${title}이다.

생성한 파일의 내용을 확인할 수 있는 페이지로 이동하는 것은, 파일을 생성/쓰기한 직후에 실행되어야하는 일이므로 fs.writeFile의 callback에 해당 코드를 구현해야 한다.

request.on('end', function(){
  var post = qs.parse(body);
  var title = post.title;
  var description = post.description;
  
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
    //주목
    response.writeHead(302, {Location: `/?id=${title}`});
    response.end();
  })
});

---

결과적으로 구현된 애플리케이션의 기능 :

1. 홈화면에서 create 버튼을 클릭하면 사용자가 글 제목/내용을 입력할 수 있는 UI가 나타남
2. 사용자가 제목과 내용을 입력하고 submit 버튼을 클릭하면
   • data directory에 유저가 입력한 제목을 파일명으로 하는 파일이 생성되고,
   • 웹페이지 상단에 나타나는 파일 목록에도 항목이 추가되며,
   • submit 클릭과 동시에 해당 파일의 제목,내용을 보여주는 페이지로 이동한다 (QueryString이 ?id=${title}인 경로)