Node.js

App - 파일생성과 리다이렉션

수업소개

전송된 POST 데이터를 받아서 파일에 저장하고, 그 결과 페이지로 리다이렉션하는 방법에 대해서 알아보겠습니다. 

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');

function templateHTML(title, list, body){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    <a href="/create">create</a>
    ${body}
  </body>
  </html>
  `;
}
function templateList(filelist){
  var list = '<ul>';
  var i = 0;
  while(i < filelist.length){
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i = i + 1;
  }
  list = list+'</ul>';
  return list;
}

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readdir('./data', function(error, filelist){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var list = templateList(filelist);
          var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
          response.writeHead(200);
          response.end(template);
        });
      } else {
        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, `<h2>${title}</h2>${description}`);
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="http://localhost:3000/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `);
        response.writeHead(200);
        response.end(template);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      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();
          })
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
  1. labis98
    20210726 good!!!
  2. 이응종이
    2021.07.25 - 파일생성과 리다이렉션까지 완료
  3. Duke
    2021.07.18
  4. 러브머신
    잘봤습니다. 도움이 됐어요 ㅎㅎ
  5. aminora
    게시판 글쓰기 기초 베이스 완성
  6. Jeong Il Haan
    20210421
  7. byoonn
    완료
  8. 21.02.27
  9. chimhyangmoo
    21.02.23
  10. 마아앙
    2021.02.09
  11. jeisyoon
    2021.02.09 App - 파일 생성과 리다이렉션 완료
  12. 뭄수
    완료
  13. ohhigo
    21/1/24
  14. 2021.01.05 완료!
  15. 손민철
    20/12/31 완료
  16. 생활둘기
    2020 12 26
  17. kkn1125
    20.12.22 완료~!
  18. 나무
    디렉토리 안에 파일이 안생기는건 어떻게 해야 할까요...
  19. 옹옹
    재밌습니다!
  20. 감자
    영호님 말씀대로 var post = qs.parse(body); 위에 var qs = require("querystring"); 선언하니까 바로 작동 됩니다ㅠㅠ 감사합니다
    대화보기
    • 콜라
      20201015 완료
    • 이영재
      한글로 파일 생성하면 에러 나오시는분들 이렇게 바꿔보세요

      response.writeHead(302, {Location: `/?id=${title}`});
      ⬇⬇⬇
      response.writeHead(302, {Location: `/?id=${qs.escape(title)}`});
    • Yong Hyun Lee
      완료 201002
    • 코딩하는렌즈쟁이
      2020-07-28 (화)
      완료!
    • Jenny Song
      28th.JULY.2020 완료
    • 코딩중독
      혹시 data/ 이거 할때 data 디렉토리에 파일 안생기시는 분은 ../data/ 이렇게 쓰셔야 합니다.
    • 암말
      오호 그렇군요 좋은 답변 감사합니다!
      대화보기
      • 영호팍
        한달 전이여서 지금은 아실 수도 있는데 밑에 있는 사람의 글을 읽고 알게 되었습니다. 좀 밑에 있는 사람분의 말을 인용하자면
        var qs = require("querystring"); 입력해서 querystring 모듈을 이용해야합니다. 그 후에 fs모듈을 이용하는 코드들에서  fs.readdir("./data", "utf8", (err, filelist)같은 코드들은 이런 식으로 utf8을 껴야합니다. 그래야 오류가 안뜨고 querystring에 한글을 붙일수가 있습니다!!! 도움이 됐는지 모르겠네요 ㅋㅋㅋㅋㅋ 다른 사람들도 이글을 봤으면 좋겠어요. 다들 즐거운 코딩하기를~~
        대화보기
        • 영호팍
          완료! 항상 정적인 것만 만들다가 이렇게 유용한 걸 배우니 복습 해봐야겠네요
        • Amousk
          좋은 강의 감사합니다.
        • Katherine Roh
          완료 :)
        • 제피
          fs.readdir에 utf8을 설정해도 물음표같은 특수문자를 넣었을 때 작동이 안되네요..
        • 김재익
          완료
        • 김보미
          완료
        • 바다의왕자
          완료
        • 암말
          한글로 치니까 저장은 되는데 제출하고 오류가 나네요. 한글로 쳐도 오류가 안날려면 어떻게 해야하나요?
        • 암말
          코딩시작한지 몇 달만에 드디어 글쓰고 파일 저장하는걸 배웠네요 ㅋㅋㅋ 이제야 진짜 코딩을 배운 것 같아서 기분이 좋습니다
        • 윤영훈
          이 부분은 우선 통으로 이해하고 넘어가야 할 것 같아요ㅜㅜ
          대화보기
          • 코딩꿈나뮤
            create_process부분 진짜 너무 어렵네요 ㅠㅅㅠ 도움 도움 도움 !ㅅ!
            1.form형식으로 전송된 데이터(이벤트)를 받는다? => on()
            2. buffer에 담긴 데이터(외계어)를 객체화시킨다 => body
            3. request.on('end', function() 끙... ;ㅅ;
            4. 객체화된 친구를 문자화 시킨당 => qs.parse()
            5. 문자화 된 데이터를 분할하여 writeFile()의 인자로 쓴다
            var body = '';
            request.on('data', function(data){
            body = body + data;
            });
            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();
            })
          • 윤영훈
            만세!
          • 준바이
            감사합니다
          • 03.11 완료
          • eddylee123456
            복습
          • 임효석
            ㅉㅇ이다11
          • eddylee123456
            완료
          • river9028
            리다이렉트가 크롬에서는 안되다가 파이어폭스로 하니깐 되네요. 이유가 뭘까요?
          • 스티븐잡숴
            완료
          • 임은정
            완료
          • 살길바라냐
            저는 리다이렉트가 안되네요
            대화보기
            • ttos
              아래 코드를 pm2에서 실행했을경우, 이고잉님이 pm2에서 설명하였듯 파일만들기할때 프로세스를 재시작 시켜버리기때문에 마치 create_process에서 실행이 안되는것처럼 보이지만 실제로는 파일은 다 만들어지고 있습니다.
              다만 pm2 가 프로세스를 재시작하여 reload가 안되었을 뿐입니다. 이문제 해결은 이미 이고잉님이 pm2 에서 설명하셨으며, pm2 로 실행하시는 분은 다음과 같이 프로세스를 실행하시면 됩니다.

              pm2 start yourwebserver.js --watch --ignore-watch="data/*" --no-daemon

              그럼 파일생성시 재시작없이 계속 진행됩니다.
            graphittie 자세히 보기