EJS, 서버사이드 렌더링

김유찬·2023년 9월 25일

Node.js & MongoDB

목록 보기

4/4

ejs는 자바스크립트가 내장되어 있는 html 파일이다.

node.js 진영에서 많이 사용되는 템플릿엔진이고 단순한 문법으로 서버의 데이터를 사용하거나 코드를 실행할 수 있다.

<% %>

ejs는 html의 태그처럼 자바스크립트의 내용을 삽입할 수 있는데 이를 이용해 페이지를 동적으로 짜는 것을 수월하게 해준다.

1.ejs 파일로 데이터를 보낸다.
2.ejs 파일 안에서 ejs분법을 사용해 데이터를 원하는 곳에 집어 넣는다.

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

{글목록: result}라는 코드를 통해 ejs 파일로 데이터가 전달되게된다. 즉, 위 코드에서는 글목록이라는 이름으로 result안에 들어있는 게 전달된다.

<%= 글목록 %>

이제 ejs 파일 안에서 위와 같은 문법을 사용해 코드를 작성하면 출력해볼 수 있다.
Array, Object 데이터를 그대로 html에 넣을 경우에는 JSON.stringify() 안에 적어야 안깨지고 잘 보인다.

간단히 말해 html을 서버측에서 데이터를 채워 완성본을 유저에게 보내주는 것을 말한다.

이와 반대로 클라이언트사이드 렌더링은 html을 서버에서 만들어 보내는 게 아니라 빈 html과 데이터만 유저에게 보내고 html 내용은 JS로 유저 브라우저에서 생성하는 것을 말한다.

eukddan