node.js로 파일목록 알아내기
현재 directory 상태를 정리하자면
- main.js : 웹페이지를 구현하는 코드
- 모든 페이지를 구성하는 html 코드들
📁data directory
- CSS : CSS페이지의 본문을 담은 txt
- HTML : HTML페이지의 본문을 담은 txt
- JavaScript : JavaScript페이지의 본문을 담은 txt
📁nodejs directory
- readdir.js : 아래와 같은 실습 코드
var testFolder = './data';
var fs = require('fs');
fs.readdir(testFolder, function(error, filelist){
console.log(filelist);
})로 이루어져있다.
readdir.js라는 코드를 실행하면
프롬프트에
가 출력된다.
즉, 우리는 data directory에 담긴 파일의 목록을
- nodejs의 FileSystem 모듈(줄여서 fs)를 통해서 알아낼 수 있고,
- 이에 필요한 함수는 fs.readdir이다.
- testFolder변수의 값으로 알아내고자하는 파일의 경로를 입력
- 실행되는 function의 filelist라는 인자에는 지정한 경로 내의 파일 목록이 담기는 것을 알 수 있다.
글목록 출력하기
이전까지 만들었던 웹페이지에는 다음과 같은 글목록의 링크들이 있다.
또 이러한 글목록을 구현하는 코드는 다음과 같았다.
<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 directory 내에 파일이 추가/삭제/수정되었을 때,
즉 출력해야할 목록의 항목에 변경사항이 생겼을 때,
<li><a href="/?id=new">new</a></li> 와 같은 코드 한줄을 추가로 작성하거나 삭제 하는 등 소스코드를 열어 코드를 변경해야만 한다.
이러한 약점을 개선하기 위에 위의 파일목록 알아내기를 활용할 수 있다.
기존의 글목록을 구현한 <ul>태그를 list라는 변수로 묶어주면 다음과 같다.
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 directory 목록을 배열로 출력할 수 있음을 알 수 있었다.
<ul>태그로 묶인 list의 항목들은 data directory 목록들과 동일하게 구성된다.
따라서, readdir를 통해 도출한 배열이 변수 list의 항목을 구성할 수 있도록 구현하면, data directory의 항목이 변경될 때 코드를 직접 변경하지 않고도 자동으로 변동사항이 반영될 수 있다.
최종적으로 변수 list가 가지는 값은 다음과 같다.
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>'; //태그의 끝💡 filelist에 있는 배열을 반복문으로 처리하여 list 태그에 목록 요소들을 추가하기
-
nodejs가 파일목록을 알아낸 이후에 취해야할 행동을 readdir의 function 내부에 구현한다.
취해야할 행동 : 알아낸 파일목록을 list에 반영하기 -
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){
//nodejs가 파일목록을 알아낸 뒤 실행해야할 코드를 function 내부에 작성한다
fs.readdir('./data', function(error, filelist){
var title = 'Welcome';
var description = 'Hello, Node.js';
//list 변수에 <ul>태그 구현하기
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>';
//${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 {
//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);