함수를 통해 중복 줄이기
"코드에서 중복은 최대한 줄이는 것이 좋다"
현재 코드에서 중복되는 부분을 함수화를 통해 따로 분리시킨다.
(중복되는 부분인 html코드 묶음을 return 값으로 넣어준다.
function templateHTML() {
return `
<!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>
`
}그 후, 해당 리턴값이 담겨있던 변수인 template의 값을 위의 함수 리턴값과 연결시켜준다.
var template = templateHTML();리턴값에 쓰인 변수는 함수의 입력값으로 받을 수 있도록 매개변수를 사용한다.
이 때,
<h2>${title}</h2>
<p>${description}</p>이 부분은, 홈페이지의 양식에 따라 형태가 달라질 수 있기 때문에 더 다양한 형태를 위하여
${body}로 묶어준다
function templateHTML(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>
`
}함수의 매개변수에 맞춰서, 함수가 쓰이는 곳에 인자로 올바른 입력값을 넣어준다.
var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);이렇게 함수를 활용하면
- 코드의 길이도 줄어들고,
- 함수명, 매개변수를 통해 해당 로직의 목적이 무엇인지를 명확히 알 수 있다.
if문과 else문 내부의 또다른 중복 파트인 <ul>태그를 list변수로 구현했던 코드도 함수화한다.
function templateList(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>';
return list;
}매개변수는 반복문에 쓰이는 filelist.length를 위해서 filelist를 전달해줄 수 있도록 한다.
두 함수를 통해 중복되는 부분을 처리한 뒤 정리된 최종 main.js는 다음과 같다.
var http = require('http');
var fs = require('fs');
var url = require('url');
//new
function templateHTML(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>
`
}
function templateList(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>';
return list;
}
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 = templateList(filelist); //new
var template = templateHTML(title, list, `<h2>${title}</h2>${description}`); //new
response.writeHead(200);
response.end(template);
})
} else {
fs.readdir('./data', function(error, filelist){
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
var title = queryData.id;
var list = templateList(filelist); //new
var template = templateHTML(title, list, `<h2>${title}</h2>${description}`); //new
response.writeHead(200);
response.end(template);
});
});
}
} else {
response.writeHead(404);
response.end('Not found');
}
});
app.listen(3000);
뭐든 다해보려는 공대생입니다