2023-02-11 node.js_9
2023. 2. 11. 01:00ㆍ공부 중/Node.js
WEB2 - Node.js - 생활코딩
수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사
opentutorials.org
생활코딩 node.js 강의 정리
1. 파일 목록 동적으로 생성하기
기존의 파일 목록은 정적으로 작성된 것이다.
변동이 생길 때마다 사람이 수동으로 수정해줘야 했다.
이제 data 디렉터리의 파일 목록을 읽어서 동적으로 파일 목록을 생성해 보도록 하자.
2. fs.readdir
node.js에서 파일 목록을 읽는 방법은 2가지다.
fs.readdir(path[. options], callback): 비동기fs.readdirSync(path[, options]): 동기
강의에서는 fs.readdir을 사용했다.
fs.readdir('./data', function(err, filelist){
...
})./data 아래 파일의 목록을 읽어와서 callback 함수에 filelist라는 매개변수에 전달한다.
callback 함수 내부에는 기존에 작성한 코드 중 template을 완성하고 이를 response.end(template);로전달하는 부분을 붙여 넣는다.
fs.readdir('./data', function(err, filelist){
var template = `
<!DOCTYPE html>
...
<ul>
<li><a href="/?id=black%20tea">홍차</a></li>
<li><a href="/?id=oolang%20tea">우롱차</a></li>
<li><a href="/?id=green%20tea">녹차</a></li>
</ul>
...
`;
response.writeHead(200);
response.end(template);
});이때 기존에 정적으로 구현한 리스트를 수정한다.
fs.readdir('./data', function(err, filelist){
var template = `
<!DOCTYPE html>
...
${list}
...
`;
response.writeHead(200);
response.end(template);
});실제로 filelist에 들어있는 데이터는 파일들의 이름이 담긴 배열이다.
고로 배열에서 꺼내서 하나하나 html tag안에 넣는 작업이 필요하다.
fs.readdir('./data', function(err, filelist){
...
let list = '<ul>';
let i = 0; //이제 var은 사용안하기로 했다. 조금씩 고칠 예정!
while(i < filelist.length){
list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i++;
}
list += '</ul>';
let template = `
...
});
3. function으로 refactoring하기
함수를 정의해서 중복되는 코드를 제거해 보자.
function templateHTML(title, list, description){
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WEB - ${title}</title>
<link rel="stylesheet" href="style.css">
<script src="color.js"></script>
</head>
<body>
<div id="top">
<h1><a href="/">차</a></h1>
<input type="button" value="night" onclick="nightDayHandler(this)"/>
</div>
<div id="grid">
${list}
<div id="article">
<h2>${title}</h2>
${description}
</div>
</div>
</body>
</html>
`;
}template를 완성시켜서 리턴하는 함수를 따로 만들었다.
function templateList(filelist){
let list = '<ul>';
for (let i=0; i<filelist.length; i++){
list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
}
list += '</ul>';
return list;
}list를 만들어서 반환하는 함수를 만들었다.
let list = templateList(filelist);
template = templateHTML(title, list, description);위의 코드들이 자리 잡던 곳에 이제 2줄만 있으면 된다.
오늘은 여기까지
const http = require("http");
const fs = require("fs");
const url = require("url");
function templateHTML(title, list, description){
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WEB - ${title}</title>
<link rel="stylesheet" href="style.css">
<script src="color.js"></script>
</head>
<body>
<div id="top">
<h1><a href="/">차</a></h1>
<input type="button" value="night" onclick="nightDayHandler(this)"/>
</div>
<div id="grid">
${list}
<div id="article">
<h2>${title}</h2>
${description}
</div>
</div>
</body>
</html>
`;
}
function templateList(filelist){
let list = '<ul>';
for (let i=0; i<filelist.length; i++){
list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
}
list += '</ul>';
return list;
}
const app = http.createServer(function (request, response) {
const _url = request.url;
// console.log(_url);
const queryData = url.parse(_url, true).query;
const pathname = url.parse(_url, true).pathname;
if (pathname === "/") {
if (queryData.id === undefined) {
fs.readdir('./data', function(err, filelist){
let title = "Welcome";
let description = "Hello Node.js";
let list = templateList(filelist);
template = templateHTML(title, list, description);
response.writeHead(200);
response.end(template);
});
} else {
fs.readdir('./data', function(err, filelist){
fs.readFile(`data/${queryData.id}`, "utf-8", function (err, description) {
let title = queryData.id;
let list = templateList(filelist);
template = templateHTML(title, list, description);
response.writeHead(200);
response.end(template);
});
});
}
} else {
if (_url == "/style.css") {
response.writeHead(200, { "Content-type": "text/css" });
let fileContents = fs.readFileSync("style.css", "utf-8");
response.write(fileContents);
response.end();
} else if (_url == "/color.js") {
response.writeHead(200, { "Content-type": "text/js" });
let fileContents = fs.readFileSync("color.js", "utf-8");
response.write(fileContents);
response.end();
} else {
response.writeHead(404);
response.end("Not found");
}
}
});
app.listen(3000);feat. 추가로 작업하면서 var을 const와 let으로 교체했다.
'공부 중 > Node.js' 카테고리의 다른 글
| 2023-02-11 node.js_11 (0) | 2023.02.11 |
|---|---|
| 2023-02-11 node.js_10 (0) | 2023.02.11 |
| 2023-01-31 node.js_8 (0) | 2023.01.31 |
| 2023-01-30 node.js_7 (0) | 2023.01.30 |
| 2023-01-23 node.js_6 (0) | 2023.01.23 |