웹페이지에 DB데이터 꽂기 (EJS, 서버사이드 렌더링)

템플릿엔진을 사용하면 데이터를 웹페이지에 넣을수있음

 

ejs 템플릿엔진 쓸려면

 

설치

터미널에

npm install ejs

 

 

세팅

서버.js파일에

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

 

 

사용법

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

ejs 파일들은 전부 views라는 폴더만들어서 거기 보관하는게 룰임
그래서 저는 거기에 list.ejs를 만들어봤습니다. 
ejs 파일은 어려운거 없고 기본적으로 html이랑 똑같이 작성하면 됩니다.
근데 안에 살짝씩 ejs 문법써서 서버데이터를 집어넣을 수 있다는것만 다름 
그래서 글목록페이지같은걸 만들고 싶으니
거기맞는 레이아웃 디자인을 넣어보도록 합시다. 

데이터 넣는 법 

1. 일단 ejs 파일로 데이터를 보내고 
2. ejs 파일 안에서 ejs 문법써서 데이터를 원하는데 꽂으면 됩니다.

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('post').find().toArray()
  응답.render('파일이름.ejs', { 여긴작명 : result })
})

해석

응답.render('파일이름.ejs', { 맘대로작명 : 변수이름 })

응답.render : ejs 파일을 응답으로 보여는 방법 render(렌더)

파일이름에

가져온데이터에 이름붙혀서 전송

(그럼 파일이름.ejs파일에서 작명한이름 불러서 데이터 가져다 쓸수있음)

 

데이터 바인딩

서버사이드 렌더링 : html을 서버에서 보내줄때 미리 데이터를 채워주는걸 일컷는 말

클라이언트 사이드 렌더링 : 서버에서 빈html 과 데이터를 보내주면 유저의 컴퓨터에서 만드는것

 

 

 

ejs파일에서 데이터 띠우는법

위에서 데이터에 이름을 붙혀서 ejs파일에 보내는거 까지 함

이제 받아온 파일을 ejs파일에 넣어서 표시하는법을 해봄

 

<%= JSON.stringify(작명한데이터이름) %>
받아오는 데이터를 깨짐없이 ejs 파일에 띠워보기


<%= 작명한데이터이름[0].title %>
0은 보여주고싶은 데이터의 순번임

<% %> = <% ejs파일은 여기에 자바스크립트 문법을 쓸수있음 %>

 

다른 ejs파일의 내용을 가져오는 문법

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

만약 ejs파일의 이름을 nav로 작명한뒤 안에 네비게이션 바 코드를 넣어넣고 위의 코드를 쓰면

위코드를 쓴자리에 nav.ejs안에 내용을 모두 가졍와짐

위문법은 재사용성이 좋아짐

 

 

자바스크립트 for 반복문을 사용해서 모든 데이트를 표시하는 방법

<% for (let i = 0; i < 작명한이름.length; i++) { %>
<h4> <%= 작명한이름[i].title %> </h1>
<h1> <%= 작명한이름[i].text %> </h1>
<% } %>

 

<% %> : JS 코드 작성

<%_ _%> : 태그 내부 공백 제거

<%# %> : 주석

<%= %> : 변수 출력(html escape 처리)

<%- %> : html escape 처리 없이 출력