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. 일억개
    굿뜨다 굿뜨
    대화보기
    • BlitzcrankNautilusSeraphine
      지금까지 템플릿 리터럴을 ''로 쓰고있엇네요 ㅋㅋㅋ
    • 개발자를꿈을꾸는
      var body = '';
      request.on('data', function(data){
      body = body + data;
      });

      request.on('end', function(){
      var post = qs.parse(body);
      //console.log(post);
      var title = post.title;
      var description = post.descrption

      //error 발생 부분
      fs.writeFile(`data/${title}` , description , 'utf-8' , function(err){
      response.writeHead(200);
      response.end('success');
      })
      });

      error 발생 되는 부분을 위에 코딩으로 해도 error가 발생하네요.....
      정말 좋은 강의로 잘 따라가고 있습니다. 이제와서 강의 감사하다는 글 남기네요....

      node.js 버전 : v16.13.0 최신버전은 안되서, 예전 버전으로 진행했어요... 예전 버전은 잘 됩니다.
    • 21.10.11
    • 졸작완성하자
      21.10.08 완료
    • 20단국
      2021/09/29 완료
    • illiiiiii
      이게 제가 fs.writeFile을 쓸 때 기존 data 폴더 말고 새로운 폴더를 만들어서 그곳으로 위치를 지정해서 그런 것 같은데, 그러면 description 부분이 undefined로 뜹니다. description도 제대로 뜨게 하려면 어떻게 해야 할까요..?
      대화보기
      • illiiiiii
        한글 영어 상관 없이 리다이렉션 하면 title은 제대로 뜨는데 description은 undefined라고 뜨네요. 파일생성까지는 제대로 되는데 undefined가 왜 뜨는 걸까요?
      • 한글 URL 인코딩에 querystring은 이제 지양해야하니 다른 방식을 적어둡니다.

        response.writeHead(302, {location: encodeURI(`/?id=${title}`)} );
        대화보기
        • 승뇽뇽
          웬료
        • 에러났는데 한글입력은 따로 처리 과정이 필요했군요.... 이영재님 남겨주신 댓글 덕분에 해결했습니다 감사합니다!
          대화보기
          • labis98
            20210726 good!!!
          • 이응종이
            2021.07.25 - 파일생성과 리다이렉션까지 완료
          • 2021.07.18
          • 러브머신
            잘봤습니다. 도움이 됐어요 ㅎㅎ
          • aminora
            게시판 글쓰기 기초 베이스 완성
          • Jeong Il Haan
            20210421
          • byoonn
            완료
          • 21.02.27
          • chimhyangmoo
            21.02.23
          • 마아앙
            2021.02.09
          • jeisyoon
            2021.02.09 App - 파일 생성과 리다이렉션 완료
          • 뭄수
            완료
          • ohhigo
            21/1/24
          • 2021.01.05 완료!
          • 손민철
            20/12/31 완료
          • 생활둘기
            2020 12 26
          • kkn1125
            20.12.22 완료~!
          • 나무
            디렉토리 안에 파일이 안생기는건 어떻게 해야 할까요...
          • 옹옹
            재밌습니다!
          • 감자
            영호님 말씀대로 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();
                    })
                  graphittie 자세히 보기