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. 김재원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가 들어가도 실제로는 같은 것이 들어가는 것이죠??
          • 에델
            에델 카렌 웅완료
          • 민트색마시멜로우
            지금 님은 list 변수에 내용을 미리담아두어 함수 안 어디서든지 접근하게 하고싶으신거죠? 아쉽지만 그건 불가능 합니다.
            fs.readdir('./data', function(error, filelist){
            list = templateList(filelist);
            })위 코드는 비동기적입니다. 즉 이작업이 끝나기 까지 기다리지않는다는 뜻이죠. 그래서 readdir이 끝났을때 해야할 작업을 위 function(error, filelist){.....}(이걸 콜백함수라고 합니다.)로 전달하는 겁니다. 즉 list 의 값을 사용하시고 싶으시면 무조건 콜백함수안에서만 사용하실수 있습니다. 하지만 아주 좋은시도 입니다.중복을 없애고 싶으시면 templateHTML에 작업했던것처럼 filelist를 함수의 인자로 전달하여 그함수 내에서 사용할수있도록 하면 될겁니다.그리고 가공한 값을 반환하고 말이죠
            대화보기
            • jo_onc
              if(pathname === '/'){
              if(queryData.id === undefined){
              var title = 'Welcome';
              var description = 'Hello, Node.js';

              var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
              response.writeHead(200);
              response.end(template);
              }

              1. queryData.id가 undefined 일 때만 출력하게끔 되어 있습니다.
              2. if 의 괄호 태그가 다 닫히지 않았습니다.

              참고해보세요~!
              대화보기
              • 김나다
                들으면 들을수록 잼나요
              • akxltmzk@gmail.com
                감사합니다 덕분에 정말 많은 도움이 됩니다. ㅠㅠㅠㅠㅠㅠㅠ
              graphittie 자세히 보기