๐ ๊ณต๋ถํ๋ ์ง์ง์ํ์นด๋ ์ฒ์์ด์ง?
[Login & Register authentication with Node js] (2) ejs๋ก html ํ๋ฉด ๋์ฐ๊ธฐ ๋ณธ๋ฌธ
๐ฉ๐ป ๋ฐฑ์๋(Back-End)/Node js
[Login & Register authentication with Node js] (2) ejs๋ก html ํ๋ฉด ๋์ฐ๊ธฐ
์ง์ง์ํ์นด 2023. 3. 14. 23:43728x90
๋ฐ์ํ
<๋ณธ ๋ธ๋ก๊ทธ๋ Traversy Media ์ ์ ํ๋ธ๋ฅผ ์ฐธ๊ณ ํด์ ๊ณต๋ถํ๋ฉฐ ์์ฑํ์์ต๋๋ค :-)>
=> Node.js With Passport Authentication | Full Project
=> authentication app with login, register and access control using Node.js, Express, Passport, Mongoose
๐ฅ ejs (Embedded JavaScript)
: JavaScript๋ก HTML ๋งํฌ ์ ์ ์์ฑ ํ ์์๋ ๊ฐ๋จํ ํ ํ๋ฆฟ ์ธ์ด ( view๋ฅผ ๋์ ์ผ๋ก ์์ฑํ๋ ํ ํ๋ฆฟ ์ธ์ด )
์ฐธ๊ณ => https://noodler.tistory.com/26
<% %> |
ํ๋ฆ ์ ์ด๋ฌธ |
<%= %> |
๋ณ์ ๊ฐ
|
<%- %> |
์์ฝ์ด |
<%- include('view์ ์๋์ฃผ์') %> |
๋ค๋ฅธ viewํ์ผ์ ๋ถ๋ฌ ์ด |
๐ฅ ejs ์ฐธ๊ณ ์ฌ์ดํธ (bootstrap.min.css)
๐ฅ font ์ฐธ๊ณ ์ฌ์ดํธ (css)
๐ฅ bootstrap ์ฐธ๊ณ ์ฌ์ดํธ (min.js)
https://getbootstrap.com/docs/5.3/getting-started/introduction/
๐ฅ "welcome" ejs ํ์ด์ง ๋์ฐ๊ธฐ
๐ง app.js
const express = require("express");
const expressLayouts = require("express-ejs-layouts");
const app = express();
// ejs ๋ฏธ๋ค์จ์ด
app.use(expressLayouts);
// express ์ view ์์ง์ ejs ๋ก ์ธํ
app.set("view engine", "ejs");
// set ์ ํ ๋ถ๋ถ์ layout ํด๋์ layout ํ์ผ์ ์ฌ์ฉํ๊ฒ ๋ค๋ ์ ์ธ
// Routes
app.use("/", require("./routes/index"));
app.use("/users", require("./routes/user"));
const PORT = process.env.PORT || 8000;
app.listen(PORT, console.log(`๐Server started on port http://localhost:${PORT}`));
๐ง routes/index.js
const express = require("express");
const router = express.Router();
// Main page
router.get("/", (req, res) => {
// rednering ํ ๋ view์ ํ์ผ ์ด๋ฆ ์จ์ผ๋จ
res.render("welcome");
});
module.exports = router;
๐ง views/layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://kit.fontawesome.com/f87852c84c.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootswatch.com/4/journal/bootstrap.min.css">
<title>Node js๋ก ๋ก๊ทธ์ธ ๊ตฌํํ๊ธฐ</title>
</head>
<body>
<div class="container">
<%- body %>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
๐ง views/welcome.ejs
<h1>Welcome</h1>
์๋ง 1๋ฒ ๋ฐ๋ผํ์ ๋ถ๋ค์ ejs ๋ชจ๋์ด ์๋ค๊ณ ์๋ฌ๊ฐ ๋์ฌ ๊ฒ์
npm install ejs --save ํ์๋ฉด ๋จ
728x90
๋ฐ์ํ
'๐ฉโ๐ป ๋ฐฑ์๋(Back-End) > Node js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Comments