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. 콜라
    20201015 완료
  2. 이영재
    한글로 파일 생성하면 에러 나오시는분들 이렇게 바꿔보세요

    response.writeHead(302, {Location: `/?id=${title}`});
    ⬇⬇⬇
    response.writeHead(302, {Location: `/?id=${qs.escape(title)}`});
  3. Yong Hyun Lee
    완료 201002
  4. 코딩하는렌즈쟁이
    2020-07-28 (화)
    완료!
  5. Jenny Song
    28th.JULY.2020 완료
  6. 코딩중독
    혹시 data/ 이거 할때 data 디렉토리에 파일 안생기시는 분은 ../data/ 이렇게 쓰셔야 합니다.
  7. 암말
    오호 그렇군요 좋은 답변 감사합니다!
    대화보기
    • 영호팍
      한달 전이여서 지금은 아실 수도 있는데 밑에 있는 사람의 글을 읽고 알게 되었습니다. 좀 밑에 있는 사람분의 말을 인용하자면
      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
          리다이렉트가 크롬에서는 안되다가 파이어폭스로 하니깐 되네요. 이유가 뭘까요?
        • 스티븐잡숴
          완료
        • 임은정
          완료
        • 살길바라냐
          저는 리다이렉트가 안되네요
          대화보기
          • 아래 코드를 pm2에서 실행했을경우, 이고잉님이 pm2에서 설명하였듯 파일만들기할때 프로세스를 재시작 시켜버리기때문에 마치 create_process에서 실행이 안되는것처럼 보이지만 실제로는 파일은 다 만들어지고 있습니다.
            다만 pm2 가 프로세스를 재시작하여 reload가 안되었을 뿐입니다. 이문제 해결은 이미 이고잉님이 pm2 에서 설명하셨으며, pm2 로 실행하시는 분은 다음과 같이 프로세스를 실행하시면 됩니다.

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

            그럼 파일생성시 재시작없이 계속 진행됩니다.
          • 이고잉님 감사합니다.
          • codinginpain
            완료했읍니다!!
          • 쑤우
            수강완료. 감사합니다~
          • 굼벵이
            완료
          • 시계의온도
            한글이 문제라는 생각도 못했는데!! ㅠㅠ 감사합니다. 고쳤더니 잘되네요
            대화보기
            • CronEB
              와 감사합니다.
            • YesterdayKite
              완료. 감사합니다!
            • youngjin.lee
              completed
            • 임정섭
              코드 그대로 복붙해도 동작 안하는 분들은
              pm2 restart main.js 해보세요~
            • 허공
              190510 감사합니다.
            • 이루
              완료
            • 고태동
              이문제 가지신분들!
              저도 지금 막배우는 뉴비라 군더더기 없는 정확한 정답인지 모르겠지만
              한시간 검색해서 해결했습니다.
              40번째 줄을 fs.readdir('./data','utf-8', function(error, filelist){ 로 바꾸시고
              93번쨰 줄을 response.writeHead(302, {Location: `/?id=${qs.escape(title)}`}); 로 바꾸면
              한글을 입력해도 리다이렉션 잘되고 글자 꺠짐없이 리스트에 링크 추가되네요
              대화보기
              • 위준우
                완료
              • 자유로움
                완료
              • supernet
                감사합니다.
              • 지미츄
                감사합니다
              • 호두
                고맙습니다.
              • 권문수
                감사합니다 ㄸ 정말 유용하고 좋은 강의 였습니다
                이렇게 깊게 파고들어가니 좀 더 재미있어지네요 ㄸㄷ
              • 나마코엘
                재미있음.
              • popinbompin
                대박이네요
              graphittie 자세히 보기