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. 장원영
    그냥 클론코딩하듯 따라 가기 바쁘네요..ㅜㅜ 어렵당
  2. vampa
    2020.09.09
  3. 마준
    완료
  4. 마준
    완료
  5. Itsyng
    궁금한 점이 있는데요

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

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

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

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

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

      https://blog.naver.com......660
    • 스티븐잡숴
      완료
    • 임은정
      완료
    • 임은정
      완료
    • JT_brand
      완료
    • codinginpain
      완료
    • 박창신
      수강완료
    • 강다리
      run
    • 쑤우
      수강완료. 감사합니다~
    • 굼벵이
      완료
    • CronEB
      완료
    • YesterdayKite
      완료. 감사합니다!
    • youngjin.lee
      Completed
    • 허공
      190510 감사합니다.
    • 위준우
      완료
    • 자유로움
      완료
    • Someone
      이고잉님이 말씀하신 querydata.id === undefined 조건문 중복제거해서 하나로 합쳐봤습니다
      if (pathname === '/') {
      fs.readdir('./data', (err, fileList) => {
      var list = templateList(fileList);
      fs.readFile(`data/${queryData.id}`, 'utf8', (err, data) => {
      if (queryData.id === undefined) {
      var title = "welcome";
      var description = "hello node.js";
      } else {
      var title = queryData.id;
      var description = data;
      }
      var body = `<h2>${title}</h2>${description}`;
      var template = templateHTML(title, list, body);
      response.writeHead(200);
      response.end(template);
      });
      });
      }
      readfile문 안에서 undefined인지 체크하게 만드니 잘 되네요
    • 0cool
      list 영역을 함수로 가공하는 부분을 수정하지 않으면 html 태그가 이쁘지 않게 출력됩니다!
      (물론 작동하는데는 전혀 지장이 없습니다.)

      function templateList(filelist){
      var list = '<ul>\n';
      var i = 0;
      while(i < filelist.length){
      list = list + `\t\t<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>\n`;
      i = i + 1;
      }
      list = list+'\t</ul>\n';
      return list;
      }

      templateList 부분을 위처럼 수정하시면 나중에 html 소스를 보시더라도, 들여쓰기와 줄바꿈이 적용된 깔끔한 폼으로 보실 수 있습니다!
    • ㄹㅈㅈ
      여기까진 모두 자바스크립트에서 배웠던 내용들이군요...감사합니다
      완료
    • supernet
      완료
    • ㅁㅁ
      아 ㅎㅎ; 혼자 해보다가 알았습니다
      대화보기
      • ㅁㅁ
        함수 앞에 변수는 왜 선언하는건가요?
      • 지미츄
        감사합니다
      • 호두
        고맙습니다
        감동입니다
      • 김귀인
        감사합니다
        대화보기
        • 수업
          수학의 펑션과 비슷합니다.
          function testFunction(A)
          {
          console.log(A);
          }

          위 함수를 만드시고
          testFunction('B');
          testFunction('C');
          로 테스트 해보시면 아실거같아여
          대화보기
          • 김귀인
            질문이 하나 있습니다.
            templateHTML(title, templateList(filelist), `<h2>${title}</h2>${description}` )
            이라고 하지 않고
            위에서는 `<h2>${title}</h2>${description}` 를 body 말고 `<h2>${title}</h2>${description}` 그대로 쓰셔도 상관 없는데 가독성.. 등을 고려해서 body로 치환하신거죠??
            같은 function에서는 자리가 같은 곳에는 같은 argument가 들어가는 것인가요?
            다른 말로 또 표현하자면 같은 function에서는 자리가 같은 곳에는 문자상으로는 다른 argument가 들어가도 실제로는 같은 것이 들어가는 것이죠??
          graphittie 자세히 보기