이전 글 까지는 express 모듈을 불러와서 앱서로 만드는 방법을 설명했습니다. 이번에는 템플릿을 만들어보도록 하겠습니다. 모든 프로젝트에는필수적인 코드를 다시 짠다는건 생각만 해도.. 따라서 프로젝트의 기본적인 뼈대를 만들어놓고 프로젝트를 시작하도록 하는게 좋을거 같습니다. 뷰 엔진(클라이언트에게 보여지는 부분)에는 핸들바, jade, ejs, hogan이 존재합니다. 저는 친숙한 ejs로 제작할까 합니다.
먼저 generator를 설치하도록 하겠습니다.(http://expressjs.com/en/starter/generator.html )
$ npm install express-generator -g
이제 템플릿을 만들도록 하겠습니다.
$ express myapp --ejs
express 템플릿을 만들 myapp이라는 이름으로 폴더를 저장하고 뷰 엔진을 ejs로 설정했습니다. 만약 --ejs를 뺀다면 default값인 jade가 설치됩니다(express 제작자와 jade 제작자가 같습니다). 또한 폴더 이름을 적지 않는다면 그 경로에 템플릿 엔진을 설치하게 됩니다. express만 입력하게 되면 해당 경로에 jade로 템플릿을 설치하게 됩니다.
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.ejs
├── index.ejs
└── layout.ejs설치를 마치게 되면 다음과 같은 경로로 뼈대가 생성됩니다.
이제 해당 경로에 npm 을 설치하고 실행해보도록 하겠습니다.
$ npm install
$ npm start
> myapp@0.0.0 start /node/myapp
> node ./bin/www
다음과 같이 웹서버가 실행된걸 확인할 수 있습니다. 이제 브라우저로 http://localhost:3000/ 로 들어가보면 welcome to express 를 볼 수 있습니다.
views 경로로 들어가서 index.ejs의 소스코드를 보면 다음과 같이 되어있습니다.
/views/index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
<% %> 안에 자바스크립트 코드를 넣으면 됩니다. <%= %>는 표현식으로 어디선가 index.ejs로 title이라는 값을 보냈네요.
이제 views 폴더에서 올라가 routes 폴더로 가면 index.js라는 파일이 있습니다. 이것도 소스코드를 보겠습니다.
/routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
router.get 함수 안에 res.render('index', {title : 'Express' }); 문장을 보면 index.ejs로 title의 값을 'Express'라고 지정하고 데이터를 보내는 부분이 있네요. 따라서 routes 에서 views로 데이터를 전송한다는걸 알수 있네요.
다음에는 메인 파일인 app.js 에 대해서 파악해보고 포트 변경도 해보겠습니다.
'node.js & express' 카테고리의 다른 글
| 5. 폼(form)에서 데이터 받기. (0) | 2016.01.13 |
|---|---|
| 3. Node.js 프레임워크인 express 설치하기 (0) | 2016.01.08 |
| 2. Node.js 를 웹 서버로 실행하기. (0) | 2016.01.06 |
| 1. Node.js 설치하기 (ubuntu) (0) | 2016.01.05 |