🎈생활코딩 WEB2 - Node.js 강의를 듣고 정리한 것임을 밝힙니다.
(https://www.opentutorials.org/course/3332)
URL의 이해
웹페이지를 보다보면 /어쩌구저쩌구/어쩌구 까지는 같은데 /어쩌구저쩌구/?id= .. 이렇게 뒤의 id값만 다른 페이지들을 볼 수 있다.
같은 페이지를 요청해서 받았다고 해도 key값이 달라지면서 클라이언트(웹브라우저)에게 서로 다른 페이지를 보내고 있는 것
http://opentutorials.org:3000/main?id=HTML&page=12를 예시로 들어보자.
http: 프로토콜(통신규칙). 어떤 방식으로 서버와 통신할 것인가?를 결정한다.
웹브라우저와 웹서버가 서로 서버를 주고받기 위해 설정한 통신 규칙인 셈이다.
opentutorials.org: 도메인. 특정한 인터넷에 연결되어있는 컴퓨터를 가르키는 주소
3000: 포트번호. 여러 서버 중에서 3000번 포트에 연결 되어있는 서버와 통신하도록 해주세요! 라는 뜻이다.
main: path. 디렉토리의 어떤 파일에 접근할 것인가?
id=~ : query string. 물음표(?)로 시작하기로 약속 되어있다.
id가 HTML이고 page가 12라는 뜻
URL을 통해서 입력된 값 사용하기
query string에 따라서 다른 정보를 보여주도록 해보자.
var http = require('http');
var fs = require('fs');
var url = require('url'); //url을 요
var app = http.createServer(function(request,response){
var _url = request.url;
var queryData = url.parse(_url, true).query; //url의 query string
console.log(queryData.id);
if(_url == '/'){
_url = '/index.html';
}
if(_url == '/favicon.ico'){
return response.writeHead(404);
}
response.writeHead(200);
response.end(queryData.id); //사용자가 접속한 url에 따라 파일을 읽어줌
});
app.listen(3000);
동적인 웹페이지 생성하기
- 우선
1.html에 있던 코드들을 모두 복사해 template 변수에 할당한다.
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>HTML</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>
`;어느페이지를 눌러도 제목이 HTML이라고 뜰 것이다.
- query string에 따라 다른 제목을 보여주도록, HTML이라고 적혀 있는 부분을
${queryData.id}로 고쳐준다.
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${queryData.id}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>${queryData.id}</h2>
...
</body>
</html>
`;
response.end(template); //사용자가 접속한 url에 따라 파일을 읽어줌- href 연결을 id 값에 맞추어 설정해준다.
var template = `
...
<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>
...
`;
내용도 HTML/CSS/JavaScript에 맞추어 다르게 나올 수는 없을까?
파일 읽어오기
fs.readFile()을 이용한다.
공식문서: https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback
콜백함수 안의data로 데이터가 넘어옴.
이미 되어있어서 따로 하지는 않았지만, 원래는 위에 const(혹은 var) fs = require('fs'); 라고 적어주어야 한다.
//main.js
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
//파일 경로: data/query string, utf8로 읽어옴
//data 대신 좀 더 직관적일 수 있게 description 변수를 사용했다.
var template = `
<!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>${description}</p>
</body>
</html>
`;
response.end(template);
})