ejs의 사용

tintwo·2022년 11월 27일

[InfLearn] Node.js 웹개발로 알아보는 백엔드 자바스크립트의 이해

목록 보기

5/11

ejs 부터 간단하게 살펴보고 다음 단계로 넘어가보자.

ejs 란?

Embedded JavaScript의 약자로, 자바스크립트가 내장되어 있는 html 파일이다.
ejs는 jsp나 부트의 mustach 처럼 바로 태그 안에서 서버로 부터 받은 값을 사용할 수 있다.
jsp는 html 태그 안에서 java 문법을 사용할 수 있었던 것 처럼, ejs는 js를 태그 안에서 사용할 수 있다.

그럼 어떻게 사용할까?

jsp나 mustach와 같다.
'<% %>', '<%= %>'를 사용한다.

<%= %>를 사용하면 바로 내용을 출력할 수 있고
<% %>는 출력하지는 않지만 코드를 작성할 수 있다.

예시를 살펴보자.

살펴보기 위해 app.js에서 처리를 해주는 부분을 만들어주자.

app.get('/ejs_test', function(req, res){
//ejs_test로 요청이 오면

  console.log('enter ejs test page')
  // console로 확인
  
  res.render('ejsTest.ejs', {word1: 'node js', word2: 'ejs', number: 37})
  // ejsTest.ejs 파일을 보내주며, json데이터로 word, number를 보내준다.
  // 이전 글에서 이상하게 시도하며 실패했던 연산도 쉽게 처리 가능하다.
})

ejsTest.ejs 파일로 응답을 해야하니 파일을 생성 해주자.

다시 한번 말하지만 ejs 사용전에는 static 폴더를 지정 해주고 불러와야 했으나,
ejs를 app에서 set해주었고, 그 때문에 views 폴더 안에 그냥 ejs 파일을 만들어주면 된다.

body 태그 안에 작성 해주자.

  <% for(let i = 1; i<= 5; i++) { %>
  // 코드 부분은 <% %>
    
    <h3>ejs print for test <%= i %> </h3>
	// i를 <%= 를 이용해 바로 출력 해줄 수 있다.
    
  <% } %> // for

서버로 부터 받은 데이터 처리

아까 응답할 때 같이 보낼 json 데이터가 제대로 오는지 확인하기 위해,
body 태그 안에 작성

<h2>data from server</h2>
    <li>word1 = <%= word1 %></li>
    <li>word2 = <%= word2 %></li>
    <li>number = <%= number %></li>
    <li><%= number * 320000 %></li>
    // 연산이 바로 되는지 궁금했다. 
    // 전 글에서 나는 뭘 위해 아렇게 간단히 연산이 되는데 이상한 짓을 한걸 까

연산도 잘 된다.

그렇다면 script안에서도 ejs의 문법을 사용할 수 있을까? 하는 의문이 들었다.

<button onclick="test()">test</button>
// 버튼 태그와 이벤트 함수를 만들어준다.


<script>

  function test(){
  // 위에서 클릭 이벤트에 호출 할 함수
  
    let num = String(<%= number %>);
    // 변수에도 사용이 잘 된다
    console.log('num = ', num);
   
    console.log('type of', typeof num);
    
    alert(<%= number %>);
    
  };

</script>