EJS로 Dynamic Website 만들기

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

이 게시물의 소스코드는 Hello World! / Static 폴더 추가하기에서 이어집니다.

hello-world.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.

git reset --hard
git pull
git reset --hard 38f5b9f
git reset --soft 852384b
npm install
atom .

hello-world.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 hello-world.git 을 clone 합니다.

git clone https://github.com/a-mean-blogger/hello-world.git
cd hello-world
git reset --hard 38f5b9f
git reset --soft 852384b
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/hello-world/tree/38f5b9feb6912bcba26ad8d7fab04a4c9217a96e


EJS를 사용해서 dynamic website를 만들어 봅시다.
/hello route을 추가하고 query, route parameters로 이름을 입력받아 인사말을 출력하는 페이지를 추가합니다.

EJSEmbedded Javascript의 약자로 Express에서 dynamic website를 만들기 위해 template으로 사용되는 파일(확장자 이름은 .ejs)입니다.

폴더구조

주황색은 변경된 파일, 녹색은 새로 생성된 파일, 회색은 변화가 없는 파일입니다.

Package 설치

EJS를 사용하기 위해서는 NPM으로 ejs package를 설치해 주어야 합니다.

$ npm install --save ejs

코드

// index.js

var express = require('express');
var app = express();

app.set("view engine","ejs"); // 1
app.use(express.static(__dirname + '/public'));

// 2
app.get("/hello", function(req,res){
 res.render("hello", {name:req.query.nameQuery});
}); 

// 3
app.get("/hello/:nameParam", function(req,res){ 
 res.render("hello", {name:req.params.nameParam});
});

app.listen(3000, function(){
 console.log('Server On!');
});

1. ejs를 사용하기 위해서 express의 view engine에 ejs를 set하는 코드입니다.

2. query를 통해서 이름을 받는 코드입니다. 모든 query들은 req.query에 저장됩니다.

3. route parameter를 통해 이름을 받는 코드입니다. 콜론(:)으로 시작되는 route은 해당 부분에 입력되는 route이 req.params에 저장됩니다.
예를들어 /hello/Kim을 입력하면 "/hello/:nameParam"에 의해 세미콜론이 있는 route의 2번째 부분 즉, Kim이 req.params.nameParam에 저장됩니다.

ejs파일을 사용하기 위해서는 res.render 함수를 사용해야 하며, 첫번째 parameter로 ejs의 이름을, 두번째 parameter로 ejs에서 사용될 object를 전달합니다. res.render함수는 ejs를 /views 폴더에서 찾으므로 views폴더의 이름은 변경되면 안됩니다.

<!-- views/hello.ejs -->

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Hello World!</title>
  <link rel="stylesheet" href="/css/master.css">
 </head>
 <body>
  <h1>Hello
   <% if(name){ %>
    <span class="name"><%= name %>!</span>
   <% } else { %>
    <span class="stranger">Stranger!</span>
   <% } %>
  </h1>
 </body>
</html>

EJS는 html에 js 코드가 더해진 형태를 하고 있습니다. 다만 모든 js 코드들은 <% %>에 들어가야 합니다.
변수를 출력할때는 <%= 변수이름 %>을 사용합니다.

위 예제에는 name이 있으면 name을 출력하고, name이 없으면 Stranger를 출력하고 있습니다.

/* public/css/master.css */

h1 {
 color: tomato
}
.stranger {
 color: orange
}
.name {
 color: cornflowerblue
}

이름이 있을때와 없을때 글자 색을 다르게 표현해 보았습니다.

실행결과

localhost:3000/hello로 접속시 접속 주소에 query도 없고 hello뒤에 route도 없으므로 index.js에서 name을 가지지 못해 strange가 출력됩니다.


localhost:3000/hello?nameQuery=Mike로 접속시 접속 주소 nameQuery의 값을 받아서 이름이 출력되었습니다.


localhost:3000/hello/Jane으로 접속시 hello 다음 Jane을 route parameter로 받아서 이름이 출력되었습니다.

마치며..

단순히 html을 보여주는 것이 아니라 정보를 입력받고, 결과를 출력하는 웹어플리케이션을 만들어 보았습니다.
이 강의에서는 받은 이름을 그대로 출력하고 있지만, 날짜를 입력받아 d day를 보여준다든가, 바이오리듬을 계산한다든가 등으로 응용할 수도 있습니다. 하지만 DB가 없으니 활용이 제한적이겠죠.

Hello World 강의는 여기가 끝이고 다음 강좌 시리즈는 DB를 활용해서 본격적으로 웹어플리케이션을 만들어 보겠습니다.

댓글

S
Sean Park 2016.11.06
잘봤습니다!
j
jungbin lee 2016.12.28
혹시 아톰에 어떤 패키지를 사용해야 새로 생성된 파일 색상을 구분할 수 있을까요?
I
Ian H 2016.12.28
@jungbin lee,
그건 패키지없이도 자동으로 되는데요, git 저장소를 만들어야 작동합니다.
성준영 2017.01.17
front-end의 변수 혹은 함수를 실행하는 방식이 jsp와 상당히 흡사하네요 <% %>로 조건문을 열고 <%= %>로 변수를 호출하는 부분이요..ㅎㅎ 그렇다면 혹시 EJS에도 jsp2.0의 el태그와 jstl 같이 조건문같은 기능을 Element 형색으로 사용하게 만들어진 라이브러리 같은게 있나요??
I
Ian H 2017.02.17
@성준영,
있을지도 모르겠지만 저는 잘 모르겠어요. 사실 EJS는 Node.js 배우는 과정에서 한번 쓱 익히고 넘어가는 거라..
마늘빵뿌잉 2017.04.02
안녕하세요! 우선 좋은 글 감사합니다. ejs파일 예제에서  <sapn class <- 이 부분 오타인듯합니다..
그리고 /hello/Jane에 대한 결과가 여전히 Hello Stranger! 라고 나옵니다.  왜 그런걸까요? ㅜㅜ
I
Ian H 2017.04.03
@마늘빵뿌잉,
안녕하세요, 그런 오타가 있었네요^^; 수정했습니다. 혹시 app.get("/hello/:nameParam" 여기서 : 를 빼먹으신건 아니신지!?
코드를 github에 올리시면 제가 한번 확인해 볼게요.
박광중 2017.10.09
index.js의 "app.use(express.static(__dirname + '/public'))로 /public" 를 찾아가는 건 이해했습니다만 "views" hello.ejs는 어떻게 경로를 찾아서 처리가 되는지 궁금합니다
I
Ian H 2017.10.10
@박광중,
views path는 express에서 기본으로 현재경로/views 설정됩니다. 이 부분을 바꾸고 싶으면 app.set("views", **PATH**); 를 넣어주면 됩니다.
정현우 2018.08.08
죄송합니다 조금 헷갈려서요 혹시 실행 순서를 알려 주실 수 있나요 1.3000번 포트로 접속 하면 static  메소드 실행  index.html 를 찾고 2./hello 를 get으로 호출하면 ejb에 있는 코드를 먼저 호출 하는지 아니면 index.js get 함수가 먼저 호출 되는지를 잘 모르겠어요 
I
Ian H 2018.08.08
@정현우,
res.render("hello", ... 를 통해서 hello.ejs 파일이 호출되므로 index.js의 코드가 먼저 실행되어야 합니다.
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP