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. codinginpain
    완료
  2. 박창신
    수강완료
  3. 강다리
    run
  4. 쑤우
    수강완료. 감사합니다~
  5. 굼벵이
    완료
  6. CronEB
    완료
  7. YesterdayKite
    완료. 감사합니다!
  8. youngjin.lee
    Completed
  9. 허공
    190510 감사합니다.
  10. 위준우
    완료
  11. 자유로움
    완료
  12. 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인지 체크하게 만드니 잘 되네요
  13. 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 소스를 보시더라도, 들여쓰기와 줄바꿈이 적용된 깔끔한 폼으로 보실 수 있습니다!
  14. ㄹㅈㅈ
    여기까진 모두 자바스크립트에서 배웠던 내용들이군요...감사합니다
    완료
  15. supernet
    완료
  16. ㅁㅁ
    아 ㅎㅎ; 혼자 해보다가 알았습니다
    대화보기
    • ㅁㅁ
      함수 앞에 변수는 왜 선언하는건가요?
    • 지미츄
      감사합니다
    • 호두
      고맙습니다
      감동입니다
    • 김귀인
      감사합니다
      대화보기
      • 수업
        수학의 펑션과 비슷합니다.
        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
              감사합니다 덕분에 정말 많은 도움이 됩니다. ㅠㅠㅠㅠㅠㅠㅠ
            • 족발
              이고잉 선성님 대단해요~
            • 삼고잉
              리스트의 중복을 줄여보고자 아래와 같이 시도했는데
              리스트가 아예 안나오더라구요.. 왜그런걸까요?
              var app = http.createServer(function(request,response){
              var list;
              fs.readdir('./data', function(error, filelist){
              list = templateList(filelist);
              })
              var _url = request.url;
              var queryData = url.parse(_url, true).query;
              var pathname = url.parse(_url, true).pathname;
              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);

              }
            • 썩소센스
              **아래 templateHTML함수의 두번째 argument의 list 대신에 아래와 같이 치환하면 한줄로 바뀌네요.

              var list = templateList(filelist);
              var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);

              -->var template = templateHTML(title, templateList(filelist), `<h2>${title}</h2>${description}`);
            • Gimme_Gsuit
              완전 레고 조립하는 느낌이 ㅎㅎ 재밌어요.ㅎㅎ
            • 연수아빠
              학습 완료
            • moon
              감사합니다.
            • Seo Yun Seok Tudoistube
              Node.js 로 실무에서 개발할때 환경, 테스팅, 보안에 사용하는 라이브러리들도 궁금합니다.
              감사합니다^^!
            graphittie 자세히 보기