EJS, 서버 사이드 렌더링

템플릿 엔진

html 안에 서버에 있던 데이터를 꽂아 넣을 수 있습니다. 여러 종류 중 가장 쉽고 간단한 ejs를 사용해 봅시다. 다른 유형의 템플릿 엔진은 새로운 문법을 많이 익혀야 하지만 ejs는 자바스크립트 문법 그대로 사용할 수 있습니다.

ejs 셋팅

npm install ejs

app.set('view engine', 'ejs') 

터미널에서 ejs를 설치하고 서버 파일 상단에 view engine 사용 문법을 적습니다. 그럼 ejs를 사용해 html 파일 안에 데이터를 꽂아 넣을 수 있습니다.

list.ejs 파일 만들고 보내주기

html 파일 안에 데이터를 꽂아 넣고 싶으면 .ejs 파일을 만들어서 거기에 데이터를 꽂아넣으면 자동으로 html로 변환해줍니다.

여기서 ejs 파일은 views 폴더를 만들어 여기에 보관해야 합니다. ejs 파일은 기본적으로 html과 동일하게 작성하면 됩니다. 근데 안에 살짝씩 ejs 문법을 써서 서버 데이터를 집어넣습니다.

app.get('/list', (요청, 응답) =>{
  응답.render('list.ejs')
})

server.js 파일 안에 위의 코드를 작성하고, 웹브라우저에서 /list 페이지를 방문하면 글목록 페이지를 보내줍니다.

여기서 ejs 파일을 유저에게 보내주고 싶으면 응답.render( )라고 쓰고 views 폴더 안에 있던 ejs 파일의 경로를 적어주면 됩니다.

데이터 넣는 법

이제 서버에 있던 DB 데이터를 list.ejs에 넣어주면 글목록 페이지를 만들 수 있습니다. 서버 데이터를 list.ejs 파일에 넣고 싶으면 2가지 단계가 있습니다.

1. ejs 파일로 서버에서 받은 데이터를 보내줍니다.
2. ejs 파일 안에서 ejs 문법을 사용해 데이터를 원하는 곳에 넣습니다.

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('post').find().toArray()
  응답.render('list.ejs', { 글목록 : result })
})

ejs 파일로 서버에서 받은 데이터를 보내주기 위해서는 응답.render( )의 두번째 파라미터에 { 작명 : 전송할 데이터 } 적으면 ejs 파일로 데이터가 전달 됩니다. 위에서를 글목록 이라는 이름으로 데이터가 저장되어 보내집니다.

이제 ejs 파일 안에서 <%= 글목록 %> 문법 안에 아까 작명한 것을 담으면 출력 가능합니다.

그런데 array object 데이터를 그대로 html에 넣을 경우 JSON.stringify() 안에 적어야 데이터가 깨지지 않고 잘 보입니다.

(list.ejs 파일 아무데나)
<%= JSON.stringify(글목록) %>

(list.ejs)

<div class="white-bg">
  <div class="list-box">
    <h4><%= 글목록[0].title %></h4>
    <p>글내용</p>
  </div>
  <div class="list-box">
    <h4>글제목</h4>
    <p>글내용</p>
  </div>
</div> 

위와 같이 코드를 작성하면 첫번째 글목록의 제목 부분은 글목록[0].title인 첫게시물이 들어갑니다. 원하는 곳에 원하는 데이터를 넣기 위해서 <%= %>와 array, object 문법을 적절하게 사용해야 합니다.

서버 사이드 렌더링

html을 서버 측에서 데이터를 채워서 유저에게 완성해서 보내주는 방식

클라이언트 사이드 렌더링

• 텅비어 있는 html과 데이터만 유저에게 보냄
• html 내용은 자바스크립트와 유저 브라우저로 생성

이 경우 모바일 앱 처럼 부드러운 사이트 만들기 가능해집니다. 주로 리액트를 쓰면 클라이언트 사이드 렌더링이 쉬워집니다.

하지만 클라이언트 사이드 렌더링의 단점으로

1. 웹페이지가 무거워져 퍼포먼스가 안좋아집니다.
2. SEO에 좋지 않아 검색시 노출이 잘 되지 않음

ejs 파일 안에서 자바스크립트 문법 쓰기

ejs 파일 안에서도 자바스크립트 문법을 사용할 수 있어 for, if 등을 사용할 수 있습니다. 특히 for 반복문을 사용하면 html 복붙이 가능합니다.

사용하고 싶다면 <% %> 안에 작성하면 쓸 수 있습니다.

(list.ejs)

<% for (var i = 0; i < 3; i++){ %>
  <h4>안뇽</h4>
<% } %> 

이렇게 사용하면 “안뇽”이 3번 반복 생성됩니다.

(list.ejs)

<% for (var i = 0; i < 글목록.length; i++){ %>

  <div class="white-box">
    <div class="list-box">
    <h4><%= 글목록[i].title %></h4>
    <p><%= 글목록[i].content %></p>
  </div>

<% } %> 

위와 같이 코드를 작성하면 글이 100개가 있어도 직접 하드 코딩할 필요 없이 글의 개수만큼 리스트를 만들어 보여줍니다.

또 if 문을 사용해서 html을 조건부로 보여줄 수 있는데, 좋아요 개수 100개 넘으면 핫게시물로 뱃지를 부여할 수 있습니다.

html을조립식으로 첨부하기 (include)

ejs 파일 안에 다른 ejs 파일을 넣을 수 있습니다. 여러 ejs 파일에서 자주 사용하는 html 덩어리는 따로 ejs 파일로 만들고 다른 ejs 파일에 넣어서 불러와 사용하는 방식도 가능합니다.

예들 들어, 모든 페이지에 상단바가 있다고 한다면 상단바만 있는 ejs 파일을 만들어 놓은 뒤 다른 ejs 파일에 넣어서 사용하는 겁니다.

(views/navbar.ejs)

<div class="navbar">
  <a class="logo">forum</a>
  <a>page1</a>
  <a>page2</a>
</div>

(list.ejs)

<%- include('navbar.ejs') %>

1. 이렇게 navbar.ejs 파일을 views 폴더 안에 만들어 두고 html을 작성해둡니다.
2. 필요한 다른 ejs 파일로 가서 <%- include(‘navbar.ejs’) %>를 작성하면 navbar.ejs 안에 있던 html이 그 자리에 붙여집니다.

<%- %> & <%= %> 차이

<%- %> 사용하면 그 안에 들어있는게 html인 경우 그걸 실제로 렌더링해줍니다.

예를 들어 <button>을 집어넣으면 진짜 클릭이 가능한 버튼이 렌더링 되어 나옵니다. 그래서 상단바를 넣을 때 <%- %> 안에 작성해서 클릭할 수 있는 상단바로 렌더링한 겁니다.

<%= %> 사용하면 그 안에 들어있는게 html이어도 그걸 렌더링해주진 않고 일반 문자처럼 보여줍니다.

안에 <button>태그를 작성해도 클릭할 수 있는 버튼이 아닌 텍스트 그대로 <button>이 나옵니다.