생활코딩

Coding Everybody

코스 전체목록

닫기

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. Sukjoon Lee
    2022.08.11
  2. i_am_es
    2022-08-08
  3. 아캔두잇
    20220804 완료
  4. 키다리아저씨
    220718 완
  5. toonfac
    220714 오후 2시 22분 완료
  6. xogk1128
    22.07.11 완료
  7. DotGaBi95
    data 폴더 안에 들어있는 파일 이름에 원하는 순서로 숫자 입력하시고(ex. 1. HTML, 2. CSS ...) 나중에 CSS 배우셔서 ul태그에서 스타일?만 none으로 바꾸시면 될거에요.
    CSS로 ul태그에서 스타일?을 none으로 바꾸시라고 말씀드린 이유는 ul태그로 하시면 1. HTML, 2. CSS 앞에 점 생기는게 거슬리실 때 그거 지우는 방법입니다.

    6개월 전이시니깐 이미 답을 찾으셨겠네요.
    대화보기
    • 완료
    • max2021
      아..진짜 재밌네요 ㅎㅎㅎ프로그래머는 데이터가 변경되었을 때 로직을 바꾸는 것이 부끄럽다. 그리고 그 부끄러움을 하나 덜었다. 기억에 남네요!
    • 초딩 개발자
      2021/12/02
    • 김관호
      21.11.23.
    • 일억개
      내 삼년 되돌려줘...
      대화보기
      • 211007
      • 별거
        성공적으로 하긴 했는데, 파일이 ABC 순으로 나오는게 좀 그렇네요.
        전 HTML, CSS, JavaScript 순으로 하고 싶은데 CSS, HTML, JavaScript 순으로 되어 고칠 수 없네요.
        해결법이 있을까요?
      • 크리스
        Node js는 처음부터 너무 어렵고 이해하기 힘들었는데 이번 시간에 지난 시간동안 이해되지 않았던 것들이 한꺼번에 이해되네요 너무 혁명적입니다
      • 졸작완성하자
        210907 완료
      • 너도나도코오딩
        혁명 그 자체..
      • 승뇽뇽
        nodejs 파일 생성하고 결과 보는데 진짜 혁명이다 라고 입에서 절로 나오네 ...
      • 박사장
        21 07 29 완료!
      • labis98
        20210722 completed!
      • Duke
        2021.07.18
      • 조재령
        중간에 중괄호 꼬여서 짜릿한 시간 보냈지만
        재밌습니다!
      • Jeong Il Haan
        20210416
      • byoonn
        완료
      • 21.02.25
      • chimhyangmoo
        21.02.19
      • 두울리
        2021.02.15 - 완료
      • jeisyoon
        2021.02.08 App - 글목록 출력하기 완료
      • 마아앙
        2021.02.01
      • 임찬혁
        완료!! 이번 내용 너무 신기하고 재미 있었습니다.
      • hanel_
        web3 - ajax와 기능이 비슷하다고 생각되는데 맞나요??
      • 뭄수
        완료
      • Noah
        2021.01.04 완료!
      • 손민철
        20/12/29 완료
      • 생활둘기
        2020 12 25
      • kkn1125
        20.12.21 완료~!
      • 옹옹
        20201123
      • Sunny
        2020.11.03.TUE.
      • ㅇㄹ
      • 콜라
        20201014 완료
      • Yong Hyun Lee
        완료 201002
      • CH Yim
        완료
      • 박병진
        완료!
      • vampa
        2020.09.09
      • 마준
        완료
      • QQIMI
        `(억음부호) 랑 '(작은따옴표)랑 다른건지 몰라서 한참 헤멨네요...
      • 거대따릉이
        만약에 data 안에 파일 이름을 CSS.txt 같은 식으로 하셨으면

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

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

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

        도움 되셨으면 좋겠어요 ^^
        대화보기
        • 누누
          2020.07.31 완료 다음주까지 WEB2 다듣기 아자아자
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기