[NodeJS+Express] 6. EJS로 MongoDB 데이터 바인딩하기

저번 포스트까지 MongoDB를 서버와 연결하고 DB의 데이터를 꺼내오는 것까지 완료하였다.

이번에는 그 데이터를 이용하여 페이지를 제작해보자!

1. EJS (Embedded JavaScipt Template)

1) 간단하게 알아보기

EJS는 템플릿 엔진이다.

템플릿 엔진이란, DB나 API의 데이터와 미리 정의된 템플릿을 합쳐서 하나의 HTML 파일을 출력해주는 모듈이다.

특히 EJS는 JavaScript 문법을 그대로 사용할 수 있어서 현재 프로젝트에 아주 간편하게 활용할 수 있다.

 

 

2) 세팅하기

(1) 라이브러리 설치

npm install ejs

 

(2) server.js(서버파일) 수정

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

 

위 코드를 서버파일 상단에 작성한다.

 

(3) views 디렉토리 / ejs 파일 생성

템플릿 안에 데이터를 넣어주고 싶은 경우 .ejs 파일을 사용해야한다.

이때 ejs 파일들은 views라는 이름을 가진 디렉토리에서 관리해야한다.

 

예시

 

ejs 파일의 태그들은 html 파일과 동일하게 작성해주면 된다. (정적파일 적용도 동일)

 

(4) ejs 파일 서버 등록

//server.js
app.get('/path명', (request, response) => {
  response.render('파일명.ejs');
})

html파일과 다르게 sendFile()이 아닌

render()를 이용한다.

 

 

3) 데이터 바인딩하기

본격적으로 DB의 데이터를 가져온 뒤 ejs파일에서 보여주도록 하자!

 

그 과정을 요약하면 아래와 같다.

1. DB에서 ejs파일로 데이터 보내기
2. 데이터를 ejs 파일 내 원하는 위치에 바인딩

 

(1) 데이터 가져오기

DB의 데이터를 가져올 때는 지난 글에서 다뤘던 것처럼

비동기처리를 해야한다.

 

사용법

app.get('/path명', async (request, response) => {
  let result = await db.collection('설정한 collection명').find().toArray();
  response.render('파일명.ejs', {변수명 : result});
})

위와 같은 형식으로 가져온 데이터를

{변수명 : 데이터}로 render함수에 전달한다.

 

(2) ejs 파일 내 바인딩

<%= 변수명 %>

이러한 태그를 이용해 원하는 위치에서

render 함수에 전달한 변수로 데이터를 가져올 수 있다.

 

 

예시

MongoDB에 저장되어있는 데이터 이다. 이것을 가져와보자!

 

 

//server.js
app.get('/list', async (request, response) => {
  let result = await db.collection('post').find().toArray();
  response.render('list.ejs', {list : result});
})

 

//list.ejs
<%= JSON.stringify(list) %>

(JSON.stringify() 를 이용하면 JSON 형식을 string으로 바꾸어 주는데, 시각적으로 잘 확인할 수 있어 좋다!)

 

결과

 

글 목록을 정상적으로 받아온 것을 확인할 수 있다!

 

 

다음 포스트에서 DB 목록에 있는 데이터를 이용해서 글 목록 리스트를 만들어보자!