728x90
App - 동적인 웹 페이지 만들기
1. template 변수에 정적인 html 코드 붙여넣기
2. 그 중 쿼리 스트링에 따라 바뀌었으면 하는 부분 템플릿 리터럴 형식으로 바꾸기
3. 링크들도 각 쿼리 스트링으로 변경하기
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') {
return response.writeHead(404);
}
response.writeHead(200);
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="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ol>
<h2>${queryData.id}</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(template); //template 문자열 응답
})
app.listen(3000);
코드 개선하기
1. queryData.id => title 변수지정
2. WEB 클릭시 index.html(정적파일)이 아닌 root페이지로 이동하고
3. WEB클릭시 undefinded가 아닌 Welcome이라는 제목을 표시하게
4. 순서가 있는 목록을 순서가 없는 목록으로
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);
var title = queryData.id;
if(_url == '/') {
title = 'Welcome'; //요청받은 URL이 /(root)이면 실행
_url = '/index.html';
}
if(_url == '/favicon.ico') {
return response.writeHead(404);
}
response.writeHead(200);
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><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(template); //template 문자열 응답
})
app.listen(3000);
728x90
'{ "Hello World!" }; > Node.js' 카테고리의 다른 글
| (Node.js) 패키지 매니저(npm)와 PM2 (1) | 2023.12.10 |
|---|---|
| (Node.js) 동기, 비동기 그리고 콜백 (0) | 2023.12.10 |
| TIL 231210 (0) | 2023.12.10 |
| TIL 231207 (1) | 2023.12.08 |
| TIL 231205 (1) | 2023.12.05 |