생활코딩

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. youngjin.lee
    completed
  2. 임정섭
    코드 그대로 복붙해도 동작 안하는 분들은
    pm2 restart main.js 해보세요~
  3. 허공
    190510 감사합니다.
  4. 이루
    완료
  5. 고태동
    이문제 가지신분들!
    저도 지금 막배우는 뉴비라 군더더기 없는 정확한 정답인지 모르겠지만
    한시간 검색해서 해결했습니다.
    40번째 줄을 fs.readdir('./data','utf-8', function(error, filelist){ 로 바꾸시고
    93번쨰 줄을 response.writeHead(302, {Location: `/?id=${qs.escape(title)}`}); 로 바꾸면
    한글을 입력해도 리다이렉션 잘되고 글자 꺠짐없이 리스트에 링크 추가되네요
    대화보기
    • 위준우
      완료
    • 자유로움
      완료
    • supernet
      감사합니다.
    • 지미츄
      감사합니다
    • 호두
      고맙습니다.
    • 권문수
      감사합니다 ㄸ 정말 유용하고 좋은 강의 였습니다
      이렇게 깊게 파고들어가니 좀 더 재미있어지네요 ㄸㄷ
    • 나마코엘
      재미있음.
    • popinbompin
      대박이네요
    • 쑤쑤
      넵 기분 좋네여:) 유후~
    • 일단시작하고본다
      우와와와아아아ㅏㅇ 너무재밌어요 감사합니다
    • jo_onc
      개인 블로그 만들 때 아주 유용하겠네요!
      감사합니다!
    • 삼고잉
      뭔가 POST방식과 pm2를 쓰면서부터 머리에 잘 안들어오게 되네요
      한번 후루룩 듣고 다시 찬찬히 살펴보면서 들어봐야겠습니다
    • 공공
      밑에 박유님 처럼 비슷하게 에러가 계속 떠서 노드 js runtime setup실행 후 repair 하니까 되더라구요..
      +프로세스 목록중 nodejs server side project(?)인가 그거 두 개 실행됐길래 그것도삭제해줬어요
    • 박유
      [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
            감사합니다.
          • 감사합니다.
          • chosk
            서버의 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 자세히 보기