지난 글 ([웹서버/웹사이트, 웹클라이언트 실습] with HTML, Disqus, Tawk.to (생활코딩 강의 기반))에서는정적 웹사이트를 구현해봤었습니다.
👇
[웹서버/웹사이트, 웹클라이언트 실습] with HTML, Disqus, Tawk.to (생활코딩 강의 기반) :: kyagile (tistory.com)
✅ 정적 웹사이트의 한계
수동적, 반복적
정적 웹사이트에서는 각 페이지의 구현을 위해서 각각의 html 파일이 필요하였고,
이 방식에서는, 페이지들끼리 겹치고 반복되는 부분이 있더라도, 하나로 묶지 못했습니다.
따라서, 새로 넣을 페이지가 이전 페이지들과 유사하더라도, 여전히 처음부터 끝까지 html 파일을 다시 작성해야 했고,
혹여 어느 부분을 조금이라도 수정하고 싶다면, 모든 html의 해당 부분을 하나하나씩 수정해야 했습니다.
양방향 소통의 어려움
정적 웹사이트에서는 만약 사용자가 자신의 컨텐츠를 추가하고 싶더라도,
이 사용자는 페이지를 추가하기 위해 접근이 필요한 서버 컴퓨터 상의 디렉토리에 접근할 길이 없기 때문에,
웹사이트 상에서 사용자 참여가 불가능했습니다.
✅ ~ . . 동적 웹사이트의 효능 . . ~
♧ 자동화 ♧
각 페이지에서 겹치고 반복되는 기본 구조에 대한 html 코드를 하나로 묶어 관리합니다.
만약 여기서 수정할 것이 생겼다면, 간단히 이 코드만 고쳐줌으로써 모든 웹페이지의 해당 부분이 변경될 수 있습니다.
♧ 양방향 소통 ♧
사용자에게서 받은 request 중 콘텐츠가 담긴 부분이 post 방식을 통해 웹서버에 저장되어,
웹사이트의 새 페이지로서 구현될 수 있습니다.
이와 같이, 서버 쪽에서뿐만 아니라 사용자 쪽에서도 웹사이트에 컨텐츠를 추가할 수 있습니다.
✅ 이 실습을 통해 우리가 만드려는 웹사이트는
기본 홈페이지가 있고,
리스트에서 각 컨텐츠를 클릭하면
해당 웹페이지로 이동하여 내용을 볼 수 있게끔 합니다.
여기까지 정적 웹사이트와 같긴 하지만, 훨씬 자동화됩니다.
또한, 사용자가 url의 쿼리 부분에 직접 값을 입력하여 접속하는 것이 가능해집니다.
(사용자가 직접 페이지를 추가/수정/삭제하는 기능은, 여기서가 아니라 다음에 express를 활용할 때 구현하겠습니다)
✅ 디렉토리 구성하기
아래와 같이 디렉토리를 구성하면 됩니다.
- main.js: 서버 구동과 웹사이트 구현을 위한 전체 코드
- data 폴더 내 각 파일들은 각 웹페이지만이 가지고 있는 콘텐츠 자체를 (구조에 대한 html 코드를 제외한) 담고 있음
✅ main.js 전체 코드와 과정 설명
var http = require('http');
var fs = require('fs');
var url = require('url');
function templateHTML(title, list, content){
return `
<!doctype html>
<html>
<head>
<title>WEB - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${content}
</body>
</html>
`;
}
function templateList(filelist){
var list = '<ul>';
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i = i + 1;
}
list = list + '</ul>';
return list;
}
var app = http.createServer(function(request, response){
var _url = request.url;
var query = url.parse(_url, true).query;
var pathname = url.parse(_url, true).pathname;
if(pathname === '/'){
if(query.id === undefined){
fs.readdir('./data', function(error, filelist){
var description = 'Here is main page!';
var title = 'Welcome';
var list = templateList(filelist);
var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
response.writeHead(200);
response.end(template);
})
}
else {
fs.readdir('./data', function(error, filelist){
fs.readFile(`data/${query.id}`, 'utf8', function(err, description){
var title = query.id;
var list = templateList(filelist);
var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
response.writeHead(200);
response.end(template);
});
});
}
}
else {
response.writeHead(404);
response.end('Not found');
}
});
app.listen(3000);
코드는 request의 url에 따라 아래와 같은 경우로 나누어집니다.
(pathname에 따라 나누어지는 것이 즉 routing 입니다.)
1. pathname이 "/"인 경우
1-1. query.id가 없는 경우 👉 root인 홈페이지를 의미하므로, 홈페이지에 맞게 title과 description을 설정하고 띄워줍니다.
1-2. query.id가 있는 경우 👉 해당하는 페이지에 맞게 title과 description을 설정하고 띄워줍니다.
2. pathname이 "/"이 아닌 경우 👉 우린 이런 경우를 구현한 적이 없으므로, 오류 코드를 response합니다.
이중 1-2. 경우의 과정을 그림으로 도식화해보았습니다.
✅ 실제 구동해보기
1.
커맨드창의 현재 위치를 우리의 디렉토리로 설정하고,
node main.js
를 입력합니다.
이로써 서버가 열립니다.
2.
웹브라우저의 주소창에
localhost:3000
을 입력합니다.
- localhost: 이 글에서는, 서버를 연 컴퓨터로 다시 클라이언트로서 접속하고 있기에, 자기 자신을 의미하는 localhost로 설정합니다.
- 3000: 우리가 3000번 포트로 서버를 열었기 때문입니다.
이로써 홈페이지가 보입니다.
3.
리스트의 각 제목을 클릭하면, 각 컨텐츠가 담긴 웹페이지를 볼 수 있습니다.
이 컨텐츠들은 서버 컴퓨터의 작업 디렉토리 내의 data 폴더의 파일들이 반영된 것입니다.
4.
CSS, HTML, JavaScript 외에 한 페이지를 더 추가하고 싶으며, 이 페이지의 구성은 기존 페이지와 거의 유사하고 콘텐츠만 다르다 가정합시다.
이 경우 우리는 간단히 data 폴더에 새 페이지의 콘텐츠 부분만 작성된 파일을 추가하면 됩니다.
그럼 웹사이트에는 어떤 변화가 있을까요?
우선, 새 콘텐츠의 제목 (즉 파일의 이름)이 리스트에 추가되었습니다.
이 제목 (KiYeon)을 클릭하면, 우리가 원했던 새 페이지가 뜨며, 콘텐츠(즉 파일의 내용)가 실려 있습니다.
감사합니다.
'IT > 웹' 카테고리의 다른 글
| [Node.js와 Session] Session을 이용한 인증 구현 (생활코딩 강의 기반) (2) | 2024.02.01 |
|---|---|
| [Node.js와 Cookie] Cookie의 생성, 읽기, 활용 (생활코딩 강의 기반) (0) | 2024.01.28 |
| [Node.js를 통한 동적 웹사이트 구현 <2>] 사용자도 생성/업데이트/삭제가 가능해졌다..!! with Express (생활코딩 강의 기반) (0) | 2024.01.24 |
| [웹서버/웹사이트, 웹클라이언트 실습] with HTML, Disqus, Tawk.to (생활코딩 강의 기반) (0) | 2024.01.17 |