Sign up - Controller

Mongo DB

// db.js

import mongoose from "mongoose";

mongoose.connect(process.env.MONGO_URL, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
});

const db = mongoose.connection;

const handleOpen = () => console.log(`✅ Connected to DB`);
const handleError = (error) => console.log(`❌ Connection ${error}`);

mongoose.set("useCreateIndex", true);

db.on("error", handleError);
db.once("open", handleOpen);

  회원 가입 기능을 구현하기 위해 passport 모듈을 사용할 것이다. 그리고 생성된 계정을 mongo DB에 저장할 것이다. 그러기 위해서 db.js 라는 파일을 생성해서 위처럼 코드를 짠다.

// User.js

import mongoose from "mongoose";
import passportLocalMongoose from "passport-local-mongoose";

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  avatarUrl: String,
});

UserSchema.plugin(passportLocalMongoose, { usernameField: "username" });

const model = mongoose.model("User", UserSchema);

export default model;

  Mongo DB는 스키마를 작성해야 한다. User.js에 짜여진 스키마 대로 계정(User)이 저장된다. 여기서 UserSchema.plugin(passportLocalMongoose, {usernameField: "username"});은 passport-local-mongoose를 이용해서 회원 가입을 하는 유저 계정을 손쉽게 저장할 수 있도록 도와주는 plugin이다.

avatar-image

회원 가입을 할 때, avatar-image도 추가할 것이다.

// middlewares.js

import dotenv from "dotenv";
import multer from "multer";

dotenv.config();

const multerAvatar = multer({ dest: "uploads/avatars" });

export const uploadAvatar = multerAvatar.single("avatar");

  middlewares.js에 추가된 코드다. multer를 이용해서 image나 video 파일을 저장할 수 있다. 그리고 dotenv를 이용해서 외부에 노출되면 안 되는 정보를 .env 파일에 저장하고 dotenv.config()를 이용해서 사용할 수 있다.

// globalRouter.js

import express from "express";
import routes from "../../routes";
import { postSignUp } from "../controller/globalController";
import { uploadAvatar } from "../middlewares";

const globalRouter = express.Router();

// sign-up
globalRouter.post(routes.signUp, uploadAvatar, postSignUp);

export default globalRouter;

uploadAvatar가 routes.signUp과 postSignUp 사이에 있다. user가 avatar 파일을 업로드하면 그 파일이 postSignUp에 전해진다.

// signUp.pug

form(action=routes.signUp, method="post" enctype="multipart/form-data")
      .fileUpload
        label(for="avatar") Avatar
        input(type="file", name="avatar", id="avatar", accept="image/*")

signUp.pug의 form 추가된 코드다. multer를 사용하려면 form에 enctype="multipart/form-data"을 추가해야 한다.

소스 코드

github.com/zpskek/guessMind-v3/commit/e62b0a31850babae9638838d804abcca763ee5a2