[Login & Register authentication with Node js] (3) 로그인 & 회원가입 페이지 예쁘게 변경하기

👩‍💻 백엔드(Back-End)/Node js

[Login & Register authentication with Node js] (3) 로그인 & 회원가입 페이지 예쁘게 변경하기

징징알파카 2023. 3. 15. 00:57

728x90

<본 블로그는 Traversy Media 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> Node.js With Passport Authentication | Full Project

=> authentication app with login, register and access control using Node.js, Express, Passport, Mongoose

따라하다가 bootstrap 안 적용돼서 저분의 깃허브 참고함..

🥕 로그인 & 회원가입 페이지 예쁘게 변경하기

🐧 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");
// img
app.use(express.static('public'));

// 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}`));

🐧 views/layout.ejs

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 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://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>

</html>

🐧 views/welcome.ejs

<div class="row mt-5">
  <div class="col-md-6 m-auto">
    <div class="card card-body text-center">
      <!-- app.js 에서 express.static 미들웨어 함수에 전달하면 파일의 직접적인 제공을 시작 -->
      <center><img src="/images/alpaca.jpg" width="100px" height="100px"></center>
      <p style="margin-top: 16px;">로그인 & 회원가입</p>
      <a href="/users/register" class="btn btn-primary btn-block mb-2">Register</a>
      <a href="/users/login" class="btn btn-secondary btn-block">Login</a>
    </div>
  </div>
</div>

728x90

저작자표시