생활코딩

Coding Everybody

코스 전체목록

닫기

App 제작 - 모듈의 활용

수업소개

모듈을 활용해서 템플릿 기능을 모듈화 해보겠습니다. 

 

 

 

강의

 

 

 

소스코드

변경사항

template.js

module.exports = {
  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;
  }
}

 

main.js

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
var template = require('./lib/template.js');

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. BF_Lee
    23.07.05
  3. 어흥
    230702
  4. Hojun Song
    2023-04-16 11:48
  5. 감자
    22.12.05 완료
  6. 당당
    2022.10.29
  7. 아캔두잇
    20220810 완료
  8. 키다리아저씨
    220721 완
  9. toonfac
    220714 오후 4시 22분 완료
  10. kimkk
    modularization

    gather related var, object, function into module
    refactor : re(again) + factor (important things to do something)

    Refactoring consists of improving the internal structure of an existing program's source code, while preserving its external behavior. The noun “refactoring” refers to one particular behavior-preserving transformation, such as “Extract Method” or “Introduce Parameter.”
  11. 케굴
    2021-12-26
  12. pdpd
    21.10.18
  13. 졸작완성하자
    21.10.09 완료
  14. 삼각자
    여기까지 왔네요! 일단 짜고 계속 정리해보겠습니다.
  15. labis98
    20210729 Good!
  16. Duke
    2021.07.18
  17. aminora
    이후 미로찾기 시작
  18. Jeong Il Haan
    20210423
  19. choiyerin
    여기있는 예제를 그대로 복사해서 실행해봤는데 영어로 된 파일은 문제가 없으나 한글로된 파일은
    throw new ERR_INVALID_CHAR('header content', name); 이런 에러가 뜨면서 연결이 종료됩니다.
    하지만 다시 접속후 data폴더를 열어보면 제가 생성한 파일은 생깁니다. home 화면으로 돌아가보면 파일도 목록에 추가되어있습니다. 어떻게 해결하면 좋을까요?
  20. byoonn
    완료
  21. 21.02.27
  22. chimhyangmoo
    21.02.26
  23. jeisyoon
    2021.02.12 App 제작 - 모듈 활용 완료
  24. 마아앙
    2021.02.09
  25. hanel_
    21.2.5
  26. 뭄수
    완료
  27. Noah
    2021.01.06 완료!
  28. 손민철
    21/1/1 완료
  29. 생활둘기
    2020 12 26
  30. kkn1125
    20.12.23 완료~!
  31. 옹옹
    20201124
  32. 콜라
    20201015 완료
  33. Yong Hyun Lee
    완료 201002
  34. 박병진
    2020.09.14 완료
  35. vampa
    2020.09.11
  36. Jenny Song
    31th.JULY.2020 완료
  37. Amousk
    좋은 강의 감사합니다.
  38. Katherine Roh
    완료 :)
  39. 김보미
    완료
  40. 바다의왕자
    완료
  41. 준바이
    감사합니다
  42. 03.12 완료
  43. 스티븐잡숴
    흠..그러니까 ../는 최상위 디렉토리인 web2-nodejs를 뜻하고
    ./는 syntax 디렉토리가 되는거군요.

    그렇다면 그 아래 코드에 if 조건문을 보면

    fs.readdir('./data', func~~

    여기서 ./data는 왜 제대로 동작하는걸까요?
    syntax폴더는 data폴더의 상위폴더가 아닌데 말이죠...
    대화보기
    • 스티븐또잡숴
      ./는 현재 프로그램을 실행하려고 하는 위치, 즉 자신이 위치하고 있는 곳.
      ../는 가장 상위폴더 (루트) 를 가리킵니다.

      ./로 안돼시고 ../로 되시는거면 lib폴더가 main.js파일과 같은 폴더 안에 들어있지 않고,
      가장 바깥쪽에(상위폴더에) lib폴더가 놓여져 있어서 그런 것 같습니다.
      대화보기
      • eddylee123456
        완료
      • 스티븐잡숴
        var template = require('./lib/template.js')
        전 이렇게 하면 사이트에 연결할 수 없다고 뜨는데

        var template = require('xx/lib/template.js')
        요렇게 괄호안에 마침표 하나 더 찍으니까 잘 동작합니다. 아무런 문제 없어요.
        (x=마침표를 뜻합니다. 마침표 두개를 찍고 /를 입력하면 댓글이 안달아져요..ㅠㅠ)

        파일위치, 폴더위치 이고잉님이랑 똑같고
        원인을 몰라 코드내용도 걍 복사 붙여넣기로 100% 똑같이 했는데도 안됩니다.
        파일이름, 폴더이름 100%일치합니다.
        왜 안되는걸까요...허허
      • 임은정
        완료
      • ydkim108@gmail.com
        이 페이지에 좋아요,와 봤어요가 작동을 안하네요. 이전 몇 페이지도 그렇습니다.
      • codinginpain
        완료쓰
      • 강다리
        run
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기