01. 추가된 기능

로그인 체크 기능

1. 로그인 화면, 회원가입 화면 외에 다른 모든 페이지에 접속하는 경우, API를 GET /users/me 경로로 호출합니다.
2. API의 HTTP Status Code가 200이 아니라면 로그인이 안되어 있는것으로 판단하여 로그인 화면으로 이동시킵니다.
   이와 함께 브라우저에 토큰이 저장되어 있던 경우 해당 토큰을 브라우저에서 제거합니다.
3. API의 응답이 정상적으로 온 경우, 응답 값에 있는 사용자의 정보를 사용하여 화면을 표시합니다.

로그인 화면이 추가

1. 브라우저에 토큰이 저장되어 있는 상태라면 이미 로그인을 했던것으로 간주하여 상품 목록 페이지로 이동시킵니다.
2. 로그인 버튼을 누르는 경우 POST /auth 경로로 API를 호출합니다.
   email, password 필드로 데이터를 보냅니다.
3. 로그인이 성공하는 경우 API 응답 값으로 받은 토큰을 브라우저에 저장하고, 상품 목록 페이지로 이동시킵니다.
4. 로그인이 실패하는 경우 모달을 띄워 로그인이 실패했다고 안내합니다.

회원가입 화면이 추가

1. 회원가입 버튼을 누르는 경우 POST /users 경로로 API를 호출합니다.
   email, nickname, password, confirmPassword 필드로 데이터를 보냅니다
2. 회원가입에 성공한 경우 로그인 페이지로 이동시킵니다.
3. 회원가입에 실패한 경우 API 응답 값 중 "errorMessage" 필드에 있는 메세지를 보여줍니다.

02. 기능을 구현하기 전에 준비할 것.

1. JWT 토큰을 만들기 위한 라이브러리
2. 필요한 API

• 로그인 API
• 회원가입 API
• 내 정보 조회 API

3. 로그인 확인에 해당하는 기능은 미들웨어로 구현해서 여러 라우터에서 공용으로 사용
4. User 모델 구현

• app.js

// app.js

const express = require("express");
const mongoose = require("mongoose");

mongoose.connect("mongodb://127.0.0.1:27017/shopping-demo", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));

const app = express();
const router = express.Router();

app.use("/api", express.urlencoded({ extended: false }), router);
app.use(express.static("assets"));

app.listen(8080, () => {
  console.log("서버가 요청을 받을 준비가 됐어요");
});

• User 모델

// models/user.js

const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema({
  email: String,
  nickname: String,
  password: String,
});
UserSchema.virtual("userId").get(function () {
  return this._id.toHexString();
});
UserSchema.set("toJSON", {
  virtuals: true,
});
module.exports = mongoose.model("User", UserSchema);