[생활코딩 Node.js] 9강~10강 정리 (URL, Quarystring)
9강 URL의 이해
1. 다른 URL, 같은 파일요청
클라이언트, 즉 웹브라우저한테 서로다른페이지를 만들어서 주고있다.
2. URL의 형식 이해하기
(1) protocol :
통신규칙
(2) host(domain) :
인터넷에 연결되어있는 컴퓨터
(3) port :
한 대의 컴퓨터안에 여러대의 서버가 있는 경우에, 어떤 서버와 통신할지 구별해주는것
3000번 포트에 main.js 웹서버를 실행시킨 것이다.
80번은 안나온다 디폴트.
app.listen(3000);(4) path :
컴퓨터안에 있는 어떤 dir, 파일
(5) query string :
? 가 query의 시작. 값은 &로 구분된다.
웹서버에게 읽고 싶은 정보는 HTML이고 12페이지이다.
10. URL을 통해서 입력된 값 사용하기
목적 : quary string으로 링크이동하기
-> URL주소에 Javascript를 치면 Javascript페이지가 나오고, CSS를 치면 CSS페이지가 나오게 하게 하기.
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);
response.end(queryData.id);
//response.end(fs.readFileSync(__dirname + url));
});
app.listen(3000);(1) URL의 quarystring 값을 알아내는 방법 찾기
quarystring의 값은
원래 코드 중,
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url = request.url;
console.log(url);
if(url == '/'){
url = '/index.html';
}
if(url == '/favicon.ico'){
return response.writeHead(404);
}
response.writeHead(200);
//console.log(__dirname + url);
response.end(fs.readFileSync(__dirname + url));
//response.end('bohyeon : '+url);
});
app.listen(3000); var url = request.url;여기에서 들어가게 된다.
그것을 알기 위해,
console.log(url);으로 알아본다.
결과 :
request.url -> /?id=HTML
(2) 구글링으로 "nodejs quarystring parse" URL속 Quarystring 데이터 추출하는 방법 알아내기
url이라는 모듈을 사용한다. (url의 값을 가져오는 모듈)
var url = require('url');
(-> 여기서 원래쓰였던 url -> _url으로 변경)
(3) 구글링으로 가져온 지식 : url.parse(_url, true).quary으로 quary값 출력하기
var _url = request.url;
var queryData = url.parse(_url, true).query;
console.log(queryData.id);
(4) reponse.end 변경
원래는, 파일들을 읽어주는 코드를
response.end(fs.readFileSync(__dirname + url));quaryData.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 = url.parse(_url, true).query;
var title = queryData.id;
if(_url == '/'){
title = 'Welcome';
}
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="/">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);
});
app.listen(3000);code{
require(' 모듈이름');
request.url -> /?id=HTML
}
그리고 객체의 key값이 quary.
response.end에 template으로 바꿨다.
그리고 그안의 $와 링크값들을 쿼리로 수정했다.