생활코딩

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. Hoon Ko
    20231016
  2. carpediem
    23.09.03 완료!!
  3. 어흥
    230702
  4. BF_Lee
    23.06.29

    코드를 그대로 따라왔는데 내 출력이 들여쓰기가 2번더되서 왜 되는지 모르겟다
  5. Hojun Song
    2023-04-14 03:11
  6. Nayeong Koo
    23.03.17

    폴더 안에 새로운 파일을 넣기만 하면 알아서 추가된 리스트가 홈페이지에 표시 되도록 하기

    readdir로 폴더 안의 파일 리스트를 불러와서 while 문으로 파일 이름을 하나씩 차례대로 불러와서 원하는 자리에 넣는 방식

    그런데 실제 홈페이지를 운영할 때 이런 방법을 사용한다면 새로 넣은 파일이 목차의 맨 끝으로 가기를 원할 가능성이 높을 것이다. 파일이 abc 순이 아닌 생성 날짜 순서로 배열된다면 요긴하게 쓰일 듯해서 sort와 statSync 등을 이용해서 읽은 파일 목록을 재배열하는 코드를 추가하였다.
  7. 감자
    22.12.02 완료
  8. 당당
    2022.10.21
  9. Sukjoon Lee
    2022.08.11
  10. i_am_es
    2022-08-08
  11. 아캔두잇
    20220804 완료
  12. 키다리아저씨
    220718 완
  13. toonfac
    220714 오후 2시 22분 완료
  14. xogk1128
    22.07.11 완료
  15. DotGaBi95
    data 폴더 안에 들어있는 파일 이름에 원하는 순서로 숫자 입력하시고(ex. 1. HTML, 2. CSS ...) 나중에 CSS 배우셔서 ul태그에서 스타일?만 none으로 바꾸시면 될거에요.
    CSS로 ul태그에서 스타일?을 none으로 바꾸시라고 말씀드린 이유는 ul태그로 하시면 1. HTML, 2. CSS 앞에 점 생기는게 거슬리실 때 그거 지우는 방법입니다.

    6개월 전이시니깐 이미 답을 찾으셨겠네요.
    대화보기
    • kimkk
      완료
    • max2021
      아..진짜 재밌네요 ㅎㅎㅎ프로그래머는 데이터가 변경되었을 때 로직을 바꾸는 것이 부끄럽다. 그리고 그 부끄러움을 하나 덜었다. 기억에 남네요!
    • 초딩 개발자
      2021/12/02
    • 김관호
      21.11.23.
    • 일억개
      내 삼년 되돌려줘...
      대화보기
      • pdpd
        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
        완료
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기