6.Node js Express-2(EJS)

node JS

6.Node js Express-2(EJS)

Clasha 2020. 1. 11. 17:09

Express응용에 관해서 알아보자.

EJS, Restful API, Session이 있으며 이번에는 EJS의 기본적인 것들 먼저 사용해 보겠다.

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이 추가되었고,

view폴더 내부의 html파일들이 ejs파일들로 변경되었다.

지난번에는 페이지 라우팅만 했지만

이제부터는 EJS와 Restful API 그리고 Session을 다룰 것이기 때문에

npm install 명령어를 사용해서 설치해주자.

설치해줄 모듈들은 아래와 같다.

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"
  }
}

이제 추가한 모듈들을 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 모듈이 직접 쿠키에 접근하므로 이제 사용할 필요가 없다.

추가적으로 Node js에 내장되어 있는 fs모듈도 불러와준다.

router폴더에 있는 main.js파일의 맨 위에 아래의 코드를 추가해준다

module.exports = function(app, fs)

session에서의 값에 대해 알아보자면.

secret – 쿠키를 임의로 변조하는것을 방지하기 위한 sign 값이다. 원하는 값을 넣으면 된다.

resave – 세션을 언제나 저장할 지 (변경되지 않아도) 정하는 값. express-session documentation에서는 이 값을 false 로 하는것을 권장하고 필요에 따라 true로 설정한다.

saveUninitialized – uninitialized 세션이란 새로 생겼지만 변경되지 않은 세션을 의미한다. Documentation에서 이 값을 true로 설정하는것을 권장한다.

EJS 템플릿 엔진이란, 템플릿을 읽어 엔진의 문법과 설정에 따라 파일을 html형식으로 변환시키는 모듈이다.

Express에서 사용하는 Jade 템플릿 엔진은 기존의 html과 작성법이 다른데 그에 비해서 EJS는 html내에서

<% %>를 사용해서 서버의 데이터를 사용하거나 코드를 실행할 수 있다.

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

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

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

view로 데이터를 넘겨주기 위해서 전에 작성했었던 view폴더에 있는 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폴더 안에 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>

서버를 실행하고 http//localhost:3000/에 접속하면 아래처럼 출력된다.

이제 header와 body파일도 만들어 보겠다.

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

header.ejs파일

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

body.ejs파일

두 파일을 만들고 나면 index.ejs를 수정해주자.

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

이제 EJS의 기본적인 사용법이다.