웹서버에 파일을 업로드 할때 업로드가 완료되기 전까지 웹 서버에서 데이터를 조회한다거나 하는 등의 다른 작업을 할수 없었기에 이애대한 문제 해결 방법으로 NodeJS 가 등장
웹 브라우저를 통해 내 PC에 있는 문서파일 하나를 업로드하려고 한다면 먼저 웹 서버에 업로드를 요청해야 하는데 예전에는 이 업로드가 완료되기 전까지는 어떠한 작업도 불가능했다.
그러나 Node.js 는 하나의 요청처리가 끝나기전에 기다리지않고 다른 요청을 동시에 처리하는 비동기입출력 방식을 적용하였다.
동기입출력
// 동기입출력 방식
var contents = file.read('a.txt');
// 다 읽고 저장될때까지 대기
doShow(contents);
var result = doAdd(10, 10)
파일을 다 읽어올때까지 대기하고 읽는 작업이 끝나면 doShow()를 실행하여 화면에 보여주고 doAdd() 함수는 가장 마지막에 실행된다.
즉 코드가 짜여진 위에서 아래로의 순서대로 진행
비동기 입출력
// 비동기 입출력 방식
file.read('a.txt', function(contents) {
doShow(contents);
});
var result = doAdd(10, 10);
파일읽기를 요청한다음 그 작업이 끝나지 않아도 doAdd 는 먼저 실행이 될 수 있다.
파일을 읽는 작업이 완료되면 파라미터로 전달했던 함수가 자동으로 호출되는데 이 함수를 콜백함수 라고 부른다.
자바스크립트에서는 변수에 함수를 할당할 수 있는데 이 변수에 할당된 함수를 다른 함수의 파라미터로 전달 할 수 있고 파라미터로 전달된 함수를 다른 함수의 내부에서 호출하는것을 콜백함수 라고 한다.
Node.js 웹서버 만들기
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url = request.url;
if(url == '/'){
url = '/index.html';
}
if(url == '/favicon.ico'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname + url));
});
app.listen(3000);
- http 는 Node에 내장된 모듈입니다.
- fs 는 파일시스템에 접근하기위한 모듈입니다.
- createServer()메소드를 호출하면 서버객체가 반환된다.
- 서버객체의 listen() 메서드를 호출하여 지정한 포트에서 대기하도록 설정
동일한 루트에 index.html 이 있다면 그 파일이 노드서버위에서 실행이 된다.
만약 전달받은 URL 에 따라서 내용을 보여주고싶다면 어떻게 해야할까
ex) localhost:3000/?id=HTML
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'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
response.end(queryData.id);
});
app.listen(3000);
- url 모듈을 불러오고
- 기존의 url 변수는 _url 로 변경한다.
- queryData라는 변수에 url.parse(_url, true).query 를 담고
- queryData.id 를 출력한다.
- 화면에는 HTML 이 출력되게 된다.
여기까지 URL 의 query string 변화에 따른 출력을 해주었는데
이걸 작성해두었던 html 페이지에 적용하려면 어떻게 해야할까?
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'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
var template = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>${title}</title>
</head>
<body>
<h1><a href="/">WEB2</a></h1>
<a href="/?id=HTML">HTML</a>
<a href="/?id=CSS">CSS</a>
<a href="/?id=JavaScript">JavaScript</a>
<h2>
${title} 페이지 입니다.
</h2>
<p>내용</p>
</body>
</html>
`
response.end(template);
});
app.listen(3000);
template 란 변수를 만들고 ` 백틱 이라고하는 Tab 바로 위에있는 키인데 이걸 사용하면 텍스트출력은 물론 ${ } 를 사용하여 자바스크립트 변수나 문법도 사용이 가능하다.
이렇게하면 해당하는 타이틀과 주소창의 주소는 변경되지만 내용은 template 에 입력된 내용 그대로 출력이 된다. 주소창에 변화가 있을때마다 내용도 함께 변화를 주려면 어떻게 해야할까?
주소창의 변화에 따른 content 변경
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'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
fs.readFile(`data/${title}`, 'utf8', (err, data) => {
var template = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>${title}</title>
</head>
<body>
<h1><a href="/">WEB2</a></h1>
<a href="/?id=HTML">HTML</a>
<a href="/?id=CSS">CSS</a>
<a href="/?id=JavaScript">JavaScript</a>
<h2>
${title} 페이지 입니다.
</h2>
<p>
${data}
</p>
</body>
</html>
`
response.end(template);
})
});
app.listen(3000);
- fs모듈을 불러오고
- data 폴더에 각각의 내용을 담을 파일을 생성합니다.
- fs.readFile() 을 실행시켜 첫번째 인자는 내용 데이터가 위치한 파일경로 두번째는 파일을 읽어올때의 형태, 세번째로는 에러와 전달받은 데이터를 처리할 함수구문이 들어갑니다.
최종형태?
최종형태는 아니지만 Node.js 를 이용하여 서버 구축부터 웹 페이지 제작까지 가능하다는것을 보여주는 강의였던것같습니다.
var http = require('http');
var fs = require('fs');
var url = require('url');
function templateHTML(title, list, description) {
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
<h2>${title}</h2>
<p>${description}</p>
</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 queryData = url.parse(_url, true).query;
var pathname = url.parse(_url, true).pathname;
if(pathname === '/'){
if(queryData.id === undefined){
fs.readdir('./data', function(error, filelist){
var title = 'Welcome';
var description = 'Hello, Node.js';
var list = templateList(filelist)
var template = templateHTML(title, list, description) ;
response.writeHead(200);
response.end(template);
})
} else {
fs.readdir('./data', function(error, filelist){
var list = templateList(filelist)
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
var title = queryData.id;
var template = templateHTML(title, list, description);
response.writeHead(200);
response.end(template);
});
});
}
} else {
response.writeHead(404);
response.end('Not found');
}
});
app.listen(3000);
중복되는 부분은 함수로 빼서 재활용 할 수 있도록 구성하고
외부 파일을 모듈을 사용하여 읽어들일수 있다는것
서버의 구축이 가능하다는것
URL 을 활용한 웹 페이지의 변화를 이끌어 낼수 있다는것
JavaScript 및 Node.js 의 활용도를 확인 할수 있었습니다.
code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.