본문 바로가기
개발/Programming

[Node.JS] 강좌 10-1편: Express 프레임워크 응용하기 – EJS

by 카루딘 2017. 8. 10.
반응형

출처: https://velopert.com/379


강좌 09편에 이어 Express를 응용하는 방법에 대해 알아보겠습니다.
전 강좌와 같은 프로젝트를 사용하니, 강좌 09편을 읽지 않으신분은 전 강좌부터 읽어주세요.

강좌를 작성하다가 글이 너무 길어져서 3편으로 나누어 작성한 점 유의해주세요 🙂

10-1. EJS
10-2. Restful API
10-3. Session

0. 디렉토리 구조

express_tutorial/
├── data
│   └── user.json
├── node_modules
├── package.json
├── public
│   └── css
│       └── style.css
├── router
│   └── main.js
├── server.js
└── views
    ├── body.ejs
    ├── header.ejs
    └── index.ejs

이번 강좌에선 data/user.json 이 추가되었고 views/ 내부 파일들이 변경되었습니다.

1. 의존 모듈 추가

저번 강좌에선 그저 페이지 라우팅만 다뤘지만,
강좌 10편에서는 EJS엔진과 추가적으로 RESTful API,  그리고 세션을 다룰 것이므로 넣어줘야 할 의존 모듈들이 있습니다.
강좌를 작성하다가 길이 너무 길어져서 3편으로 나누어 작성한 점 유의해주세요 🙂

  • body-parser – POST 데이터 처리
  • express-session – 세션 관리

우선 전 강좌에서 작성했었던 package.json 을 업데이트 하세요.

{
  "name": "express-tutorial",
  "version": "1.0.0",
  "dependencies":
  {
    "express": "~4.13.1",
    "ejs": "~2.4.1"    ,
    "body-parser": "~1.14.2",
    "express-session": "~1.13.0"
  }
}

그 후 다음 명령어를 입력해 모듈을 설치합니다.

$ npm install

추가한 모듈들을 server.js 에서 불러오겠습니다.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var session = require('express-session');
var fs = require("fs")

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);


var server = app.listen(3000, function(){
 console.log("Express server has started on port 3000")
});

app.use(express.static('public'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(session({
 secret: '@#@$MYSIGN#@$#$',
 resave: false,
 saveUninitialized: true
}));


var router = require('./router/main')(app, fs);

Express 의 이전 버전에서는 cookie-parser 모듈도 불러와야했지만, 이젠 express-session 모듈이 직접 쿠키에 접근하므로 cookie-parser 를 더이상 사용 할 필요가 없습니다.

추가적으로, Node.js 에 내장되어있는 fs 모듈도 불러왔는데요, 이는 나중에 파일을 열기 위함이랍니다. 그리고 원래 상단에 있던 router 코드를 아래로 내려주세요 (Line 27) 이 코드가 bodyParser  설정 아래부분에 있다면 제대로 작동하지 않는답니다. 그리고 router 에서 fs 모듈을 사용 할 수 있도록 인자로 추가해 줍니다.

router/main.js 에서 첫번째 줄도 업데이트해주세요.

module.exports = function(app, fs)
// ... 생략

 

session 부분에서의  값에 대해서 알아보겠습니다:

  • secret – 쿠키를 임의로 변조하는것을 방지하기 위한 sign 값 입니다. 원하는 값을 넣으면 됩니다.
  • resave – 세션을 언제나 저장할 지 (변경되지 않아도) 정하는 값입니다. express-session documentation에서는 이 값을 false 로 하는것을 권장하고 필요에 따라 true로 설정합니다.
  • saveUninitialized – uninitialized 세션이란 새로 생겼지만 변경되지 않은 세션을 의미합니다. Documentation에서 이 값을 true로 설정하는것을 권장합니다.

 

2. EJS 템플릿 엔진

템플릿 엔진이란, 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈입니다. Express 에서 사용하는 인기있는 Jade 템플릿 엔진은 기존의 HTML에 비해 작성법이 완전 다른데,  그에 비해 EJS는 똑같은 HTML에서 <% %> 를 사용하여 서버의 데이터를 사용하거나 코드를 실행 할 수 있습니다.

EJS에서는 두가지만 알면 됩니다.

  1. <% 자바스크립트 코드 %>
  2. <% 출력 할 자바스크립트 객체 %>

2번에서는 자바스크립트 객체를 router 에서 받아 올 수도 있습니다.

 

VIEW로 데이터 넘기기

우선, 전 강좌에서 작성하였던 views/index.html과 views/about.html 을 삭제하시고,
router/main.js 를 다음과 같이 수정하세요.

module.exports = function(app, fs)
{
     app.get('/',function(req,res){
         res.render('index', {
             title: "MY HOMEPAGE",
             length: 5
         })
     });
}

JSON 데이터를 render 메소드의 두번째 인자로 전달함으로서 페이지에서 데이터를 사용가능하게됩니다.

 

VIEW 에서 데이터 접근 및 루프코드 실행

이제 views/index.ejs 를 다음과 같이 만들어 주세요.

<html>
  <head>
  <title><%= title %></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <h1>Loop it!</h1>
    <ul>
        <% for(var i=0; i<length; i++){ %>
            <li>
                <%= "LOOP" + i %>
            </li>
        <% } %>
    </ul>
  </body>
</html>

Line 3 : 라우터에서 title 받아와서 출력합니다.
Line 9~13: 루프문입니다.

출력

서버를 실행하고 http:/localhost:3000/ 에 접속해보세요.

$ node server.js

이미지 37

성공하셨나요? 자, 이제 view 코드를 여러 파일로 분리해봅시다.

EJS 분할하기

PHP나 Rails에서 처럼, EJS에서도 코드를 여러 파일로 분리하고 불러와서 사용 할 수 있답니다.
파일을 불러올땐 다음 코드를 사용합니다.

<% include FILENAME %>

 

index.ejs 파일의 head 와 body 를 따로 파일로 저장해서 불러와보겠습니다.

header.ejs 파일과 body.ejs 파일:

 <title>
     <%= title %>
 </title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <script>
    console.log("HelloWorld");
 </script>

<h1>Loop it!</h1>
<ul>
    <% for(var i=0; i<length; i++){ %>
        <li>
            <%= "LOOP" + i %>
        </li>
    <% } %>
</ul>

이렇게 파일이 준비됐다면, index.ejs 를 다음과 같이 수정하면 됩니다.

<html>
  <head>
    <% include ./header.ejs %>
  </head>
  <body>
    <% include ./body.ejs %>
  </body>
</html>

 

반응형
저작자표시 변경금지

'개발 > Programming' 카테고리의 다른 글

TCP 파라미터 튜닝을 통한 접속 증가 방법  (0) 2017.08.23
라즈베리파이3 라즈비안 설정 2차..  (0) 2017.08.19
Node와 Angular를 이용하여 간단한 TODO App 예제 샘플 만들어보기  (0) 2017.08.04
node.js 스터디 1일차  (0) 2017.08.03
In memory dictionary Redis 소개  (0) 2017.07.24

관련글

티스토리툴바