생활코딩

Coding Everybody

코스 전체목록

닫기

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. 난할수있어
    1. 오류날때 확인할꺼 : template를 html로 안바꿈.
    2. "."을 안찍음
  2. refactoring with object for maintenance...
    happy new year everyone!!
  3. 일억개
    감사합니다. 이고잉 선생님
    새해엔 뜻하는바 모두 이루셨으면 좋겠습니다.
    건강하세요~~

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