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. 일단시작하고본다
    우와와와아아아ㅏㅇ 너무재밌어요 감사합니다
  2. jo_onc
    개인 블로그 만들 때 아주 유용하겠네요!
    감사합니다!
  3. 삼고잉
    뭔가 POST방식과 pm2를 쓰면서부터 머리에 잘 안들어오게 되네요
    한번 후루룩 듣고 다시 찬찬히 살펴보면서 들어봐야겠습니다
  4. 공공
    밑에 박유님 처럼 비슷하게 에러가 계속 떠서 노드 js runtime setup실행 후 repair 하니까 되더라구요..
    +프로세스 목록중 nodejs server side project(?)인가 그거 두 개 실행됐길래 그것도삭제해줬어요
  5. 박유
    [localhost 페이지에 뜨는 에러 메세지는 아래와 같습니다!]
    사이트에 연결할 수 없음
    연결이 재설정되었습니다.
    다음을 시도:

    연결 확인
    프록시 및 방화벽 확인
    Windows 네트워크 진단 프로그램 실행
    ERR_CONNECTION_RESET

    [pm2 log 를 했을 때 뜨는 에러 메세지 입니다!]
    0|main | TypeError: Cannot convert object to primitive value
    0|main | at IncomingMessage.<anonymous> (C:\Users\user\Desktop\node.js\main.js:85:30)
    0|main | at emitNone (events.js:106:13)
    0|main | at IncomingMessage.emit (events.js:208:7)
    0|main | at endReadableNT (_stream_readable.js:1064:12)
    0|main | at args.(anonymous function) (C:\Users\user\AppData\Roaming\npm\node_modules\pm2\node_modules\event-loop-inspector\index.js:133:29)
    0|main | at _combinedTickCallback (internal/process/next_tick.js:138:11)
    0|main | at process._tickDomainCallback (internal/process/next_tick.js:218:9)
    PM2 | App [main] with id [0] and pid [15736], exited with code [1] via signal [SIGINT]
    PM2 | Starting execution sequence in -fork mode- for app name:main id:0
    PM2 | App name:main id:0 online
    대화보기
    • egoing
      에러 메시지를 알려주세요~
      대화보기
      • 박유
        fs.writeFile 코드를 작성하면서부터 사이트를 연결할 수 없다는 페이지가 뜹니다. data 디렉토리에 새로운 파일이 안생기기도 하구요! 이고잉님 코드를 그대로 가져다 써도 같은 에러가 뜹니다ㅠㅠ 위에 올려주신 최종 코드도 그렇고 아래 코드에서도 마찬가지 에러가 뜨고요.. 무엇이 문제인걸까요? ㅠㅠ

        fs.writeFile(`data/${title}`, description, 'utf8', function(err){
        response.writeHead(200);
        response.end('success');
        })
      • colley
        이거 하고 울번했네요
      • Pak Seungheum
        저도 같은 문제가 생기네요.
        WriteHead에서 발생하는 문제까지는 확인했는데 아마 URL에 한글이 들어가기전에 전처리를 해야하는 듯 합니다.

        추가
        URL 인코딩 문제가 맞네요. 만약에 한글도 가능하도록 작업하시려면
        ${title}을 ${qs.escape(title)}로 바꿔주시면 됩니다.

        이전에 쿼리스트링 모듈을 가져왔기 때문에 변경하시면 될듯 한데, 만약에 하지 않으셨다면
        const qs = require('querystring');
        을 통해 모듈을 포함하시면 됩니다.
        대화보기
        • Gimme_Gsuit
          감사합니다.
        • 감사합니다.
        • 서버의 locale 설정이 달라서 그렇습니다.
        • Hyunwoo Jung
          안녕하세요 이고잉님! 수업 정말 잘 듣고 있습니다! 다름이 아니라 파일을 생성할 때 title을 영어가 아닌 한글로 주면 파일은 새로 정상적으로 생성되나 create_process 과정에서 문제가 생깁니다.ㅜㅜ 바로 id=title 값으로 redirection이 되야하는데 create_process 페이지로 넘어가고 따로 설정해두었던 page not found도 아닌 크롬 자체 '페이지를 찾을 수 없다'고 뜹니다. 문자 인코딩 문제인 것 같은데 코드를 다시 한번 확인해보니 utf8로 잘 설정되어 있습니다. description은 한글이여도 문제가 없는데 title이 한글인 경우에서만 문제가 되네요. 저와 같은 문제가 생기신 분 있으신가요??
        • Seo Yun Seok Tudoistube
          response.writeHead(302, {Location: `/?id=${title}`}); 라는 형식으로 리다이렉트 하는거군요.
          감사합니다!
        graphittie 자세히 보기