본문 바로가기
Node.js

20210328 Nodejs02 파일목록 읽어내기(readdir), 글목록 출력하기, 함수로 정돈하기, 생활코딩

라쿤코드 2021. 3. 28. 21:02

생활코딩

  • 생활코딩 : Node.js 수업
  • 생활코딩님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다.

 

Node.js

APP - 홈페이지 구현

  • 현재 pathname으로는 각각의 페이지를 구분이 불가함
  • 그러면 home 인 경우 즉, queryData(queryString)이 없는 경우에 표시하고자 한다.
  • 구조 : if pathname을 통해서 구분하고 -> 내부에서는 if queryData.id을 통해서 pathname만 있는 상황과, 그외의 queryString이 있는 상황의 조건을 걸어 표시되는 화면을 다르게 구성함
var http = require('http');
var fs = require('fs');
var url = require('url');


var app = http.createServer(function(request,response){
    var _url = request.url; // request.url : pathname + queryString = path
    var queryData = url.parse(_url, true).query; // queryString
    var pathname = url.parse(_url, true).pathname; // pathname

    // pathname check : '/'
    if (pathname === `/`) {
      // queryString check 01 - undefined
      if(!queryData.id) {
          // only home
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var template = `
          <!doctype html>
          <html>
          <head>
          <title>WEB1 - ${title}</title>
          <meta charset="utf-8">
          </head>
          <body>
          <h1><a href="/">WEB</a></h1>
          <ul>
          <li><a href="/?id=HTML">HTML</a></li>
          <li><a href="/?id=CSS">CSS</a></li>
          <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ul>
          <h2>${title}</h2>
          <p>${description}<p>
          </body>
          </html>
          `;
          response.writeHead(200); // status(result)
          response.end(template); // render

      } else {
        // queryString check 02 - exist
        fs.readFile(`data/${queryData.id}`, 'utf8', (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>
          <ul>
          <li><a href="/?id=HTML">HTML</a></li>
          <li><a href="/?id=CSS">CSS</a></li>
          <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ul>
          <h2>${title}</h2>
          <p>${description}<p>
          </body>
          </html>
          `;
          response.writeHead(200); // status
          response.end(template); // render
        });
      }

    } else {
      // pathname check - not '/'
      response.writeHead(404); // status
      response.end('Not found'); // render
    }

  });
  // port number
  app.listen(3000);




Node.js 파일 목록 알아내기(directory list)

  • filesystem 모듈의 readdir 함수
  • fs.readdir(path[, options], callback)
    • Options : encoding (Default utf-8) , withFileTypes(Default false)
    • Callback : err , files
const testFolder = 'data';
const fs = require('fs');

fs.readdir(testFolder, (err, files) => {
    console.log(files);
    files.forEach((file) => {
        console.log(file);
    })
});


// [ 'CSS', 'HTML', 'JavaScript' ]

// CSS
// HTML
// JavaScript




App 제작 - 글목록 출력하기

  • 개선할 부분
var list = `<ul>
            <li><a href="/?id=HTML">HTML</a></li>
            <li><a href="/?id=CSS">CSS</a></li>
            <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ul>`

 

  • data가 추가되면 li가 생성되게 하고, 해당 title도 변경하고, description도 반영되게 하는 법
    • data 폴더의 파일 이름을 자동으로 가져오게 해야 함
    • readdir함수 사용해서 data 폴더의 파일 이름들을 가져오게 함
    • 가져온 파일이름 들을 활용해서 render할 ul태그와 li 태그를 구성하여 변수에 저장

 

  • while 문을 통한 li 요소 추가
fs.readdir('./data', (err , files) => {
          var list = '<ul>';
          var i = 0;
          while(i < files.length) {
            list = list + `<li><a href="/?id=${files[i]}">${files[i]}</a></li>`
            // i = i + 1 
            i += 1        
            }
            list = list + '</ul>';

 

  • forEach를 통핸 li요소 추가
 fs.readdir('./data', (err , files) => {
          var list = '<ul>';
         files.forEach((file) => {
            list = list + `<li><a href="/?id=${file}">${file}</a></li>`
         })
            list = list + '</ul>';

 

  • queryString 예외 처리
    • includes함수를 사용해서 queryString으로 들어온 id가 data파일에 있는지 확인하는 코드를 넣어, 주소창에 존재하지 않는 id가 나오면 not found를 출력하게 함
 fs.readdir('./data', (err , files) => {
    if (files.includes(queryData.id)){
      var list = '<ul>';
      files.forEach((file) => {
        list = list + `<li><a href="/?id=${file}">${file}</a></li>`
      });
        list = list + '</ul>';
      fs.readFile(`data/${queryData.id}`, 'utf8', (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>
        ${description}
        </body>
        </html>
        `;
        response.writeHead(200);
        response.end(template); 
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    };
  });

 

  • 코드 전문
var http = require('http');
var fs = require('fs');
var url = require('url');


var app = http.createServer(function(request,response){
    var _url = request.url; // request.url은 요청한 pathname + queryString = path
    var queryData = url.parse(_url, true).query; // queryString
    var pathname = url.parse(_url, true).pathname;
    if (pathname === `/`) {
      if(!queryData.id) {
        fs.readdir('./data', (err , files) => {
          var list = '<ul>';
         files.forEach((file) => {
            list = list + `<li><a href="/?id=${file}">${file}</a></li>`
         })
            list = list + '</ul>';

          // var list = `<ul>
          //   <li><a href="/?id=HTML">HTML</a></li>
          //   <li><a href="/?id=CSS">CSS</a></li>
          //   <li><a href="/?id=JavaScript">JavaScript</a></li>
          // </ul>`

          var title = 'Welcome';
          var description = 'Hello, Node.js';
          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', (err , files) => {
          if (files.includes(queryData.id)){
            var list = '<ul>';
            files.forEach((file) => {
              list = list + `<li><a href="/?id=${file}">${file}</a></li>`
           });
              list = list + '</ul>';
            fs.readFile(`data/${queryData.id}`, 'utf8', (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>
              ${description}
              </body>
              </html>
              `;
              response.writeHead(200);
              response.end(template); 
            });
          } else {
            response.writeHead(404);
            response.end('Not found');
          };
        });
      };
    } else {
    response.writeHead(404);
    response.end('Not found');
  }

});
app.listen(3000);



  • data 폴더에 Nodejs 파일 추가



  • 브라우저에 바로 반영되어 추가 됨



App - 함수를 이용해서 정리 정돈하기

  • 코드가 많아지면 복잡해지기 때문에 사람이 감당할 수 있게 함수를 사용하여 정리.
  • 함수를 사용하는 예시를 보여주는 것이지 더 함수화 시키는 것은 가능 함
var http = require('http');
var fs = require('fs');
var url = require('url');

// render 할 HTML을 구조화 시키는 함수
const tmeplateHTML = (title, list, body) => {
  return `
  <!doctype html>
  <html>
  <head>
  <title>WEB1 - ${title}</title>
  <meta charset="utf-8">
  </head>
  <body>
  <h1><a href="/">WEB</a></h1>
  ${list}
  ${body}
  </body>
  </html>
  `;
}

// data 폴더의 file들을 ul li로 만들어 추가해주는 함수
const templateList = (files) => {
  var list = '<ul>';
  files.forEach((file) => {
     list = list + `<li><a href="/?id=${file}">${file}</a></li>`
  })
  list = list + '</ul>';
  return list;
}


var app = http.createServer(function(request,response){

    var _url = request.url; // request.url은 요청한 pathname + queryString = path
    var queryData = url.parse(_url, true).query; // queryString
    var pathname = url.parse(_url, true).pathname;

    if (pathname === `/`) {


      if(!queryData.id) {

        fs.readdir('./data', (err , files) => {
          var list = templateList(files); // data를 li에 추가해주는 함수
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var template = tmeplateHTML(title, list, `<h2>${title}</h2>
          <p>${description}<p>`); // render할 HTML를 구조화 시켜주는 함수 
          response.writeHead(200);
          response.end(template);
        });

      } else {

        fs.readdir('./data', (err , files) => {
          if (files.includes(queryData.id)){
            fs.readFile(`data/${queryData.id}`, 'utf8', (err, description) => { 
              var list = templateList(files); // data를 li에 추가해주는 함수
              var title = queryData.id;
              var template = tmeplateHTML(title, list, `<h2>${title}</h2>
                <p>${description}<p>`); // render할 HTML를 구조화 시켜주는 함수            
              response.writeHead(200);
              response.end(template); 
            });
          } else {
            response.writeHead(404);
            response.end('Not found');
          };
        });

      };


    } else {
    response.writeHead(404);
    response.end('Not found');
  }

});

app.listen(3000);

'Node.js' 카테고리의 다른 글

20210331 Nodejs05 모듈 활용, 입 출력 정보 보안(XSS), html entities, sanitize-html, pm2(kill, --no-daemon, --watch, --ingnore), 생활코딩  (0) 2021.03.31
"20210330 Nodejs04 update, delete 기능 구현하기, 객체 사용을 통한 정리(refactoring),모듈 형식, 생활코딩  (0) 2021.03.30
20210329 Nodejs03 Sync & Async , CallBack, Package Manager, PM2, HTML Form, POST데이터 받기(stream, request.on), 파일생성(writeFile), Redirection(writeHead(302)), 생활코딩  (0) 2021.03.29
"20210326 Nodejs01 환경설정, TASK 설정, 기본적인 서버코드구조, URL(queryString), 파일읽기(fs.readfile) 및 본문 파일처리, process.argv(CLI 입력 값 가져오기), not found(200, 404상태코드 처리), 생활코딩  (0) 2021.03.27

'Node.js' Related Articles

티스토리툴바