정적인 콘텐츠 : 내용이 바뀌지 않는 콘텐츠
동적인 콘텐츠 : 내용이 바뀌는 콘텐츠
템플릿 파일 : 데이터베이스에서 가져온 데이터 중 어떤 값을 어느 위치에 넣을지 미리 틀을 만들어 놓은 것
템플릿 엔진 : 데이터베이스에서 가져온 동적인 데이터를 템플릿 파일에 연결해 주는 것
EJS : 템플릿 파일 안에서 동적인 콘텐츠 부분을 자바스크립트로 처리하는 템플릿 엔진
-view engine : 뷰에서 사용할 템플릿 엔진을 설정
-views : 템플릿 엔진이 템플릿 파일을 어디에서 찾을 지 경로를 설정
//ejs 설치
>> npm install ejs
<%= 변수 %> : 다른 곳에서 받은 값을 넣을 때 사용
<% 자바스크립트 %> : 자바스크립트를 추가
<%- HTML 코드 %> : HTML 코드를 넣음
<app.js>, controllers - <contactController.js>, views - <getAll.ejs> : 템플릿 파일을 이용한 동적인 콘텐츠 표시
※app.set(키, 값) : 서버 설정을 위한 속성을 지정한다.
※res.render(ejs 파일, {변수: 전송 자료}) : 템플릿 파일로 값을 넘겨줌
※forEach : 배열의 각 요소를 순회하면서 요소의 내용을 화면에 표시
//app.js
const express = require("express");
const dbConnect = require("./config/dbConnect");
const app = express();
app.set("view engine", "ejs"); //템플릿 엔진을 ejs로 설정
app.set("views", "./views"); //템플릿 파일을 views로 설정
dbConnect();
app.get("/", (req, res) => {
res.status(200).send("Hello Node");
});
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/contact", require("./routes/contactRoutes"));
app.listen(3000, () => {
console.log("3000 포트에서 서버 실행 중");
});//contactController.js
(...)
//Get all contact, /contact
const getAllContact = asynchHandler(async (req, res) => {
const contact = await Contact.find();
const users = [ //임의의 데이터 값
{ name: "John", email: "john@aaa.bbb", phone: "123456789" },
{ name: "Jane", email: "jane@aaa.bbb", phone: "987654321" },
];
res.render("getAll", { heading: "User List", users: users }); //getAll.ejs로 변수 값 넘김
});
(...)<!--getAll.ejs-->
(...)
<body>
<h1><i class="fa-solid fa-address-card"></i>Contacts Page</h1>
<h2><%= heading %></h2> <!--heading 변수 표시-->
<ul>
<% users.forEach(user => { %> <!--배열의 각 요소를 순회하면서 요소의 내용을 화면에 표시-->
<li><strong>Name: </strong> <%= user.name %></li> <!--users.name 변수 표시-->
<li><strong>Email: </strong> <%= user.email %></li> <!--users.email 변수 표시-->
<% }) %>
</ul>
</body>
(...)
'Do it Node.js > EJS BackEnd' 카테고리의 다른 글
| 17. 연락처 추가 (0) | 2024.03.15 |
|---|---|
| 16. include, 연락처 표시 (0) | 2024.03.14 |
| 14. CRUD (0) | 2024.03.12 |
| 13. RESTful API (0) | 2024.03.11 |
| 12. 몽고DB, 스키마 (0) | 2024.03.08 |
