생활코딩

Coding Everybody

코스 전체목록

닫기

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. 김철흥
    2024.01.12
    완료!
  2. Hoon Ko
    20231017
  3. BF_Lee
    23.07.04

    리다이렉션 사용하고싶으면
    1. fs.writeFile을 사용하여 데이터를 파일로 저장
    2. response.writeHead(302)을 사용
  4. 어흥
    230702
  5. Hojun Song
    2023-04-15
  6. Nayeong Koo
    23.03.18

    앞에서 받은 데이터로 파일을 만들어서 data 폴더 안에 넣기

    fs.writefile를 이용한다.
  7. 감자
    22.12.04 완료
  8. 당당
    2022.10.25
  9. 수정
    한글이 안되길래 어떻게 해야하나 했는데!
    덕분에 새로운걸 하나 더 알아갑니다!! 감사해요!
    대화보기
    • i_am_es
      2022-08-10
    • 아캔두잇
      20220805 완료
    • 키다리아저씨
      220720 완
    • toonfac
      220714 오후 3시 40분 완료
    • 뽀롱보더
      와 대박이네요
    • kimkk
      fs.wrtieFile(file_path, contents, 'utf8', callback );
    • 케굴
      2021-12-26
    • 초딩 개발자
      2021/12/12
    • 일억개
      굿뜨다 굿뜨
      대화보기
      • 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 최신버전은 안되서, 예전 버전으로 진행했어요... 예전 버전은 잘 됩니다.
      • pdpd
        21.10.11
      • 졸작완성하자
        21.10.08 완료
      • 20단국
        2021/09/29 완료
      • illiiiiii
        이게 제가 fs.writeFile을 쓸 때 기존 data 폴더 말고 새로운 폴더를 만들어서 그곳으로 위치를 지정해서 그런 것 같은데, 그러면 description 부분이 undefined로 뜹니다. description도 제대로 뜨게 하려면 어떻게 해야 할까요..?
        대화보기
        • illiiiiii
          한글 영어 상관 없이 리다이렉션 하면 title은 제대로 뜨는데 description은 undefined라고 뜨네요. 파일생성까지는 제대로 되는데 undefined가 왜 뜨는 걸까요?
        • TODOa
          한글 URL 인코딩에 querystring은 이제 지양해야하니 다른 방식을 적어둡니다.

          response.writeHead(302, {location: encodeURI(`/?id=${title}`)} );
          대화보기
          • 승뇽뇽
            웬료
          • laqah
            에러났는데 한글입력은 따로 처리 과정이 필요했군요.... 이영재님 남겨주신 댓글 덕분에 해결했습니다 감사합니다!
            대화보기
            • labis98
              20210726 good!!!
            • 이응종이
              2021.07.25 - 파일생성과 리다이렉션까지 완료
            • Duke
              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
            • Noah
              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)}`});
              graphittie 자세히 보기