[Node.js] EJS로 html에 데이터 넣는법

• html안에 데이터를 꽂아넣으려면 템플릿 엔진이라는걸 쓰면 가능하다.

📌 템플릿 엔진(Template Engine)이란?

• 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어

• 웹사이트 화면을 어떤 형태로 만들지 도와주는 양식

• 웹 템플릿 엔진은 view code(HTML)와 data logic code(DB connection)를 분리해주는 기능을 한다.

📌 ejs

• 템플릿 엔진 중 하나인 ejs를 사용할 것

1. ejs 설치

npm install ejs

2. 코드 추가

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

3. views 폴더 생성후 ~~.ejs 파일 생성

📌 데이터 넣는법

1. 응답.render( ) 문법으로 ejs 파일로 서버에 있던 데이터를 전송

✔️ 응답.render() 의 둘째 파라미터에 { 작명 : 전송할데이터 } 하면
ejs 파일로 데이터가 전달된다.

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

2. ejs 파일 안에서 <%= 서버가보낸데이터이름 %> 쓰면 서버가 보낸 데이터가 html안에 보인다.

📌 ejs 파일을 다른 ejs 파일에 넣기

• ✔️ <%- include(넣을 ejs)%>

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

📍 <%- %> 사용하면 그 안에 들어있는게 html인 경우 그걸 실제로 렌더링해준다.
📍 <%= %> 사용하면 그 안에 들어있는게 html이어도 그걸 렌더링해주진 않고 일반 문자처럼 보여준다.

• ✔️ <%- include(list.ejs, {age: 20 })%>
  이런식으로 변수 전달할 수도 있다.