Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- python subprocess
- 백준
- 정규식 활용
- c++ 정규식
- regex_search
- grafana dashboard
- 1697
- g++ 업데이트
- gcc regex
- c3 초
- linux시간으로 변경
- python os
- c3 second
- gcc 업데이트
- centos pyhon 설치
- InfluxDB
- snmp
- python popen
- 정규식 컴파일
- subporcess path
- c3 축 가리기
- snmp test
- influxdb 설치
- 정규식 문자열 출력
- semanage
- telegraf
- c3 축 없애기
- selinux port 등록
- c3 step graph
- CentOS7
Archives
- Today
- Total
리셋 되지 말자
제작-홈페이지 구현 본문
메인 페이지(루트)
HTML, CSS, JavaScript는 잘 동작하지만, WEB을 눌렀을 때(localhost/)는 아래와 같이 내용이 없다
path로 구분
이전까지는 pathname으로 HTML, CSS, JavaScrip를 구분하였는데, 루트 디렉토리는 pathname으로 구분할 수 없다.(뒤에 query string이 붙지 않기 때문)
- HTML로 접속 시 url 정보
Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: '?id=HTML',
query: [Object: null prototype] { id: 'HTML' },
pathname: '/',
path: '/?id=HTML',
href: '/?id=HTML'
}
- /로 접속 시 url 정보
Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: [Object: null prototype] {},
pathname: '/',
path: '/',
href: '/'
}
pathname이 '/'로 동일한 것을 확인할 수 있다. 다른점이라면, HTML로 접속 시에 query안에 { id : 'HTML' }이 있는데, /로 접속했을 시에는 비어있다는 것이다.
console.log(url.parse(_url, true).query);
위의 코드의 결과(맨 위가 메인 페이지 접속)
[Object: null prototype] {}
[Object: null prototype] { id: 'HTML' }
[Object: null prototype] { id: 'HTML' }
[Object: null prototype] { id: 'CSS' }
[Object: null prototype] { id: 'JavaScript' }
비어있는걸 확인할 수 있다.
console.log(url.parse(_url, true).query.id); // url 값 확인
if (url.parse(_url, true).query.id === undefined) {
console.log('성공!');
}
위의 소스코드로 비어있는 query의 id를 출력해보면 아래와 같이 undefined라고 출력된다.
undefined
성공!
CSS
HTML
JavaScript
JavaScript
조건문도 true가 되어 '성공!' 메시지가 출력되었다.
queryData가 'url.parse(_url, true).query'였으므로 queryData.id 값을 이용하여 조건문을 분기하도록 한다.
- main.js
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(request.url, true).query;
var pathname = url.parse(_url, true).pathname;
//console.log(queryData.id); // 쿼리 스트링 값 확인
console.log(url.parse(_url, true).query.id); // url 값 확인
// if (_url == '/') {
// //_url = '\\index.html';
// title = 'Welcome';
// }
// if (_url == '/favicon.ico') {
// response.writeHead(404);
// response.end();
// return;
// }
//response.writeHead(200);
// 루트 디렉토리 (/)로부터 존재하는 페이지를 요청하면 페이지 표시
if (pathname === '/') {
fs.readFile('data/' + queryData.id, 'utf8', function (err, description) {
var title = queryData.id;
if (queryData.id == undefined) { // 없는 값을 호출하려고 하면 javascript는 undefined라고 한다.(약속)
title = 'Welcome';
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>
<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>
${description}
</p>
</body>
</html>
`;
//response.end(fs.readFileSync(__dirname + url));
response.writeHead(200); // 200을 전송하면, 파일을 잘 전송했다고 하는 약속
response.end(template);
});
} else { // 없는 페이지를 요청하면 404 에러
response.writeHead(404);
response.end('Not found');
}
});
app.listen(80);
queryData.id가 undefined면 따로 페이지를 구성하여 클라이언트로 전송하도록 변경되었다. 접속 화면은 아래와 같다.
'NodeJS > 생활코딩' 카테고리의 다른 글
글목록 출력하기 (0) | 2020.09.09 |
---|---|
파일목록 알아내기 (0) | 2020.09.09 |
Not found 오류 구현 (0) | 2020.09.09 |
파일을 이용해 본문 구현 (0) | 2020.09.08 |
파일 읽기 (0) | 2020.09.08 |
Comments