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. 정환
    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가 처음으로 바뀌었는데
      이걸 임의로 자기가 의도한데로 목록 출력하는 방법은 없나요?
    • ㅁㅁ
      저도 오늘 궁금했던 부분인데 도움이 되었습니다 감사합니다
      대화보기
      • ㅁㅁ
        정말 끝내주네요 ㅠㅠ
      • 지미츄
        감사합니다 ㅎㅎ
      • 호두
        고맙습니다
        열정이 생깁니다
      • 권문수
        감사합니다^^ 정말 혁명적이고 좋은걸 배웠네요..
      • Hyung Jun Choi
        제가 세미콜론 넣지 말라고 했나요?
        안넣어도 정상적으로 작동한다고 첨언한것 뿐입니다.
        해당 사항은 js예제들 찾아보면 엄청나게 많이 나옵니다. 제가 특출나고 잘 알아서 그런게 아니구요.
        가계로 시비걸지마시고 갈길 가세요 ^^
        대화보기
        • 개발
          세미콜론은 없어도 물론 잘 작동 합니다.
          그런데 세미콜론을 왜 불필요하게 넣을까...?
          그것부터 공부하고 자세부터 바로 잡고 보세요.

          그렇게 잘 아시는 분이 여기와서 뭐 보고 있는지...
          대화보기
          • twinpooh@gmail.com
            카렌 에델 웅 완료.
          • jo_onc
            정말 궁금했던 기능입니다!
            감사합니다~
          • raiN.Shower
            위에 적힌 코드중 첫번째 else 다음, 45,46행에
            var title = 'Welcome';
            var description = 'Hello, Node.js';
            는 불필요한 부분입니다.
            뭐, 적혀 있어도 잘 동작하지만요~
          • 김나다
            오오!!!!!
          • 족발
            대박사건 와!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
          • meanyMina
            저도 초보자입니다만, 아래 내용이 도움이 되길 바랍니다.
            https://blog.naver.com......872 <-이 링크 중 3. arguments 가 잘 설명해줍니다.
            : function에서 쓰인 "이 arguments는 함수 내부에서 지역변수처럼 사용되며, 함수 외부에서는 사용할 수 없습니다."
            대화보기
            • 박유
              $description은 var description이라 변수 선언을 한적이 없는것 같은데 변수 선언이랑 그 기능에 대한 코드 작성없이 $description은 텍스트를 불러오게 약속이 되어있어서 작동이 되는 건가요?
            • Gimme_Gsuit
              감사합니다.
            • Hyung Jun Choi
              js는 원래 세미콜론 없이도 잘 동작하는 언어입니다..!
              대화보기
              • moon
                감사합니다.
              • Seo Yun Seok Tudoistube
                SQL 도 MS-SQL, ORACLE PL/SQL 상관없이 표준으로 쓸 수 있는 SQL 처럼
                자바스크립트도 ES6 ... 형식 상관없이 표준으로 쓰는 표기법이 있는지 궁금합니다.
                감사합니다^^!
              • JongHoan Lim
                39 line 말미에 ';'가 있어야 할것 같은데 없어도 동작하는군요.
                response.writeHead(200);
                response.end(template);
                });
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기