본 내용은 아래의 강의를 토대로 하여 작성하였습니다.
링크:opentutorials.org/course/3332
WEB2 - Node.js - 생활코딩
수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사
opentutorials.org
1. 강의 내용
동적인 웹 페이지 만들기
전 시간에 만든 웹 페이지에 명령어를 추가해서 쿼리 스트링에 따라서 바뀌는 기능을 추가한다.
main.js의 본문에 var template=''를 생성하고 콤마 사이에 1.html의 텍스트들을 붙여 넣기 한다.(임시로)
<title>WEB1 - ${queryData.id}</title>
<h2>${queryData.id}</h2>
.
.
.
response.end(template);
그리고 title과 웹 페이지의 본문 제목을 위와 같은 명령어로 적어준다. 이제, 웹 페이지의 title과 본문의 제목은 사용자가 입력한 쿼리 스트링에 따라서 바뀌게 된다.
그리고 마지막의 response.end(template);는 생성된 변수 template를 사용자의 화면에 출력하므로, 1.html의 텍스트를 볼 수 있을 것이다.
<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>
리스트의 하이퍼링크를 위처럼 변경하면 쿼리스트링에 id가 입력된다. HTML 페이지를 클릭하면 tilte과 본문 제목이 HTML으로 변경된다.
파일 읽기
정보를 다룰 때, 핵심적인 네 가지의 처리 방법이 있다.
-
Create
-
Read
-
Update
-
Delete
이 중, Node.js로 파일을 Read해보도록 한다.
새로운 디렉토리 nodejs와 하위 파일 fileread.js, sample.txt를 만든다. sample.txt에는 아무 의미 없는 긴 텍스트를 입력해놓고, fileread.js에 아래의 명령어를 입력한다.
var fs = require('fs');
fs.readFile('sample.txt',function(err,data){
console.log(data)
});
fs는 file system의 약자이다. 이제 저 변수를 통해서 node.js의 모듈인 파일 시스템을 사용할 수 있게 된다. 그리고 sample.txt의 데이터를 가져오고 콘솔 창에 출력되게 한다. 터미널에서 cd명령어로 nodejs에 위치한 뒤, node fileread.js를 입력하면 아래처럼 출력된다.
하지만, 이것은 sample.txt의 내용이 아니다. 왜냐하면, 데이터의 방식을 정하지 않아서 모듈이 텍스트의 내용을 제대로 불러오지 못했기 때문이다.
var fs = require('fs');
fs.readFile('sample.txt','utf-8', function(err,data){
console.log(data)
});
utf-8을 추가하면 이제 올바르게 출력이 된다.
파일을 이용해서 본문 구현
이제, 웹페이지의 본문도 불러와서 사용자가 클릭한 페이지의 텍스트도 불러올 수 있도록 할 것이다. 웹 페이지의 HTML,CSS,JavaScript의 텍스트들은 1.html,2.html,3.html에 있는 상태이다. 각 파일들의 텍스트들만을 오려내기 해서 HTML, CSS, JavaScript라는 각 파일에 넣는다. 그리고 main.js에 아래와 같이 명령어를 넣는다. 이전의 var template명령어 위에 아래를 입력한다.
fs.readFile('data/${queryData.id}','utf8',function(err,description){}
이 명령어의 의미는 쿼리스트링과 같은 파일에 가서 데이터를 가져온다는 것이다. 그리고 그 데이터의 이름은 함수로 description이라고 붙여놓았다. 리스트의 하이퍼링크 각각에 id를 HTML, CSS, JavaScirpt라고 지어놓았으므로 사용자가 누른 id에 맞게 텍스트를 가져올 수 있다. 중괄호에는 var template와 전체 웹 페이지의 body내용을 붙여 넣기 한다. 정확한 것은 아래를 참고하자.
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;
console.log(queryData.id);
if(_url == '/'){
title = 'welcome' ;
}
if(_url == '/favicon.ico'){
return response.writeHead(404);
}
response.writeHead(200);
fs.readFile(`data/${queryData.id}` , 'utf8', function(err, description){
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.end(template);
})
});
app.listen(3000);
2. 느낀 점
fs 모듈로 웹 페이지의 파일을 불러오는 기능을 추가하는 과정에서 애를 먹었다. 아무리 코드를 선생님 것과 비교를 하여도 실행이 안 되는 것이었다. 선생님 코드는 제대로 실행되고 나는 왜 안 되는지 긴 시간을 찾아 봤다. 기호 하나하나 까지도! 행 개수도 같은데 왜 안되는지 참 답답하였다. 하지만, 결국 원인을 찾았는데 fs.readFile 뒤의 쿼리 스트링을 불러오는 부분에서 grave accent를 사용해야 하는데 일반 홀 따옴표를 써버린 것이었다. 하하.... 보통 내가 강의를 보면서 메모장과 atom을 켜면서 공부하는데, 메모장의 코드를 옮기는 과정에서 꼬인 것 같다...
'programming study > Node.js' 카테고리의 다른 글
| [생활코딩]WEB2-Node.js (6)(2020.12.19~21) (0) | 2020.12.21 |
|---|---|
| [생활코딩]WEB2-Node.js (5)(2020.12.18) (0) | 2020.12.19 |
| [생활코딩]WEB2-Node.js (4)(2020.12.17) (0) | 2020.12.17 |
| [생활코딩]WEB2-Node.js (2)(2020.12.13) (0) | 2020.12.13 |
| [생활코딩]WEB2-Node.js (1)(2020.12.11) (0) | 2020.12.12 |
