node.js는 프로그래밍적으로 사용자에게 전송할 데이터를 생성한다.
var http = require("http");
var fs = require("fs");
var app = http.createServer(function (request, response) {
var url = request.url;
if (request.url == "/") {
url = "/index.html";
}
if (request.url == "/favicon.ico") {
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname + url));
});
app.listen(3000);response.end(fs.readFileSync(__dirname + url));
예를 들자면 여기에 이부분이 주소가 되고 사용자에게 전송해줄 데이터이다.
node.js를 알려면 url에 대해서 알아야 한다.
http => 서버와 브라우저가 통신하기 위한 규약
host => 인터넷에 접속 되어 있는 컴퓨터
port => 한 컴퓨터에 여러 서버가 있을 수도 있는데 그 중에 어디인지
path => 파일 주소
query string => node.js와 연관, 이 안의 값이 무엇이냐에
따라서 사용자에게 보여지는 내용이 달라진다.
예를 들어서 url parse를 import 하고 response.end(queryData.id)를 넣어준 후에
http://localhost:3000/?id=hi
라고 주소를 치면 브라우저 화면에 hi라고 응답값을 주는 것을 볼수있다.
아래는 쿼리 주소/url주소 (queryData.id)에 따라서 title을
화면에 동적으로 다르게 나타내주는 예시이다.
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;
console.log(queryData.id);
if (_url == "/") {
_url = "/index.html";
}
if (_url == "/favicon.ico") {
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
response.end(queryData.id);
});
app.listen(3000);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);
var templete = `<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">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><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.
<img src="coding.jpg" width="100%">
</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.
</p>
</body>
</html>`;
response.end(templete);
});
app.listen(3000);이번에는 동적으로 파일을 읽어드리는 방법에 대해서 실습해본다.
항상 주의할 점은 읽어올 파일이 같은 폴더 안에 있어야 한다.
sample.txt라는 파일을 같은 파일 안에 만들고
(예를들면 여기서는 main.js가 같이 있는 파일)
아래의 함수를 추가해주면 된다.
var fs = require("fs");
fs.readFile("sample.txt", "utf8", function (err, data) {
console.log(data);
});
위에서 하던 실습을 이어서 주소에 html, css, javascript에 따라
본문 안의 내용을 바꾸고 싶으면 본문안의 내용을 파일로 따로 저장해준다음 함수를 사용해서 불러와주기를 하면 된다.
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);
var passage = "";
fs.readFile(`data/${queryData.id}`, "utf8", function (err, data) {
if (err) {
passage = "file read failed";
} else {
passage = data;
}
var templete = `<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">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>${passage}</p>
</body>
</html>
`;
response.end(templete);
});
});
app.listen(3000);
참고자료 :
https://sirius7.tistory.com/48
https://opentutorials.org/module/3549/21140
연습일지