다이나믹 웹페이지
여태까지 배웠던 걸로 다이나믹한 웹페이지를 만들어 볼 것이다.
data 디렉토리를 하나만들고 디렉토리안에 위 화면과 같이 파일을 추가한다.
각 파일에는 다음과 같이 원하는 내용을 추가한다.
var http = require('http');
var fs = require('fs');//fs module (= File System module) 이란, 파일 처리와 관련된 전반적인 작업을 하는 모듈을 말한다.
var url = require('url');
var app = http.createServer(function (request, response) {
var _url = request.url;
var queryData = url.parse(_url, true).query; //query string을 불러 온다.
var title = queryData.id;
if (_url == '/') {
title = 'Welcome'
}
if (_url == '/favicon.ico') {
return response.writeHead(404);
}
response.writeHead(200);
fs.readFile(`data/${queryData.id}`, 'utf8', function (err, description) {
//data 파일을 리드해서 id로 읽어온다.
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
<li><a href="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ol>
<h2>${title}</h2>
<p>
${description} // description에 본문이 들어가 출력된다.
</p>
</body>
</html>
`;
response.end(template);//이 코드가 사용자가 실행하고 싶은 파일을 넣는다.
//javascript를 통해서 우리가 읽어드려야 하는 파일을 만든 것이다.
// 사용자가 생성한 파일을 전송한다.
})
});
app.listen(3000); //포트 번호를 3000번으로 지정
다음과 같이 잘 실행되는 것을 볼 수 있다.
안녕하세요 프론트엔드 개발자입니다. 글을 이전 중입니다.