728x90
https://opentutorials.org/course/3332/21028
생활코딩님의 Node.js강의를 참고하였습니다.
1.쿼리 데이터 저장
// 쿼리 데이터의 'id' 값을 title 변수에 저장합니다.
var title = queryData.id;
2. 동적으로 생성된 HTML 템플릿정의
// 동적으로 생성된 HTML 템플릿을 정의합니다.
// title 변수의 값에 따라 페이지 제목과 본문의 제목이 변경됩니다.
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><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 템플릿을 클라이언트에게 전송하여 응답을 종료합니다.
response.end(template);
3.템플릿 리터럴
템플릿 리터럴은 백틱(`)으로 감싸여 있으며, 문자열 내에 ${} 구문을 사용하여 변수를 포함할 수 있습니다.
${} 안에 넣는 변수나 표현식은 템플릿 리터럴이 평가될 때 문자열로 변환되어 포함됩니다.
<title>WEB1 - ${title}</title>
// HTTP 모듈을 불러옵니다. 이 모듈을 사용하여 HTTP 서버를 생성할 수 있습니다.
var http = require('http');
// 파일 시스템 모듈을 불러옵니다. 파일을 읽고 쓰는 작업에 사용됩니다.
// (이 코드에서는 사용되지 않지만 파일 읽기 등을 위해 로드됨)
var fs = require('fs');
// URL 모듈을 불러옵니다. URL을 파싱하거나 조작할 때 사용됩니다.
var url = require('url');
// HTTP 서버를 생성합니다. 서버는 클라이언트로부터 요청(request)을 받을 때마다 이 콜백 함수가 실행됩니다.
var app = http.createServer(function(request, response) {
// 요청된 URL을 가져와 _url 변수에 저장합니다.
var _url = request.url;
// URL을 파싱하여 쿼리 문자열(query string)을 추출하고 queryData 변수에 저장합니다.
// true를 사용하여 쿼리 문자열을 객체로 변환합니다.
var queryData = url.parse(_url, true).query;
// 쿼리 데이터의 'id' 값을 title 변수에 저장합니다.
var title = queryData.id;
// 콘솔에 파싱된 쿼리 데이터를 출력합니다.
console.log(queryData);
// 요청된 URL이 '/'(루트)인 경우 title을 'Welcome'으로 설정합니다.
if (_url == '/') {
title = 'Welcome';
}
// 요청된 URL이 '/favicon.ico'인 경우, 404 상태 코드를 반환하고 요청 처리를 중단합니다.
if (_url == '/favicon.ico') {
return response.writeHead(404);
}
// 응답 헤더에 200 상태 코드를 설정하여 요청이 성공적으로 처리되었음을 나타냅니다.
response.writeHead(200);
// 동적으로 생성된 HTML 템플릿을 정의합니다.
// title 변수의 값에 따라 페이지 제목과 본문의 제목이 변경됩니다.
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><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 템플릿을 클라이언트에게 전송하여 응답을 종료합니다.
response.end(template);
});
// 서버가 3000번 포트에서 클라이언트 요청을 대기하도록 설정합니다.
app.listen(3000);
728x90
'BackEnd > Node.js' 카테고리의 다른 글
| [Node.js] 파일 읽기 (0) | 2024.08.14 |
|---|---|
| [Node.js] URL 을 통해 입력값 사용 (0) | 2024.08.14 |
| [Node.js] URL 구조 (0) | 2024.08.14 |
