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. 21.10.18
  2. 졸작완성하자
    21.10.09 완료
  3. 너도나도코오딩
    처음부터 이상적으로 짜려고하면 한 줄도 못 짤수 있다.. 정말 공감가네요ㅠ
  4. 유지보수를 위한 개선은 천천히! 기억해야겠어요
  5. labis98
    20210728 좋은 강의 정말 감사합니다.!!!
  6. 2021.07.18
  7. Jeong Il Haan
    20210422
  8. byoonn
    완료
  9. 21.02.27
  10. chimhyangmoo
    21.02.25
  11. jeisyoon
    2021.02.12 App - 객체를 이용한 템프릿 기능 정리 완료
  12. 마아앙
    2021.02.09
  13. hanel_
    21.2.5 너무 재밌습니다
  14. 뭄수
    완료
  15. ohhigo
    21/1/25 ★★★★★
  16. isaiah
    요잇까지 하겠습니다.
  17. 2021.01.06 완료!
  18. 손민철
    20/12/31 완료
  19. 생활둘기
    2020 12 26
  20. kkn1125
    20.12.23 완료~!
  21. 옹옹
    20201124
  22. 콜라
    20201015 완료
  23. Yong Hyun Lee
    완료 201002
  24. 박병진
    감사합니다. 2020.09.14
  25. vampa
    2020.09.11
  26. 모라토리움
    TypeError: Cannot read property 'list' of undefined 이 에러가 뜨시는 분들은 var template을 var html로 안 바꿨는지 살펴보세요 ^0^
  27. 모라토리움
    혹시 cmd창에서 이 오류가 나시는 분들은

    C:\Users\m3m05\Desktop\nodejs>node main.js
    events.js:292
    throw er; // Unhandled 'error' event
    ^

    Error: listen EADDRINUSE: address already in use :::3000
    [90m at Server.setupListenHandle [as _listen2] (net.js:1313:16)[39m
    [90m at listenInCluster (net.js:1361:12)[39m
    [90m at Server.listen (net.js:1447:7)[39m
    at Object.<anonymous> (C:\Users\m3m05\Desktop\nodejs\main.js:162:5)
    [90m at Module._compile (internal/modules/cjs/loader.js:1137:30)[39m
    [90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)[39m
    [90m at Module.load (internal/modules/cjs/loader.js:985:32)[39m
    [90m at Function.Module._load (internal/modules/cjs/loader.js:878:14)[39m
    [90m at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)[39m
    [90m at internal/main/run_main_module.js:17:47[39m
    Emitted 'error' event on Server instance at:
    [90m at emitErrorNT (net.js:1340:8)[39m
    [90m at processTicksAndRejections (internal/process/task_queues.js:84:21)[39m {
    code: [32m'EADDRINUSE'[39m,
    errno: [32m'EADDRINUSE'[39m,
    syscall: [32m'listen'[39m,
    address: [32m'::'[39m,
    port: [33m3000[39m
    }

    C:\Users\m3m05\Desktop\nodejs>

    cmd창에서 pm2 kill 입력해서 모든 포트를 종료한 후에 다시 한번 실행시켜보세요
    포트충돌 때문에 나타나는 에러라네요
  28. 김재원123
    list 관련해서 코트 검토해보시면 해결되실것 같아요 ^^ 5개월이나 지난 질문이지만 조심스럽게 의견내봅니다.
    대화보기
    • 김재원123
      거의 다 끝났다.. 죽을것같아요 선생님 자고싶어요..
    • Jenny Song
      30th.JULY.2020 완료

      객체지향 프로그래밍 목적 : 코드를 깔끔하게 복잡하지 않게 정리하는것
    • Amousk
      좋은 강의 감사합니다.
    • Katherine Roh
      완료 :)
    • 김보미
      완료
    • 바다의왕자
      완료
    • 윤영훈
      감사합니다.
    • Kanglim Hong
      감사합니다 :)
    • bomnie
      반복되는 패턴들을 객체화/함수화/배열화 시킴으로써 훨씬 더 유지,보수하기 쉬운 코드를 작성하기!
    • 준바이
      감사합니다.
    • 03.12 완료
    • eddylee123456
      복습
    • 요하네
      ?
      대화보기
      • eddylee123456
        완료
      • 스티븐잡숴
        완료
      • Hoon
        저는 객체명을 template 로 해서 작성했더니 오류가 나서
        다른 객체명(templatee)로 했더니 괜찮아졌는데 이건 무슨 문제일까요.,..?
        오류는 이렇게 작성되었습니다.
        0|main | TypeError: Cannot read property 'list' of undefined
      • 윤소윤
        감사합니다. 중복되는 코드는 객체화를 해야 한다는 거~ :)
      • 임은정
        감사합니당
      • codinginpain
        잔디심자!
        리팩토링을 역시 꾸준히 해줘야하는 거군요
        처음부터 멋지게 짜려하지말고! 알겠읍니다
      • 쑤우
        수강완료. 감사합니다~
      • 굼벵이
        완료
      • CronEB
        완료
      graphittie 자세히 보기