Query String 에 따라서 본문 바꾸기

이제 main.js 에 모든 내용을 작성하지 않고 HTML, CSS, JavaScript 파일을 각각 생성하여 사용해보자.
fs 모듈의 readFile() 함수를 이용하여 원하는 파일을 읽어들일 수 있다

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 title = queryData.id;
	console.log(queryData.id);
	if (_url == '/') {
		title = 'Welcome';
	}
	if (_url == '/favicon.ico') {
		response.writeHead(404);
		response.end();
		return;
	}
	response.writeHead(200);
	fs.readFile(`../data/${queryData.id}`, 'utf8', function (err, description) {
		var template = `
		<!doctype html>
		<html>
		<head>
		  <title>WEB1 - ${title}</title>
		  <meta charset="utf-8">
		</head>
		<body>
		  <h1><a href="index.html">WEB</a></h1>
		  <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>
		  <h2>${title}</h2>
		  <p>${description}</p>
		</body>
		</html>
		`;
		response.end(template);
	})
});
app.listen(3000);

HTML

<a href="<https://www.w3.org/TR/html5/>" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a>
is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive
HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for the appearance of the document.
</p>
<p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other
	objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured
	documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other
	items. HTML elements are delineated by tags, written using angle brackets.

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

JavaScript

JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.

참고