Node.js

App -객체를 이용해서 템플릿 기능 정리 정돈하기

수업소개

객체를 이용해서 탬플릿 기능을 정리 정돈하는 법을 소개합니다. 

 

 

강의

 

 

소스코드

main.js (변경사항)

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');

var template = {
  HTML:function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  },list:function(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 = template.list(filelist);
          var html = template.HTML(title, list,
            `<h2>${title}</h2>${description}`,
            `<a href="/create">create</a>`
          );
          response.writeHead(200);
          response.end(html);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = template.list(filelist);
            var html = template.HTML(title, list,
              `<h2>${title}</h2>${description}`,
              ` <a href="/create">create</a>
                <a href="/update?id=${title}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${title}">
                  <input type="submit" value="delete">
                </form>`
            );
            response.writeHead(200);
            response.end(html);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = template.list(filelist);
        var html = template.HTML(title, list, `
          <form action="/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(html);
      });
    } 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 if(pathname === '/update'){
      fs.readdir('./data', function(error, filelist){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = template.list(filelist);
          var html = template.HTML(title, list,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(html);
        });
      });
    } else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          var title = post.title;
          var description = post.description;
          fs.rename(`data/${id}`, `data/${title}`, function(error){
            fs.writeFile(`data/${title}`, description, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
            })
          });
      });
    } else if(pathname === '/delete_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          fs.unlink(`data/${id}`, function(error){
            response.writeHead(302, {Location: `/`});
            response.end();
          })
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
작성자
비밀번호
  1. 이루
    완료
  2. 허공
    190510 감사합니다.
  3. 위준우
    완료
  4. 누노
    그동안 현업에서 개발하면서 뭔지 모르고 그냥 느끼기만 했던 점들을 콕콕 집어 얘기해주시니 감동입니다.

    좋은 강의 감사합니다.
  5. supernet
    감사합니다.
  6. 지미츄
    감사해요...pm2 사용이 어렵네옹
  7. 호두
    고맙습니다.
  8. 나마코엘
    연관성을 지녔으나 흩어져 있는 코드들을 하나로 모아 객체화 하고, 객체화를 통하여 리팩토링을 이룬다.
  9. leesj020925@naver.com
    지역함수와 전역함수에 대해 알아보시면 될것같습니다
    template 객체안의 list 의 var list 는 이 안에서만 유효하기에 아래 조건문의 list와 충돌할 위험이 없는걸로 알고 있습니다.
    대화보기
    • 김나다
      잘 들었습니다!
    • hwarang.Kim
      10.10.0 설치하고 해봤는데

      '' 없이도 잘 동작하네요... 혹시 다른 문제 있으신건 아닌지?
      대화보기
      • trisoul
        node.js 10.10.0 버전 기준으로 객체값(property)을 정의할 때 따옴표('')를 해줘야 에러없이 작동하네요... 어딘가 버전 바뀌면서 문법이 변경됐나봅니다.
        var template = {
        'HTML': function ~~~~
        'list': function ~~~~
        }
        이렇게요
      • 삼고잉
        첫번째 훑기
      • naninem
        저도 궁금하네요!
        대화보기
        • 요시코
          리팩토링! 좋은말씀입니다
        • Gimme_Gsuit
          열심히 공부해야겠어요!!!! 감사합니다.
        • 감사합니다.
        • Seo Yun Seok Tudoistube
          새로운 글을 생성할 때 한글로 하면 파일은 생성되는데 홈페이지는 오류가 나는데, response.writeHead(200); 에 추가로 뭘 더해줘야 하는지 궁금합니다.
          감사합니다!
        graphittie 자세히 보기