[Node.js] 노드제이에스 - 템플릿 엔진

Do it! Node.js 프로그래밍입문 9일차 입니다.

 

템플릿 엔진

대부분의 웹 사이트나 애플리케이션은 사용자의 동작에 반응해서 서버에서 자료를 가져와 바뀐 내용을 보여주어야 합니다. 이렇게 내용이 동작으로 바뀌는 것을 처리할 때 사용하는 것이 템플릿 엔진입니다. 템플릿 엔진은 EJS, 퍼그, 핸들바 등이 있습니다.

 

템플릿 파일과 템플릿 엔진

데이터베이스에서 가져온 데이터 중 어떤 값을 어느 위치에 넣을지 미리 틀을 만들어 놓은 것을 템플릿 파일이라고 합니다. 여러 템플릿 파일을 만들고 데이터베이스에서 가져온 동적인 데이터를 템플릿 파일에 연결해 주는 역할을 하는 것이 템플릿 엔진입니다.

 

EJS 기본 문법

뷰 엔진 설정하기

npm install ejs를 설치해줍니다.

 

app.set(key, value) // 뷰 엔진 설정 기본형

// key : 설정하려는 항목
// value : 설정값

app.set("view engine", "ejs") // .ejs 파일을 템플릿 파일로 설정
app.set("views", "./views") // views 폴더를 템플릿 파일을 저장할 폴더로 설정

 

EJS 엔진의 기본 사용법

컨트롤러에서 템플릿 파일로 값 넘기기

res.render(ejs파일, {변수: 전송자료})
두번째 매개변수는 ,를 사용해서 여러개 나열할 수 있습니다.

res.render("getAllContacts", {heading: "User List"})

"User List" 컨트롤러의 값을 heading이라는 변수에 담아서 getAllContacts ejs파일로 넘겨주는다는 의미

 

템플릿 파일에서 동적인 콘텐츠 처리하기

<%= 변수 %> 
- 다른 곳에서 받은 값을 넣을 때 사용합니다.
<% 자바스크립트 코드 %>
- 반복문이나 조건문 등 자바스크립트 코드를 추가로 필요로 할 때 사용합니다. 
<%- HTML 코드 %>
- HTML 코드를 넣을 때 사용합니다.

 

정적인 파일 연결

express.static(루트[, 옵션])

 

정적인 파일을 연결할 때는 하위 폴더 이름 앞에 /를 붙여야 합니다.