파일 목록 읽어들이기
id에 해당하는 파일을 추가할 때마다 자동으로 메뉴가 늘어나도록 세팅하기 위해, 로컬에서 파일 목록을 읽어오는 기능을 학습한다.
실습코드
var testFolder = './data';
//현재 위치(=main.js파일 위치) 하위의 data 폴더를 대상으로 한다
var fs = require('fs');
fs.readdir(testFolder, function(error, filelist){
console.log(filelist);
})실행결과
D:\study\Nodejs>node readdir.js
[ 'CSS', 'HTML', 'JavaScript' ]파일 이름을 배열로 읽을 수 있음을 확인했다. 그러면 파일만 추가하면 알아서 하위메뉴가 생성되도록 main을 수정할 수 있을 것 같다.
파일 목록 출력하기
폴더의 파일 이름을 읽어 자동으로 메뉴를 생성하는 코드를 추가해 본다.
실습코드(수정 부분)
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>
`;fs.readdir 을 사용하여 조금 전 해 본 것처럼 data 폴더 내의 파일 이름을 읽어들이는 것으로 시작한다.
그리고 template중 원래 메뉴명이 하드코딩되어 있었던 부분을 ${list}로 교체하고, list 변수를 정의해 준다. 형태는 ul코드 사이에 filelist 길이만큼 반복적으로 파일이름이 들어간 메뉴명을 태그.
이렇게 전체 수정을 진행하고 나면 data 폴더에 파일이 추가되면 코드를 수정할 필요 없이 메뉴에 바로 반영되는 것을 알 수 있다. 기가 막힌다. 👍
실습코드(전체)
더보기
var http = require('http');
var fs = require('fs');
var url = require('url'); //url모듈 사용
var app = http.createServer(function(request,response){
var url_add = request.url;
var queryData = url.parse(url_add, true).query;
var pathname = url.parse(url_add, 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 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}`, 'utf-8', 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 {
// 존재하지 않는 pathname일 경우 에러처리
response.writeHead(404);
response.end('Not found');
}
});
app.listen(5000);'공부 저장소 > Node.js' 카테고리의 다른 글
| [생활코딩 Node.js] 11. PM2 사용하기 (0) | 2022.08.04 |
|---|---|
| [생활코딩 Node.js] 10. 함수를 이용한 코드 정리 (0) | 2022.07.31 |
| [생활코딩 Node.js] 8. 홈 페이지 만들기 (0) | 2022.07.31 |
| [생활코딩 Node.js] 7. 에러 페이지 만들기 (0) | 2022.07.31 |
| [생활코딩 Node.js] 6. 파라미터 입력하기 (0) | 2022.07.31 |