Node.js

App - 함수를 이용해서 정리 정돈하기

수업소개

함수를 이용해서 코드를 정리 정돈하는 모습을 경험해보겠습니다. 

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

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

function templateHTML(title, list, body){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${body}
  </body>
  </html>
  `;
}
function templateList(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 = templateList(filelist);
          var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
          response.writeHead(200);
          response.end(template);
        })
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else {
      response.writeHead(404);
      response.end('Not found');
    }



});
app.listen(3000);

 

댓글

댓글 본문
  1. kirkhom
    정말 재밌고 좋은 강의인데 공감못하시다니...
    원래 이 바닥은 호기심에 적셔진 어린 아이처럼
    직접 만들어보고 값을 바꿔보기도 하고 모르겠다 싶으면 물어보고
    하면서 배우는 겁니다.....
    여느 인강이나 학원처럼 어떤걸 배우고 뭐를 뭐를 외우라 정해주지 않아요..
    여기는 수능공부 공시공부 토익공부 학원이 아닙니다.
    대화보기
    • Jeong Il Haan
      20210419
    • kujern
      이해가 안 되고, 따라하기도 힘들고, 자기 혼자 설명하고 자기 혼자 진도나가는 최악의 강의
      엔지니어로는 어떨지 모르겠지만, 가르치는 능력은 제로에 가깝다.
    • 서쥐서쥐
      210404 완료
    • 김원준
      templateList(filelist)도 결국 list를 return해주는 함수기에 그런 것 같네용
      대화보기
      • 이수완
        와.. 감사합니다 ㅋㅋ 이유는 잘 모르시겠죠?
        대화보기
        • byoonn
          완료
        • 21.02.25
        • chimhyangmoo
          21.02.19
        • jeisyoon
          2021.02.08 App - 함수를 이용하여 정리 정돈 하기 완료
          어렵게 넘어갑니다 ~~
        • 마아앙
          //Main 서버
          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) {
          queryData.id = 'WEB';
          }
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, data) {
          fs.readdir(`./data`, function(error, filelist){
          var title = queryData.id;
          var list = templateList(filelist);
          var template = templateHTML(title, list, `<h2>${title}</h2><p>${data}</p>`);
          response.end(template);
          response.writeHead(200);
          });
          });
          } else {
          response.end('Not founded');
          response.writeHead(404);
          }
          });

          이렇게 한줄로 줄일 수 있습니다. queryData.id를 강제로 WEB이라고 만들어주면 루트에 있는 페이지에 본문정보는 data디렉토리에서 빼올 수 있고 title 또한 WEB으로 변경됩니다. 즉, 루트페이지에 있는 내용을 수정할때, 로직을 변경할 필요가 없습니다.
        • 마아앙
          2021.02.01
        • hanel_
          21.2.2 완료
        • 임찬혁
          완료
        • 뭄수
          완료
        • ohhigo
          21/1/23 ★★★★★ 완료
        • ohhigo
          21/1/23 ★★★★
        • 2021.01.04 완료
        • 손민철
          20/12/29 완료
        • 생활둘기
          2020 12 25
        • kkn1125
          20.12.21 완료~!
        • 옹옹
          20201123
        • 2020.11.03.TUE.
        • ㅇㄹ
        • 콜라
          20201014 완료
        • Yong Hyun Lee
          완료 201002
        • 장원영
          그냥 클론코딩하듯 따라 가기 바쁘네요..ㅜㅜ 어렵당
        • 2020.09.09
        • 마준
          완료
        • 마준
          완료
        • Itsyng
          궁금한 점이 있는데요

          정의된 내용 변수에 순서에 따라
          매개변수 순서도 같게 해야하나요? 다르게 했더니 작동은되는데 조금씩 오류가 있네요

          예를들어
          정의된 내용에서
          ${title}이 먼저 나오고
          그다음 ${list} 등 인데요

          그러면 매개변수를 teamplateHTML(list, title 등)
          이런식으로 하면은 왜 안되는지 알려주실 수 있나요?
        • 김재원123
          타이핑이 틀리신것일 수도 있어요 ^^ 저도 타이핑이 틀릴 때가 많아서 코드 이해 다 끝나면 그냥 복붙하거든요.
          좌절하지마시고 화이팅하시길 바랍니다!
          대화보기
          • 누누
            2020.08.01. 완료
          • 동트다
            왜 똑같이 했는데 안되고 복붙하면 되는지 ㅠㅠ 속상합니다 ...모자른실력 ㅠ
          • 코딩하는렌즈쟁이
            2020-07-27 (월)
            완료
          • 영호팍
            좋은 정보 알아갑니다
          • Amousk
            좋은 강의 감사합니다.
          • Katherine Roh
            완료 :)
          • 사아
            역시 신기합니다!
          • 김보미
            완료
          • 김재익
            완료
          • 바다의왕자
            완료
          • Eunsung Shin
            완료
          • Phill
            위에 제공한 소스코드와 제코드를 비교했을 때 완전 똑같은데 브라우저 개발도구 console창에 favicon.ico를 가져올 수 없다고 뜨면서 브라우저 창에 하나도 안뜨네요ㅠ
            근데 위 소스코드를 복붙하니까 되고,, 왜 그러지 ㅋㅋㅋ
          • 준바이
            감사합니다
          • CarryKim
            오 멋있는 코드에요bb 감사합니다.
          • 03.10 완료
          • eddylee123456
            복습
          • eddylee123456
            완료
          • import.위드
            감사합니다 :]

            전체 코드를 하나하나 정리해보았습니다!

            이해가 어려우신분들께 도움이 되셨으면 좋겠네요 ㅎㅎ

            https://blog.naver.com......660
          graphittie 자세히 보기