๐ ๊ณต๋ถํ๋ ์ง์ง์ํ์นด๋ ์ฒ์์ด์ง?
[Login & Register authentication with Node js] (2) ejs๋ก html ํ๋ฉด ๋์ฐ๊ธฐ ๋ณธ๋ฌธ
[Login & Register authentication with Node js] (2) ejs๋ก html ํ๋ฉด ๋์ฐ๊ธฐ
์ง์ง์ํ์นด 2023. 3. 14. 23:43<๋ณธ ๋ธ๋ก๊ทธ๋ 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)
Bootswatch: Free themes for Bootstrap
Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.
bootswatch.com
๐ฅ 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 ํ์๋ฉด ๋จ
