C-log

📗Nodejs : section24 - readdir으로 파일목록 만들기 본문

📗Nodejs/⚡ver.0

📗Nodejs : section24 - readdir으로 파일목록 만들기

4:Bee 2024. 1. 11. 15:31
728x90

우선 readdir을 통해서 특정 파일 목록에 있는 이름들을 가지고 와본다. 아래 코드를 통해서 코드와 실행 결과를 살펴본다.

let testFolder = './data';
let fs = require('fs');
//읽어낼 폴더 위치, 함수 매개변수는 error 이후 filelist라는 변수에 반환 받은 값 저장
fs.readdir(testFolder, function (error, filelist) {
  console.log(filelist);
})
 
[nodemon] starting `node readdir.js`
[ 'CSS', 'HTML', 'JavaScript' ]
[nodemon] clean exit - waiting for changes before restart
 

이를 이용해서 우리가 만든 홈페이지에 적용해보자. 필요한 코드 부분만 보면 아래와 같다.

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function (request, response) {
   ...
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);
      })
  ...
 

readdir 첫 번째 요소를 통해서 폴더 안에 있는 모든 요서들을 파싱하면서 readdir 두 번째 요소에 들어가는 filelist에 값들이 담긴다. 그것들을 while문을 이용해서 각 값들을 템플릿으로 li 태그로 만들어주고 만들어진 문자들을 list에 담고 랜더링이 되는 template변수에 list를 템플릿 형식으로 넣어주면 된다. 이를 통해서 확인 할 수 있는 것은 query 문자열은 a태그를 통해서 생성이 되고 그에 해당하는 값을 readFile이나 readdir을 통해서 해당 값이 선택되며 랜더링이 되는 방식인 것이다. 그래서 우리가 처음에 목표 했던 모습의 url과 형태를 만들어 내려면 이 형태를 준수하며 재작하면 되지 않을까 한다. 뿐만 아니라 data를 담아내고 있는 폴더와 파일들의 형태 또한 고민해 볼 필요가 있다.

728x90
저작자표시

'📗Nodejs > ⚡ver.0' 카테고리의 다른 글

📗Nodejs : plus Alpha - 분석하기  (0) 2024.06.17
📗Nodejs : section26 - 함수를 이용해서 정리 정돈하기  (0) 2024.06.17
📗Nodejs : section19 - NotFound처리와 홈페이지 제작구현  (0) 2024.01.11
📗Nodejs : section13 - readFile  (0) 2024.01.09
📗Nodejs : section11 - URL, query string-2  (0) 2024.01.09
'📗Nodejs/⚡ver.0' Related Articles more
Comments