본문 바로가기
node.js

[node.js][3] ejs 사용설명서

by 야호호코코 2019. 2. 21.
반응형


지난 글에서는..

 
 express모듈의 GET과 POST 함수 사용법을 알아보았다. 이로써 주소창에 입력한 디렉토리 별로 페이지를 다르게 출력하고, 서버에 POST요청을 보낼 수도 있게 되었다. 이번 글에서는 ejs에 대해 알아보도록 하자. ejs를 다 알고있다면 맨 밑에 유의점도 나름 고초를 겪고나서 써본 것이니 그것만 읽어도 된다.




[3][0] ejs란?


 ejs는 Embedded JavaScript의 약자로, 쉽게 말하면 자바스크립트가 내장되어 있는 html 파일이다. html에도 자바스크립트를 넣을 수 있지 않냐고? html 안에 내장되어 있는 것과 바깥에서 건드리는 것의 차이다. 볼품없는 그림으로 한 번 설명해드리겠다.  



왼쪽은 ejs, 오른쪽은 html파일의 자바스크립트를 이용한 div여러개 만들기


 ejs는 html의 태그처럼 자바스크립트 내용을 삽입할 수 있다. 매우 큰 강점인데, 이것을 이용해 페이지를 동적으로 짜는 것이 수월해진다. 일반 html 파일은 무조건 <script> 태그를 이용해 분리를 시켜야하지만, ejs는 지정된 태그를 통해 스크립트 내용을 하나의 요소처럼 사용될 수 있게 한다. 또한 서버에서 보낸 변수를 가져와 사용할 수 있다! 지난 글에서 살펴보면 변수를 넣을 수 있는 부분이 있었다! 하지만 예시에선 안 넣었지



[3][1] 코드를 내장시키자 - <% %> 태그

 

 ejs에는 자바스크립트를 내장 시킬 수 있는 2가지의 태그가 있다. 가장 기본이 되는 것은 <% %> 이다. 저 사이에 원하는 자바스크립트 내용을 넣으면 된다. 예시로 보자면


<html>
    <head>
        <title>22222TESTESTEST22222</title>
    </head>
    <body>
        <% for (var i = 0; i < 5; i++) { %>
            <h1>안방으로 들어왔습니다.</h1>
        <% } %>
    </body>
</html>

 test2.ejs를 수정한 것이다. 저렇게 하면 예상결과가 뻔하지 않은가? '안방으로 들어왔습니다.'가 5번 나올 것이다. app.js를 실행해 확인해보자.


좀 무섭다.

 

 주의할 점은 <% %>안에는 무조건 자바스크립트 코드가 들어가야한다. 그리고 줄바꿈을 하면 새로운 <% %>를 이용해야 한다. 더 알아야할 사항이 있지만 그것들은 하나의 태그를 더 알아본 뒤 끝에 정리하겠다.



[3][2] 변수값을 내장시키자 - <%= %> or <%- %> 태그


 또 하나의 태그로는 <%= %> 혹은 <%- %> 태그가 있다. 두 가지 표기법이 있지만 역할은 똑같다. 이 태그의 역할은 해당 태그 안의 변수 값을 그대로 코드처럼 옮겨주는 것. 동적으로 페이지를 만들 때 아주아주 편하게 해주는 기능이다. 이 태그를 썼을 때는 변수의 자료형 이런거 생각하지말고 그냥 코드로 들어가 있다고 생각해야된다. 예를 들어 주겠다.


<html>
    <head>
        <title>22222TESTESTEST22222</title>
    </head>
    <body>
        <% for (var i = 0; i < 5; i++) { %>
            <h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
        <% } %>
    </body>
</html>

 아까의 test2.ejs를 수정한 것이다. 결과를 예측해보자. <% %>안 for문으로 묶인 공간 안에 <%= i + 1 %>를 넣었으니 i가 1부터 5까지 증가하면서 출력이 될 것이다. 이와 같이 <% %>로 묶은 범주안에 <%= %>를 쓰는 식으로 혼용해서 쓸 수도 있다.


아까보단 덜 무섭다.


 

 위에서 말했듯 이 태그 안에 있는 변수는 그 값이 코드처럼 들어가게 된다. 그래서 변수의 자료형이 문자열이라고 실수를 해서는 안된다. 예를 들기 이전에 <% %>, <%= %> 태그는 ejs 안에 넣은 자바스크립트 코드에도 내장시킬 수 있다! 예를 들면,

 

<html>
    <head>
        <title>22222TESTESTEST22222</title>
    </head>
    <body>
        <% for (var i = 0; i < 5; i++) { %>
            <h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
        <% } %>
    </body>
    <script>
        var test = <%= "test1" %>;
        alert(test);
    </script>
</html>

 이렇게 쓰면 안된다는 것이다. <%= "test1" %>은 예를 들기위해 쓴 것으로 저렇게 굳이 쓰지 않길 권장한다. <%= %> 태그 안의 값은 무조건 코드처럼 삽입 된다. 문자열이든 숫자이든 그냥 그대로 코드로 옮겨진다. 개발자모드로 보면 var test에 "test1"이 저장되는게 아니라 변수명 test1을 저장하라는 코드로 나타나있을 것이다.


 그래서 코드로 삽입하면서 문자열 형식으로 나타내고 싶을 때는 "<%= %>" 식으로 치면 된다. 저 예시에서는

 

<html>
    <head>
        <title>22222TESTESTEST22222</title>
    </head>
    <body>
        <% for (var i = 0; i < 5; i++) { %>
            <h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
        <% } %>
    </body>
    <script>
        var test = |<%= "test1" %>";
        alert(test);
    </script>
</html>

 이렇게 고치면 된다.



[3][3] 서버에서 넘겨준 변수 사용하기


 사실 방법이랄게 없을 정도로 간단하다. 예시를 위해 app.js에서 test2.ejs를 render하는 부분에 변수를 넘겨줘보자. 넘기는 변수는 object 형식으로 넘겨야 하기 때문에 '변수명 : 값'으로 나타내준다. 구분은 콤마(,)로 한다. 

const express = require("express");
const ejs = require("ejs");
const bodyParser = require('body-parser');          // body-parser 요청
const app = express();

app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: false}));  // urlencoded    
app.use(bodyParser.json());                         // json 타입으로 파싱하게 설정
app.use(express.static(__dirname + '/'));

app.get("/", function(req, res){
    
    res.render("test1", {});
    
});

app.get("/hello", function(req, res){
    // 수정된 부분
    res.render("test2", {
        one : "this is one",
        two : "this is two"
    });
    // 수정된 부분
});

app.post("/postTest", function(req, res){   // postTest라는 주소로 POST요청이 들어오면 실행
   
    console.log(req.body);      // body에 있는 정보를 콘솔창에 출력.
    res.json({ok:true, name:req.body.name});        // 클라이언트에 성공했다고 신호를 보냄.
    
});

app.listen(3000, function(){
    console.log("실행중..."); 
});

 이렇게하면 이제 test2.ejs로 변수 one과 two가 넘어가게 된다. 그러면 test2.ejs로 넘어가 one과 two를 써보면 된다. 방법은 간단하다. 그냥 넘겨진 변수명을 그대로 쓰면 된다.

<html>
    <head>
        <title>22222TESTESTEST22222</title>
    </head>
    <body>
        <% for (var i = 0; i < 5; i++) { %>
            <h1>안방으로 <%= i+1 %>번째 들어왔습니다.</h1>
        <% } %>
        <h1><%= one %></h1>
        <h1><%= two %></h1>
    </body>
</html>

안방에 몇 번 들어가는 걸까


 별 다른 방법 없이 그냥 서버에서 넘긴 변수명을 쓰면 ejs에서 그대로 가져와 쓸 수 있다. 



[3][4] <% %>, <%= %> 사용 시 유의점 

 

 가장 중요한 부분이다. 모른채로 직접 부딪혀 봐도 이해하는 데는 어렵지 않으나 미리 알고가면 더 좋다.


0. <% %>는 한줄로 쭉 써야된다. 

 말 그대로이다. 위에서 말했듯 <% %>안에 코드를 쓰다 개행을 하면 다시 <% %>를 써서 코드를 진행해야한다. 


1. <% %>로 변수 선언을 하면 스코프 적용이 된다. ejs 내 자바스크립트와 <% %>안의 변수명은 겹쳐도 따로 인식된다.

 전역변수와 지역변수의 개념이 html 코드 안에서 똑같이 적용된다. 만약 <script> 태그 안의 코드와 <% %>를 같이 쓰다가 변수명이 겹친더라도 걱정하지 말길. html 내 코드와 <% %> 내 코드는 분리되어 있다.


2. var a = <%= 1 %>;은 되지만 <% var a %> = 1;은 안된다. 

 내장된 코드의 값을 html 파일로 불러오는 것은 되지만 내장시킬 코드에 html 파일에 있는 값을 넣는 것은 불가능하다.


3. <%= 문자열 변수 %>는 코드 해독 때 문자열로 인식되지 않는다.

 <%= %> 태그는 해당 변수의 값을 그대로 코드로 박아넣는 것이기 때문에 변수형을 가리지 않는다. 선언되지 않은 변수이면 undefined라는 코드를 그대로 갖다 넣는다. 그렇기 때문에 문자열로 저장하려면 "<%= %>" 식으로 써야된다.


4. <% %> 내 코드는 개발자 모드로 볼 수 없다.

 내장된 <% %> 자바스크립트 코드는 개발자 모드로 봐도 안보인다. 위에 있는 안방에 들어왔습니다. 예시는 따라해보고 개발자 모드로 보면 <h1> 코드 5개만 달랑있을 것이다. <%= %>는 코드로 심어버리는 거라 보인다.


5. 괄호 여닫기를 똑바로 하자.

 어느 코드에나 해당되는 말이지만, ejs를 쓸 때 헷갈릴 수도 있다. <% %>태그 때문이다. 개행을 하면 <% %>를 새로 써야되기 때문에 중괄호를 열었다면 끝에 항상 <% } %>가 있는지 확인하자. ejs 코드가 길어지면 좀 어지럽다. 




 오늘은 글이 많이 길어졌다. 그 만큼 ejs는 활용할 곳이 많다. 아직 내가 모르는 부분도 분명 많을 것이다. 다음 글에서는 가장 기초적인 동적페이지를 만드는 법을 포스팅 해보겠다.


저작자표시 비영리 동일조건

'node.js' 카테고리의 다른 글

[node.js][4] 간단한 ejs 동적 페이지 만들어보기  (7) 2019.08.11
[node.js][2] GET과 POST 써보기  (3) 2019.01.17
[node.js][1] express로 페이지 올려보기  (0) 2019.01.11

관련글

티스토리툴바