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. 영호팍
    출석스 신기방기!!
  2. Amousk
    좋은 강의 감사합니다.
  3. hoya
    2020.06.18
  4. Katherine Roh
    완료 :)
  5. 사아
    엄청 신기합니다... 재미있네요!
  6. 김재익
    뭔가 해낸기분! 완료
  7. 바다의왕자
    완료
  8. 암말
    신기하네요 ㅋㅋ
  9. 숲을보자
    너무 재밌어요. 무료로 이런 강의를 제공해주셔서 감사합니다.
  10. Eunsung Shin
    완료
  11. 준바이
    위대한 강의
  12. 심여수
    잘 보았습니다.
  13. eddylee123456
    복습
  14. jimmyzip
    심금을 울리는 멘트네요. 데이터가 추가된다고 로직이 변경되어야 하는 상황을 부끄러워해야 한다.
  15. eddylee123456
    완료
  16. Gritter
    감사합니다.
  17. 스티븐잡숴
    완료
  18. 임은정
    완료
  19. JT_brand
    완료~~!!
  20. 김태완
    사소한 문제로 헤맷는데.. 해결하니 뿌듯하네요

    var list '<ul>';
  21. 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
        • 위준우
          완료
        • 자유로움
          완료
        • NihilNcunia
          main.js가 아닌 다른 js파일이 같은 폴더의 아래에 있는데 어째서 main에서는 ./data로 지정하면 잘 돌아가고 같은 폴더에 존재하는 readdir.js에서는 ./data로 지정하면 언디파인드가 뜰까요. 제 뇌로는 이것을 이해할 수가 없습니다.

          두 파일 모두 프로젝트 폴더의 깊은 곳에 위치하는데 하나는 디렉토리를 전부 적어야하고 하나는 data만 적으면 되는 이유가 뭔지 ...
        • supernet
          완료
        • 김동훈
          목록 순서가
          맨 처음에 HTML이었는데
          노드제이에스를 적용하고 나서 알파벳 순서인 CSS가 처음으로 바뀌었는데
          이걸 임의로 자기가 의도한데로 목록 출력하는 방법은 없나요?
        • ㅁㅁ
          저도 오늘 궁금했던 부분인데 도움이 되었습니다 감사합니다
          대화보기
          • ㅁㅁ
            정말 끝내주네요 ㅠㅠ
          • 지미츄
            감사합니다 ㅎㅎ
          • 호두
            고맙습니다
            열정이 생깁니다
          • 권문수
            감사합니다^^ 정말 혁명적이고 좋은걸 배웠네요..
          • 개발
            세미콜론은 없어도 물론 잘 작동 합니다.
            그런데 세미콜론을 왜 불필요하게 넣을까...?
            그것부터 공부하고 자세부터 바로 잡고 보세요.

            그렇게 잘 아시는 분이 여기와서 뭐 보고 있는지...
            대화보기
            • twinpooh@gmail.com
              카렌 에델 웅 완료.
            • jo_onc
              정말 궁금했던 기능입니다!
              감사합니다~
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기