host : 접속한 컴퓨터
port : 포트번호, 한대의 컴퓨터에 서버가 여러개면 서버별로 다른 포트를 씀 , 디폴트값은 80 (url에서 포트번호를 생략하면 80이됨)
path : 파일경로
query string : 이게 중요함 이걸로 값을 전달해서 페이지 구성을 바꿈
쿼리 스트링에 따라 다른 정보를 보여주는 걸 연습해보자
구글에 node js parse url query string 이정도로 검색해서 찾아보자
var http = require('http');
var fs = require('fs');
//url 모듈
var url = require('url');
var app = http.createServer(function(request,response){
//request.url로 요청 url을 가져와서 _url 변수에 저장
var _url = request.url;
// url parsing 해서 데이터 가져옴
var queryData = url.parse(_url,true).query;
//queryData 객체와 queryData.id로 id 필드값 출력
console.log(queryData);
console.log(queryData.id);
if(request._url == '/'){
_url = '/index.html';
}
if(request._url == '/favicon.ico'){
return response.writeHead(404);
}
console.log(__dirname+_url);
response.writeHead(200);
response.end(fs.readFileSync(__dirname + _url));
});
app.listen(3000);먼저 require('url')로 url 모듈 가져오고
request.url로 url 가져와서 _url에 저장하고
url.parse로 파싱해서 queryData 객체로 받고
console.log로 queryData 객체랑 quertData.id 찍어봄
그리고 코드 맨 하단에 response.end가 인자의 내용을 reponse에 넣어서 클라이언트한테 보내니까 이렇게 해보자
console.log(__dirname+_url);
response.writeHead(200,{'Content-Type':'text/html;charset=UTF-8'});
response.end(queryData.id);먼저 writeHead에 content-type 내용을 추가해서 한글 안깨지게 인코딩을 해줬고 quertData.id를 response에 넣어서 보냄
request 보낼 때 url에 쿼리로 id 값 보냄 -> parse 해서 얻어옴 -> response에 넣어서 응답
var http = require('http');
var fs = require('fs');
//url 모듈
var url = require('url');
var app = http.createServer(function(request,response){
//request.url로 요청 url을 가져와서 _url 변수에 저장
var _url = request.url;
// url parsing 해서 데이터 가져옴
var queryData = url.parse(_url,true).query;
//queryData 객체와 queryData.id로 id 필드값 출력
console.log(queryData);
console.log(queryData.id);
if(request._url == '/'){
_url = '/index.html';
}
if(request._url == '/favicon.ico'){
return response.writeHead(404);
}
console.log(__dirname+_url);
response.writeHead(200,{'Content-Type':'text/html;charset=UTF-8'});
var template = `
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
동적으로 변하는 값 : ${queryData.id}
</body>
</html>
`
response.end(template);
});
app.listen(3000);이런 식으로도 할 수 있겠다
template 변수에 html 코드를 스트링 템플릿으로 넣고
${}를 이용해서 동적으로 변할 값을 넣어준다.
queryData.id를 넣어주면 쿼리에 뭘 넣는지에 따라 template의 내용이 변하게 될거고 response.end에 template을 넣어주면 html 코드를 응답할 것임
<body>
동적으로 변하는 값 : ${queryData.id}
<a href="?id=응애">응애로바꾸기</a>
</body>이렇게넣어주면
a태그를 눌렀을 때 request url의 쿼리에 id="응애"가 들어갈 것이고 template의 body가 동적으로 변하는 값 : 응애 가 될것임
강의에서 사용한 main.js 예시
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);