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. 김관호
    21.11.23
  2. 21.10.08
  3. 졸작완성하자
    210914 완료!
  4. 승뇽뇽
    ㅇㄹ
  5. 박사장
    21 07 29 완료!
  6. labis98
    20210723 completed!
  7. 2021.07.18
  8. 강민재
    파일 경로가 달라서 오류가 있었습니다, 감사합니다!
    대화보기
    • 강민재
      소스코드로 실행시 Line 24에서 'Cannot read property 'length' of undefined' 오류가 뜹니다. filelist가 undefined로 인식되는 것 같은데, 어떻게 해야할까요?
    • 해밀턴
      210707
    • 김동현
      매개 변수의 순서를 바꾸는 것은 상관이 없습니다. 중요한 것은 이 함수가 사용되는 부분에서 자리에 맞게 매개변수를 설정해주는 것입니다.
      Itsyng 님께서는 아마도 위의 function 부분에서만 title과 list의 위치를 바꾸고 아래에서 함수를 호출해 사용하는 부분에서는 위치를 안 바꾸셔서 오류가 뜨는 게 아닌가 싶네요.
      function ex(title, list)라는 함수가 있다고 치면은 0번째 자리값의 매개변수는 title, 1번쨰 자리값의 매개변수는 list라고 정의해 놓은 거기 때문에 해당 함수를 호출해서 쓸 때는 똑같이 0번째 자리에 title에 관한 내용, 1번째 자리에 list에 관한 내용을 넣어주셔야 합니다.
      위와 같은 원리로 선언부에서는 function ex(title, list)라고 작성하고, 호출하는 부분에서는 ex(subject, catalog) 이런 식으로도 가능합니다. 이유는 ex라는 함수는 title이라는 매개변수에 대한 값이 subject라고 인식하고, list라는 매개변수에 대한 값이 catalog라고 인식을 하기 때문이죠. 제가 글 쓰는 솜씨가 없어서 이해가 되셨나 모르겠네요.
      대화보기
      • 김동현
        이 강의를 이해하지 못하신다면 js에 대한 더욱 기초적인 강의를 듣거나 배웠던 내용들을 복습해 보는 게 좋으실 듯합니다.
        지금 시점에서는 이해하지 못하는 내용이어도 본인이 관심을 가지고 이해하는 요소가 늘어날수록 보이는 시야가 달라질 거라고 생각합니다. 제가 그랬거든요. 그리고 동영상 강의 같은 경우는 본인이 반복해서 볼 수 있기 때문에 그만큼 자신이 이해 안 가거나 필요한 부분들을 따로 찾아봐서 공부할 수도 있고요. 한 번에 모든 걸 이해하려고 하지 말고 지금 보고 있는 내용을 이해하기 위해서는 어떤 내용들을 알고 있어야 이해할 수 있을까 하고 스스로 고민해 보세요.
        대화보기
        • 조재령
          이해 못하셔서 많이 속상하셨나 봐요
          모두에게 맞는 수업은 없어요
          학교나 학원은 학년 별, 수준 별로 나눠서 수업하고 학생 반응을 보고 맞추지만
          이 강의는 불특정 다수 대상이니까 본인에게 맞지 않을 수 있어요
          본인 수준에 맞는 강의나 책 찾아서 공부하고 오시면 이해하실 수 있을 거에요
          많이 반복하고 익숙해지는 것도 도움 되고요
          스스로 이해하려고 노력하고, 따라가려고 노력하고, 질문하고 검색해서 알아내려고 노력하는게
          의외로 공부하는데 도움이 됩니다
          포기하지 말고 화이팅 하세요~
          대화보기
          • 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
                • Sunny
                  2020.11.03.TUE.
                • ㅇㄹ
                • 콜라
                  20201014 완료
                • Yong Hyun Lee
                  완료 201002
                • 장원영
                  그냥 클론코딩하듯 따라 가기 바쁘네요..ㅜㅜ 어렵당
                • vampa
                  2020.09.09
                • 마준
                  완료
                • 마준
                  완료
                • Itsyng
                  궁금한 점이 있는데요

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

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

                  그러면 매개변수를 teamplateHTML(list, title 등)
                  이런식으로 하면은 왜 안되는지 알려주실 수 있나요?
                • 김재원123
                  타이핑이 틀리신것일 수도 있어요 ^^ 저도 타이핑이 틀릴 때가 많아서 코드 이해 다 끝나면 그냥 복붙하거든요.
                  좌절하지마시고 화이팅하시길 바랍니다!
                  대화보기
                  • 누누
                    2020.08.01. 완료
                  • 동트다
                    왜 똑같이 했는데 안되고 복붙하면 되는지 ㅠㅠ 속상합니다 ...모자른실력 ㅠ
                  • 코딩하는렌즈쟁이
                    2020-07-27 (월)
                    완료
                  • 영호팍
                    좋은 정보 알아갑니다
                  • Amousk
                    좋은 강의 감사합니다.
                  graphittie 자세히 보기