728x90
반응형
SMALL
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(루트[, 옵션])
정적인 파일을 연결할 때는 하위 폴더 이름 앞에 /를 붙여야 합니다.
728x90
반응형
LIST
'Node.js' 카테고리의 다른 글
[Node.js] 노드제이에스 - 쿠키와 세션 (0) | 2024.02.14 |
---|---|
[Node.js] 노드제이에스 - 폼에서 라우트 처리 (0) | 2024.02.13 |
[Node.js] 노드제이에스 - CRUD 코드 작성 (0) | 2024.02.10 |
[Node.js] 노드제이에스 - 컨트롤러 작성 (0) | 2024.02.10 |
[Node.js] 노드제이에스 - CRUD를 위한 API 작성 (0) | 2024.02.10 |
댓글