반응형
본 글은 생활코딩의 Node.js 강의를 보고 정리한 것입니다.
오늘은 url 입력에서 "localhost:3000" 만을 입력했을 때와 "localhost:3000/?id=HTML" 처럼 뒤에 쿼리 부분이 추가된 경우의 본문 내용을 다르게 설정해보겠습니다. 이때 사용할 것은 if 조건문입니다.
추가된 쿼리 부분은 URL 객체의 searchParams 의 id를 살펴보면 됩니다.
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 = new URL('http://localhost:3000' + _url);
var queryDataId = queryData.searchParams.get('id');
var path = queryData.pathname;
if(path === '/') {
if(!queryDataId) {
fs.readFile(`data/${queryDataId}`, 'utf8', (err, data) => {
var title = 'Welcome!!';
var description = 'Hello, Node.js';
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.writeHead(200);
response.end(template);
});
} else {
fs.readFile(`data/${queryDataId}`, 'utf8', (err, data) => {
var title = queryDataId;
var description = data;
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.writeHead(200);
response.end(template);
});
}
} else {
response.writeHead(404);
response.end('Not found');
}
});
app.listen(3000);아래가 url을 "localhost:3000" 라고만 입력했을 때 consoloe.log(queryData); 결과입니다.
쿼리 부분이 없기 때문에 searchParams 는 빈 상태로 나오게 됩니다. 이는 곧 null 값으로 false를 뜻하기 때문에 위 코드에서 if(!queryDataId) 에 해당합니다. 건네줄 title이나 data(description) 정보가 없기 때문에 문자열로 채웠습니다.
이외에 쿼리 부분이 포함된다면 else 구문에 걸려 이전과 똑같이 파일을 읽어와서 본문에 표시하게 됩니다.
참고로 생활코딩에선 쿼리 부분을 판별할 때 아래처럼 undefined를 사용했습니다.
if(queryData.id === undefined) ...
하지만 저의 경우 생활코딩처럼 url.parse(_url, true).query; 구문을 사용하지 않아 다르게 나오는 것 같았습니다. 100% 똑같이 구현하려 하지마시고 각자의 경우에 맞춰 console.log() 를 자주 찍으며 확인해보시기 바랍니다.
728x90
반응형
'문돌이 존버 > Node.js 스터디' 카테고리의 다른 글
| AWS EC2 우분투에 Node.js 설치하기 (0) | 2021.07.15 |
|---|---|
| (Node.js) 자바스크립트 반복문 및 Array 특성 feat. 생활코딩 (0) | 2021.07.15 |
| Node.js 콘솔 입력값(input) 및 Not found 오류 구현 feat. 생활코딩 (0) | 2021.07.13 |
| Node.js 파일 읽기 기능 feat. 생활코딩 (0) | 2021.07.13 |
| Node.js 웹 서버 구축하기 feat. 생활코딩 (0) | 2021.07.13 |
