생활코딩

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. 김철흥
    2024.01.14
    완료!
  2. 어흥
    230702
  3. Hojun Song
    2023-04-16 10:57
  4. 감자
    22.12.05 완료
  5. 당당
    2022.10.28
  6. 수정
    오히려 너무 완벽한 코드를 짜기 위해 노력한다면 생산자가 되기 쉽지 않다는 말 굉장히 공감되네요!
    저도 길진 않은 기간이지만, 코딩을 공부하면서 이런 매너리즘에 빠졌던 적이 있었어요.
    그러다보니 더욱 선생님의 이 한 말씀이 감사하게 느껴집니다.

    천천히! 누구나 다 처음이었던 시절이 있었을 테니까!!
    오늘 해주신 말씀 기억하며 한걸음 한걸음 내실을 다지며 열심히 리펙터링도 같이 해보겠습니다!
    굿굿굿 감사합니당 ^^

    반복되는 패턴들을 함수화 하기!
    그리고 그 후 함수를 객체화 또는 배열화 과정을 거치며 조금씩 조금씩 더 유지보수하기 쉬운 코드로 리펙토링 해봅시다!
  7. 아캔두잇
    20220810 완료
  8. 키다리아저씨
    220721 완
  9. toonfac
    220714 오후 4시 12분 완료
  10. 난할수있어
    1. 오류날때 확인할꺼 : template를 html로 안바꿈.
    2. "."을 안찍음
  11. kimkk
    refactoring with object for maintenance...
    happy new year everyone!!
  12. 일억개
    감사합니다. 이고잉 선생님
    새해엔 뜻하는바 모두 이루셨으면 좋겠습니다.
    건강하세요~~

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

      객체지향 프로그래밍 목적 : 코드를 깔끔하게 복잡하지 않게 정리하는것
    • Amousk
      좋은 강의 감사합니다.
    • Katherine Roh
      완료 :)
    • 김보미
      완료
    • 바다의왕자
      완료
    • 윤영훈
      감사합니다.
    • Kanglim Hong
      감사합니다 :)
    graphittie 자세히 보기