Node.js

App - 글목록 출력하기

수업소개

data 디렉토리에 있는 파일들의 이름을 이용해서 글 목록을 생성하는 기능을 구현해보겠습니다. 

 

 

 

강의

 

 

 

소스코드

main.js

변경사항

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

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 = '<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>';
          var template = `
          <!doctype html>
          <html>
          <head>
            <title>WEB1 - ${title}</title>
            <meta charset="utf-8">
          </head>
          <body>
            <h1><a href="/">WEB</a></h1>
            ${list}
            <h2>${title}</h2>
            <p>${description}</p>
          </body>
          </html>
          `;
          response.writeHead(200);
          response.end(template);
        })



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



});
app.listen(3000);

 

댓글

댓글 본문
  1. 별거
    성공적으로 하긴 했는데, 파일이 ABC 순으로 나오는게 좀 그렇네요.
    전 HTML, CSS, JavaScript 순으로 하고 싶은데 CSS, HTML, JavaScript 순으로 되어 고칠 수 없네요.
    해결법이 있을까요?
  2. 크리스
    Node js는 처음부터 너무 어렵고 이해하기 힘들었는데 이번 시간에 지난 시간동안 이해되지 않았던 것들이 한꺼번에 이해되네요 너무 혁명적입니다
  3. 졸작완성하자
    210907 완료
  4. 너도나도코오딩
    혁명 그 자체..
  5. 승뇽뇽
    nodejs 파일 생성하고 결과 보는데 진짜 혁명이다 라고 입에서 절로 나오네 ...
  6. 박사장
    21 07 29 완료!
  7. labis98
    20210722 completed!
  8. 2021.07.18
  9. 조재령
    중간에 중괄호 꼬여서 짜릿한 시간 보냈지만
    재밌습니다!
  10. Jeong Il Haan
    20210416
  11. byoonn
    완료
  12. 21.02.25
  13. chimhyangmoo
    21.02.19
  14. 두울리
    2021.02.15 - 완료
  15. jeisyoon
    2021.02.08 App - 글목록 출력하기 완료
  16. 마아앙
    2021.02.01
  17. 임찬혁
    완료!! 이번 내용 너무 신기하고 재미 있었습니다.
  18. hanel_
    web3 - ajax와 기능이 비슷하다고 생각되는데 맞나요??
  19. 뭄수
    완료
  20. 2021.01.04 완료!
  21. 손민철
    20/12/29 완료
  22. 생활둘기
    2020 12 25
  23. kkn1125
    20.12.21 완료~!
  24. 옹옹
    20201123
  25. 2020.11.03.TUE.
  26. ㅇㄹ
  27. 콜라
    20201014 완료
  28. Yong Hyun Lee
    완료 201002
  29. CH Yim
    완료
  30. 박병진
    완료!
  31. vampa
    2020.09.09
  32. 마준
    완료
  33. QQIMI
    `(억음부호) 랑 '(작은따옴표)랑 다른건지 몰라서 한참 헤멨네요...
  34. 거대따릉이
    만약에 data 안에 파일 이름을 CSS.txt 같은 식으로 하셨으면

    var file = filelist[i].substring(0, filelist[i].length-4);
    list += `<li><a href="/?id=${file}">${file}</a></li>`;

    이런 식으로 하시면 돼요.
  35. 모라토리움
    와 신기합니다
  36. 김재원123
    1년이 지난 댓글이지만 혹시나 하여 적어봅니다.

    구글에서 상대경로에 관해 조사해보시면 도움이 될 것 같아요.
    저도 비슷한 궁금증,문제가 있었는데 구글링을 통해 해결하였습니다.

    도움 되셨으면 좋겠어요 ^^
    대화보기
    • 누누
      2020.07.31 완료 다음주까지 WEB2 다듣기 아자아자
    • 김재원123
      이번영상 node.js 강의중에 처음으로 입벌리고 봤습니다;
    • 코딩하는렌즈쟁이
      2020-07-25 (토)
      완료!
    • 가톨릭대 컴공
      2020-07-18
    • 불스택
      20.07.12 감사합니다
    • 영호팍
      출석스 신기방기!!
    • Amousk
      좋은 강의 감사합니다.
    • hoya
      2020.06.18
    • Katherine Roh
      완료 :)
    • 사아
      엄청 신기합니다... 재미있네요!
    • 김재익
      뭔가 해낸기분! 완료
    • 바다의왕자
      완료
    • 암말
      신기하네요 ㅋㅋ
    • 숲을보자
      너무 재밌어요. 무료로 이런 강의를 제공해주셔서 감사합니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기