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. CH Yim
    완료
  2. 박병진
    완료!
  3. vampa
    2020.09.09
  4. 마준
    완료
  5. QQIMI
    `(억음부호) 랑 '(작은따옴표)랑 다른건지 몰라서 한참 헤멨네요...
  6. 거대따릉이
    만약에 data 안에 파일 이름을 CSS.txt 같은 식으로 하셨으면

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

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

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

    도움 되셨으면 좋겠어요 ^^
    대화보기
    • 누누
      2020.07.31 완료 다음주까지 WEB2 다듣기 아자아자
    • 김재원123
      이번영상 node.js 강의중에 처음으로 입벌리고 봤습니다;
    • 코딩하는렌즈쟁이
      2020-07-25 (토)
      완료!
    • 가톨릭대 컴공
      2020-07-18
    • 불스택
      20.07.12 감사합니다
    • 영호팍
      출석스 신기방기!!
    • Amousk
      좋은 강의 감사합니다.
    • 2020.06.18
    • Katherine Roh
      완료 :)
    • 사아
      엄청 신기합니다... 재미있네요!
    • 김재익
      뭔가 해낸기분! 완료
    • 바다의왕자
      완료
    • 암말
      신기하네요 ㅋㅋ
    • 숲을보자
      너무 재밌어요. 무료로 이런 강의를 제공해주셔서 감사합니다.
    • Eunsung Shin
      완료
    • 준바이
      위대한 강의
    • 심여수
      잘 보았습니다.
    • eddylee123456
      복습
    • jimmyzip
      심금을 울리는 멘트네요. 데이터가 추가된다고 로직이 변경되어야 하는 상황을 부끄러워해야 한다.
    • eddylee123456
      완료
    • Gritter
      감사합니다.
    • 스티븐잡숴
      완료
    • 임은정
      완료
    • JT_brand
      완료~~!!
    • 김태완
      사소한 문제로 헤맷는데.. 해결하니 뿌듯하네요

      var list '<ul>';
    • harowaroi
      ${변수} 이런 식으러 쓰셨는지 확인해 보시면..저도 똑같이 했네요
      대화보기
      • 남기봉
        홈페이지에 $filelist 값이 그대로 나오네요.. ㅜㅜ
      • 파이어뱃
        2019_12_05 complete
      • codinginpain
        완료용
      • 박창신
        수강완료
      • 강다리
        run
      • 쑤우
        수강완료. 감사합니다~
      • 굼벵이
        완료
      • CronEB
        완료
      • YesterdayKite
        완료. 감사합니다!
      • 화이팅
        변수 list 기존 값에 </ul> 추가 한다는 뜻이에요.
        var list = '<ul>';
        라인 47 에 위 같이 시작해서 </ul> 로 끝나야 합니다.

        아래 페이지 참고하세요.
        https://opentutorials.org......392
        대화보기
        • 이이이이이뻐
          지나다가 혹시 왜 list = list+'</ul>' 인지 아시는분 알려주세요 ㅠㅠ
        • 정환
          readFile 속에서 description = desc를 해주면
          비동기라서 바로 description변수에 담기지 않습니다.
          대화보기
          • 코드변경
            코드가 중복되는게 많아서
            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 === '/') {
            var title = qeuryData.id
            var description
            fs.readdir('./data', function(err, filelist) {
            if (queryData.id === undefined) {
            title = 'Welcome'
            description = 'Hello, Node.js'
            } else {
            fs.readFile(`data/${queryData.id}`, 'utf8', function(err, desc) {
            title = queryData.id
            description = desc
            })
            }
            var list = '<ul>'
            for (var i = 0; i < filelist.length; i++) {
            list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`
            }
            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 {
            response.writeHead(404)
            response.end('Not found')
            }
            })
            app.listen(3000)

            이렇게 고쳐봤는데 타이틀은 되는데 p태그 내용은 undifined가 뜨네요..
            대체 뭐가 문제인지 모르겠는 혹시 알려 주실분 있으신가요..?
          • 허공
            190510 감사합니다.
          • 이루
            완료
          • youngjin.lee
            Completed
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기