-
6장 express 정적파일 컨트롤 + 뷰시스템 (ejs)MeanStack (deprecated) 2016. 6. 10. 22:17
web application 이라면 당연히 다양한 뷰를 선보여야 한다. 텍스트만 딸랑나오는 web 이라면 누구나 바로 흥미를
잃어 버릴 것 이다.
그래서 이번엔 express 환경에 뷰 시스템을 붙여보자. 원래라면 angular.js 를 붙여야 하지만 , 그건 나중에..
일단은 기본적인 html 을 붙여보자.
express 에서 뷰를 생성하는 메소드는 2개가 있다. app.render() 는 뷰를 생성 하기 위해 사용되며, 콜백 함수에
HTML 을 전달한다. 그리고 또 한가지 res.render() 는 뷰를 지역적으로 생성하며, 응답으로 HTML 을 전송한다.
흔히 HTML을 응답으로 받기를 원하기 때문에 res.render() 를 더욱 자주 사용한다.
express 에는 유명한 HTML 템플릿 엔진으로 ejs 와 jade 가 있는데 , 여기서는 ejs 를 사용할 것 이다.
먼저 ejs 를 사용하기 위해 ejs를 설치해야 한다.
cmd 창에서 npm install ejs --save 를 하던, package.json 에 ejs 를 추가하던 사용자의 마음에 드는대로
설치를 하자.
{ "name" : "test", "version" : "1.0.0", "description" : "", "main" : "index.js", "dependencies" : { "body-parsor" : "^1.15.1", "compression" : "^1.6.2", "express" : "^4.13.4", "forever" : "^0.15.2", "method-override" : "^2.3.6", "morgan" : "^1.7.0", "ejs" : "~1.0.0" }, "devDependencies" : { "color" : "latest" }, "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" }, "author" : "", "license" : "ISC" }( 이번엔 package.json 에 추가하여 설치했다.)
EJS 를 설치 하였으니 이제 express 초기화에 ejs 엔진을 사용하도록 코드를 바꿔주자.
config 폴더 안의 express_config.js 파일을 수정하자.
var express = require('express'), morgan = require('morgan'), compress = require('compression'), bodyParser = require('body-parser'), methodOverride = require('method-override') ; module.exports = function() { var app = express(); if(process.env.NODE_ENV === 'development') { app.use(morgan('dev')); }else if (process.env.NODE_ENV === 'production') { app.use(compress()); } app.use(bodyParser.urlencoded({ extended : true })); app.use(bodyParser.json()); app.use(methodOverride()); app.set('views', './app/views'); // New!! app.set('view engine', 'ejs'); // New!! require('../app/routes/index.server.routes.js')(app); return app; }New!! 부분이 새롭게 추가 된 부분이다.
app.set() 은 앱의 전반적인 설정을 읽고 쓰는 일반적인 장소를 제공한다.
예를 들면 app.set('title', 'this is a title') 이라고 하면 서버가 title 을 'this is a title' 로 설정을 할 수 있다.
나중에 app.get('title') 로 다시 가져올 수도 있다.
더 쉽게 생각하면 ('키','값') 으로 설정을 저장한다고 보면 된다.
대부분은 개발자가 직접 설정하여 사용하지만 express 에서는 내부적으로 이걸 이용해서 사용하기도 한다.
여기서 views , view engine, jsonp callback name 과 같은 것 들은 express 내부에서 특정하게 사용하는
용도로 지정되어 있다.
위 에서 쓰인 views 는 view 파일이 모여있는 장소를 설정하고, view engine 은 express 의 view template 으로
ejs 형식을 사용한다고 설정 하는 것 이다.
이제 뷰 엔진도 설정했으니 첫 뷰를 생성해보자.
<!DOCTYPE html> <html> <head><%= title %> </head> <body> <h1><%= title %></h1> </body> </html>ejs 뷰는 기본적으로 ejs 태그가 섞인 HTML 파일인데, 확장자로는 당연히 .ejs 를 사용할 것 이다.
먼저 app/views 폴더로 가서 index.ejs 파일을 만들고 첫 뷰 파일을 만들어 보자.
첫 index.ejs 를 만들었다. 딱 보면 딱 하고 바로 알아 볼 수 있을 것이다.
<%= %> 안에 변수를 넣는 것 말고는 다른 것은 HTML 파일과 똑같다.
이제 이 뷰를 선보이기 위해 app/controllers 안에 index.server.controller.js 를 수정하자.
exports.render = function(req,res) { res.render('index', {title : 'First Title'}); }요 코드도 딱 보면 아 하고 나올 것 이다.
res.render() 함수로 첫 번째 인수는 .ejs 이름이 빠진 ejs 파일 이름이고, 두번째 인수는 템플릿에 들어 갈
변수를 설정 하였다.
res.render() 함수는 이제 아까 위에서 express_config.js 에 설정해준 views 폴더 , ejs 엔진에 따라서
app/views 폴더로 가서 index 라는 이름의 ejs 파일을 찾을 것 이고 그놈을 데리고 오면서 title 변수에
'First Title' 을 입력해서 선보일 것 이다.
이제 저장하고 서버를 시작해서 한번 결과를 보자 .
본문에 'First Title' 과 사이트 이름역시 'First Title' 로 바뀌었을 것 이다.
이어서 이번엔 express 정적파일 컨트롤을 통하여 그림을 넣어보자.
express 에서 정적파일을 컨트롤 하기 위해서는 정적 파일이 있는 곳을 지정해 주어야 한다.
app.use(express.static('폴더 경로')) 로 지정을 한다.
config 폴더로 가서 express_config.js 파일을 수정하자.
var express = require('express'), morgan = require('morgan'), compress = require('compression'), bodyParser = require('body-parser'), methodOverride = require('method-override') ; module.exports = function() { var app = express(); if(process.env.NODE_ENV === 'development') { app.use(morgan('dev')); }else if (process.env.NODE_ENV === 'production') { app.use(compress()); } app.use(bodyParser.urlencoded({ extended : true })); app.use(bodyParser.json()); app.use(methodOverride()); app.set('views', './app/views'); app.set('view engine', 'ejs'); require('../app/routes/index.server.routes.js')(app); app.use(express.static('./static')); // new return app; }app.use(express.static('./static')) 으로 정적파일 폴더를 static 폴더로 설정 하였다.
여기서 주의해서 볼 것은 정적파일 폴더를 설정하는 미들웨어가 라우팅 파일 호출 전에 있다는 사실을 보자.
만약 정적 파일 설정 코드가 라우팅 파일 호출 위에 있다면 express 는 HTTP 요청 경로를 찾기위해 정적폴더를
먼저 찾아볼 것 이다. 이는 응답을 다소 느리게 만들기 때문에 정적폴더 호출은 꼭 라우팅 호출 밑으로 가야한다.
자 이젠 아까만든 ejs 파일에 그림파일을 넣어보자 .
먼저 static/images 폴더 안에 원하는 그림을 넣자.
그림을 넣었다면 app/views 폴더의 index.ejs 파일을 수정한다.
본인은 overwatchlogo.png 라는 고오급시계 로고 이미지를 넣었다.
<!DOCTYPE html> <html> <head><%= title %> </head> <body> <img src="images/overwatchlogo.png" alt="logo"> <h1><%= title %></h1> </body> </html>위와 같이 일반전인 img 태그로 경로를 지정해주자.
정적폴더를 static 로 설정했기 때문에 자동으로 static 안의 images 폴더를 찾아 갈 것 이다.
이제 저장하고 서버를 실행시켜 확인해보자.
고오급 시계 타이틀이 보이는가?
그림이 제대로 나오는지 확인하자.
이번 장에서는 ejs 뷰 시스템을 연결해서 직접 선보이는 것 까지 해보았다.
다음 장에서는 web application 에서 중요한 session 처리와 데이터베이스 연결 , 즉 mongodb 를 간단히
알아보고 연동해보자.
(끝)
(지금 까지 생성한 파일과 폴더 구조)
'MeanStack (deprecated)' 카테고리의 다른 글
8장 MeanStack 의 또 다른 조각 MongoDB 를 알아보자 (0) 2016.06.13 7장 express 를 활용한 session 처리 (2) 2016.06.12 5장 express 추가 구성, 다양한 환경 대응 (0) 2016.06.08 4장 express 를 활용한 Routing 처리 (0) 2016.06.08 3장 - express 를 활용한 Node.js 시작하기 (0) 2016.06.07
