[express.js] 템플릿 엔진(ejs)를 이용한 회원가입/로그인

ejs를 이용해서 회원가입/로그인 페이지를 만드는 법

1. npm i ejs
   템플릿 엔진 ejs 설치
2. views 폴더를 생성한다.
   
3. ejs를 사용한다고 명시를 해주고, 경로를 지정해준다.

   app.set("view engine", "ejs");
   app.set("views", path.join(__dirname, "views"));

4. login.ejs 파일에 로그인 코드를 작성한다.


<section class="prompt">
  <h1>로그인</h1>
  <form action="/login" method="POST">
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required />
    </div>
    <div>
      <label for="password">Password</label>
      <input type="password" id="password" name="password" required />
    </div>
    <button type="submit">로그인</button>
  </form>
  <p>아직 아이디가 없다면<a href="/signup">회원가입</a></p>
</section>

• form을 통해 로그인이 성공하면 /login 경로에 POST 메소드를 이용해서 button을 누르면 input value를 보내준다.

5. signup.ejs 파일에 회원가입 코드를 작성한다.

<section class="prompt">
  <h1>회원가입</h1>
  <form action="/signup" method="POST">
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required />
    </div>
    <div>
      <label for="password">Password</label>
      <input type="password" id="password" name="password" required />
    </div>
    <button type="submit">회원가입</button>
  </form>
  <p>이미 아이디가 있다면 <a href="/login">로그인</a></p>
</section>

• form을 통해 로그인이 성공하면 /signup 경로에 POST 메소드를 이용해서 button을 누르면 input value를 보내준다.

6. res.render를 이용해 어느 경로에서 ejs파일을 보여줄지 설정해줘야한다.

app.get("/login", (req, res) => {
  res.render("login");
});

app.get("/signup", (req, res) => {
  res.render("signup");
});

7. 이제 우리가 db에 회원가입을 저장한다. model 파일에서 user 객체를 Schema로 생성했었는데, 그걸 가져와서 사용이 가능하다. 회원가입이 가능하다.

• 참고: https://velog.io/@minjae98/Mongodb-mongoose-schema-model

const User = require("./models/user.model");

app.post("/signup", async (req, res) => {
  // user 객체 생성
  const user = new User(req.body);

  // db에 user 저장
  try {
    await user.save();
    return res.status(200).json({
      success: true,
    });
  } catch (error) {
    console.error(error);
  }
});

• User 스키마를 불러와서 req.body를 이용해 user에 담아주고 db에 저장을 해준다. 저장이 성공했으면 return 문이 실행되고 에러가 생기면 console에 error가 나온다.

  • req.body는 input 데이터 즉, email과 password를
    await user.save db에 저장이 될때까지 밑으로 내려가지 않는다. 비동기 함수이다.

8. user가 잘 저장됐다면 db에 나오는지 확인해보자.

• mongodb 클러스터 연결한 곳에 가서
  탐색 바에서 Database 클릭,
  Cluster 클릭, Collections 클릭
  

잘 들어온 것을 볼 수 있다.