Node.js 를 이용해서 간단히 개인 홈페이지를 만들어 보기로 하자. 몇가지 새로운 개념을 동원해야 한다.
mkdir web2018 && cd web2018
새 디렉토리를 만들자.
npm init
패키지 관리를 위한 package.json 파일을 만들어 주자. 특별한 경우가 아니면 그냥 엔터로 진행하면 되겠다. package.json파일이 만들어진다.
{
"name": "web2018",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^2.6.1",
"express": "^4.16.4"
}
}
이제 프로젝트를 위해 필요한 패키지들을 설치하자.
npm install express –save
npm install ejs –save
설치후 package.json 내용을 보면 의존성에 추가 되어 있는 것을 확인 할 수 있다. Express는 앱개발 프레임워크이고 ejs는 템플릿 엔진이다. 이것말고 pug(jade)라는 것도 있던데 … 이건 뭐 다시 새로운 문법을 배워야 한다. 된장. 지금도 머리 아파 죽겠는데 새로운 체계를 배우라고? 그래서 기존의 html 문법을 그대로 사용할수 있는 ejs를 사용하기로 했다. 그렇게 복잡한 사이트를 만들것도 아니고 일단 ejs로 하자. 어느게 좋은지 그런건 아직 모르겠다.
app.js라는 파일은 생성하고 코드를 아래와 같이 작성하자.
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function(){
console.log('App Listening on port 3000');
});
저장 하고 실행해 보자.
node app.js
이제 웹브라우저에서 raspberrypi_ip:3000 으로 접속하면 Hello World라고 출력되는 것을 확인 할 수 있다. 이제 ejs 템플릿을 이용해서 만들어 보자. ejs는 앞서 언급했듯이 기존 HTML를 그대로 사용할 수 있다. 그래 이게 좋은거지. 여기에다 <% %>를 사용하여 서버의 데이터나 코드를 실행할 수 있게 된다. ejs를 사용하기 위해서 app.js에 설정을 해줘야 한다.
var express = require('express');
var app = express();
// app.set('views', './views');
app.set('view engine', 'ejs');//ejs 템플릿 엔진 연동
// route setting - 라우팅(routing)
app.get('/', function (req, res) {
//res.send('Hello World!');
res.render('index');//views디렉토리안에 있는 index.ejs 파일
});
app.listen(3000, function(){
console.log('App Listening on port 3000');
});
코드에서 알수 있듯이 views라는 디렉토리를 만들어 주고 그 안에 html 문서를 넣어 주면 된다. send 대신에 render라는 메소드를 사용하는 것도 유의하자. HTML문서의 확장자가 .html이 아니라 .ejs라고 해서 저장해야 한다. 샘플로 html문서는 아래와 같이 해주자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ghost</title>
</head>
<body>
<h1>Ghost</h1>
<p>샘플 사이트입니다. 앞으로 계속 추가해 나가도록 하겠습니다.</p>
</body>
</html>
이렇게 저장해주고 다시 app.js를 실행하고 브라우저에서 접속해 보면 html 내용이 출력되는 것을 확인 할 수 있다. 이것이 기본적인 사용법이다.
app.js 재실행시 이미 포트를 사용중이라고 에러가 나면 다음과 같이 해주자.
ps –ef | grep app.js
pid번호를 확인하고 죽이면 된다.
kill –9 <pid_num>
프로젝트 전체의 파일 구조를 보면 아래와 같이 되어 있다.
<% %>의 사용법을 알아 보자. app.js로 부터 데이터를 전송 받아서 브라우저에 출력하는 것으로 만들어 보자. 지금까지는 get을 사용했지만 이번에는 post를 사용해야 한다. html은 다음과 같이 수정했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ghost</title>
<link rel="stylesheet" type="text/css" href="stylesheet">
</head>
<body>
<h1>Ghost</h1>
<p>샘플 사이트입니다. 앞으로 계속 추가해 나가도록 하겠습니다.</p>
<h3><%= name %>님 반갑습니다.</h3>
<div class="container">
<fieldset>
<form action="/" method="post">
<input name="name" type="text" class="ghost-input" placeholder="Enter Your Name" required>
<input type="submit" class="ghost-button" value="submit">
</form>
</fieldset>
</div>
</body>
</html>
form의 내용을 post 로 넘긴다. app.js를 수정하자. 여기서 다시 필요한것이 있다.
npm install body-parser –save
설치를 했으면 app.js를 수정하기로 하자.
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(express.static('public'));
app.use(bodyParser.urlencoded({extended : true}));
app.set('view engine', 'ejs');//ejs 템플릿 엔진 연동
// route setting - 라우팅(routing)
app.get('/', function (req, res) {
//res.send('Hello World!');
var data = req.body;
res.render('index', {name: data});//views디렉토리안에 있는 index.ejs 파일
});
app.post('/', function (req, res) {
var data = req.body.name;
res.render('index', {name: data});
});
app.listen(3000, function(){
console.log('App Listening on port 3000');
});
이름을 입력하고 submit 하면 입력된 이름을 출력해 준다. 지금까지 기본적인 흐름을 파악하기 위해 기초적인 사항들을 다루어 보았다. 이제 본격적으로 그럴싸한 홈페이지를 만들어 보기로 하자.
다음편에 계속 ….
