19-2. App 제작 - 홈페이지 구현
22.5.31
🧐수업설명
홈 화면
🚨 홈 화면과 HTML, CSS, JavaScript모두 pathname이
/이라서 홈 화면과 각각의 페이지를 구분할 수 없음
👉 반복문을 중첩 사용하여, 이 2개를 구분!!
👉 구분 기준 :queryData.id
- queryString이 有 ➡ queryData.id는 값 有
- queryString이 無 ➡ queryData.id는 값 無
바꿀 부분!
if(queryData.id === undefined) { //없는 값 ==> home
//각각의 페이지에 들어가는 readFile을 이곳에다가 복붙!
var title = 'Welcome';
var description = 'Hello Node.js';
} else {
//원래 있던 부분 이곳으로 ctrl X + ctrl V
}큰 구조
if(pathname === '/'){ // 정상실행
if(queryData.id === undefined){
//queryString이 없다면 홈, 있다면 각각의 페이지(html, css, javascript)
// 홈 화면 title, description
} else {
//각각의 페이지 title, description, id
}
} else {
// Not Found 404 오류 구현
}전체 코드
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).searchParams;
var queryData =url.parse(_url, true).query;
var pathname = url.parse(_url, true).pathname;
if(pathname === '/'){
if(queryData.id === undefined){ //없는 값 ==> home
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
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/${queryData.id}`, 'utf8', function(err, description){
var title = queryData.id;
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');
}
//console.log(__dirname + url);
});
app.listen(3000);
조건에 따라 다르게 동작하는 애플리케이션 만드는 시간이었다!
구현완료
참고,, 선생님 왈
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
}); 이 부분은 필요 없는 부분이라고 함! 수업 뒤쪽에 가서 수정할 예정
To be "irreplaceable"