[Node.js] Express, TypeScript, MongoDB 회원가입 (1)

💻 코드

https://github.com/jokj624/authCRUD-TS

jokj624/authCRUD-TS

🤔 why?

곧 .. 다가올 앱잼을 압두고 서버 말하는 감자인 내가 조금이라도 공부를 해야겠다 하고 로그인/회원가입을 3 Layer Architecture 로 설계해보자 하고 공부를 시작했다.

원래는 api 내에 라우트, 컨트롤러, 서비스 로직을 다 넣어놓는 식으로 구현했는데 제대로 설계해보고 싶다. 

많은 블로그와 SOPT 세미나에서 한 내용, github들을 참고해서 해보았다.

아직 코드를 조금 더 리팩토링 해야하지만 간단한 구현 내용들을 정리할 겸, 글을 작성해본다.

 

✔️ 프로젝트 구조와 DB 설계

프로젝트 구조

src _____________ Loaders _______ db.ts
nodemon.json   |_ api  ___________________ middleware _ auth.ts
package.json   |                        |_ route ______ index.ts                             
tsconfig.json  |                                     |_ UserRouter.ts    
               |_ config __ index.ts
               |_ models __ User.ts                  
               |_ interfaces __ IUser.ts
               |_ errors _________________ errorGenerator.ts 
               |                        |_ generalErrorHandler.ts 
               |_ controllers ____________ index.ts
               |                        |_ UserContorller.ts
               |_ service ________________ inedx.ts
               |                        |_ UserService.ts
               |_ index.ts

프로젝트 구조는 3계층 설계에 맞게 Route => Controller => Service 자신의 바로 하단 계층에만 의존하도록 설계했다.

최대한 모듈화 시켜보았다.

User DB

src/models/user.ts

import mongoose from "mongoose";
import { IUser } from "../interfaces/IUser";

const UserSchema = new mongoose.Schema({
    name: {
        type: String,
    },
    email: {
        type: String,
        unique: true,
    },
    password: {
        type: String,
    },
    avatar: {
        type: String,
    },
    date: {
        type: Date,
        default: Date.now,
    },
});

export default mongoose.model<IUser & mongoose.Document>("User", UserSchema);

연습이니 가장 기본적인 이름, 이메일, 패스워드, 아바타(기본 프로필 사진), 가입 날짜로 설계했다.

Interface

src/interfaces/IUser.ts

export interface IUser{
    name: string;
    email: string;
    password: string;
    avatar: string;
    date: Date;
}

export interface IUserInputDTO {
    name: string;
    email: string;
    password: string;
    avatar?: string;
    date?: Date;
}

export interface userUniqueSearchInput {
    email : string;
}

user 인터페이스에서는 후에 post 할 때 사용할 DTO를 만들어 주었다. 

InputDTO는 회원가입시, Search는 중복 이메일을 찾을 때 사용할 인터페이스 

여기서는 이메일만으로 찾았지만 

email?, name? 같이 인터페이스를 구현해서 name으로 찾아도 된다.

✔️ Router

src/api/route/index.ts

import { Router } from 'express';
import UserRouter from './UserRouter'; 

const router = Router();

router.use('/users', UserRouter);

export default router;

UserRouter 모듈에서 직접적인 라우팅을 할 것 이므로 UserRouter 엔드포인트를 정의해준다.

 

src/api/route/UserRouter.ts

import { Router } from 'express';
import { UserController } from '../../controllers';

const router = Router();

router.use('/signup', UserController.signUp);
router.use('/login', UserController.logIn);

export default router;
 

 회원가입(signUp), 로그인(logIn)에 사용할 엔드포인트를 정의해준다.

모든 처리는 UserController 모듈 내 함수에서 진행한다.

궁금한점이 있는데 저 router.use 에서 use를 post, get 같은 HTTP Method로 표시해도 되는 건가?

찾아봐야 겠다.

✔️ Controller

src/contorllers/index.ts

import UserController from './UserController';
// 모듈을 패키지화 하여 객체로 내보낸다.
export{
    UserController  //(= UserController : UserController)
}

UserContorller 를 패키지화 하여 export 한다.

 

src/controllers/UserContorller.ts

import express, { NextFunction, Request, Response } from "express";
import bcrypt from "bcryptjs";
import jwt from "jsonwebtoken";
import config from "../config";
import errorGenerator from "../errors/errorGenerator";
import gravatar from 'gravatar';
import { check, validationResult } from "express-validator";
import { IUserInputDTO } from "../interfaces/IUser";
import { UserService } from "../services";
import { nextTick } from "process";

const signUp = async (req: Request, res: Response, next: NextFunction) => {
    check("name", "Name is required").not().isEmpty();
    check("email", "Please include a valid email").isEmail();
    check("password", "Please enter a password with 6 or more characters").isLength({ min: 6 });
    const { name, email, password } : IUserInputDTO = req.body;
    try{
        const errors = validationResult(req.body);
        if(!errors.isEmpty()){
            return res.status(400).json({ errors: errors.array() });
        }

        const foundUser = await UserService.findEmail({ email });
        if(foundUser)   errorGenerator({ statusCode: 409 });  // 이미 가입한 유저

        const avatar = gravatar.url(email, {
            s: "200",
            r: "pq",
            d: "mm",
        });

        const salt = await bcrypt.genSalt(10);
        const hashedPassword = await bcrypt.hash(password, salt);

        const createdUser = await UserService.createUser({ name, email, password: hashedPassword, avatar: avatar });

        const payload = {
            user: {
                email: createdUser.email,
            },
        };
        jwt.sign(
            payload,
            config.jwtSecret,
            { expiresIn: 36000 },
            (err, token) => {
                if(err) throw err;
                res.json({ token });
            }
        );
    } catch (err) {
        next(err);
    }
};

export default {
    signUp,
    logIn
}

이번 포스팅에서는 singUp 만 다룰 거라 logIn 함수는 뺐다.

DB에 직접 접근하는 일은 모두 Service에서 구현 할 것이다.

    check("name", "Name is required").not().isEmpty();
    check("email", "Please include a valid email").isEmail();
    check("password", "Please enter a password with 6 or more characters").isLength({ min: 6 });
    const { name, email, password } : IUserInputDTO = req.body;
    try{
        const errors = validationResult(req.body);
        if(!errors.isEmpty()){
            return res.status(400).json({ errors: errors.array() });
        }

        const foundUser = await UserService.findEmail({ email });
        if(foundUser)   errorGenerator({ statusCode: 409 });  // 이미 가입한 유저

check는 express-validator 라이브러리에 존재하는 함수로, 다양한 검증을 도와준다.

여기서는 Name 필드가 비었는지, 이메일이 제대로 존재하는지, 패스워드 길이가 최소 6 이상인지 검사하고 넘어간다.

이후 req.body에서 인터페이스에서 정의한 DTO 타입으로 body 내용을 꺼내준다.

validationResult에서 마찬가지로 body내용을 검사하고 에러 발생 시 에러를 리턴한다.

 

이후 중복된 유저인지 검사를 위해 Service 로직에 구현되어 있는 findEmail 함수에 email을 보내준다.

만약 해당 유저가 존재 할 시 에러 핸들링 함수에 409 (duplicate) 코드를 보내준다.

        const avatar = gravatar.url(email, {
            s: "200",
            r: "pq",
            d: "mm",
        });

        const salt = await bcrypt.genSalt(10);
        const hashedPassword = await bcrypt.hash(password, salt);

        const createdUser = await UserService.createUser({ name, email, password: hashedPassword, avatar: avatar });

avatar는 gravatar 라이브러리를 이용해서 기본 이미지 주소를 만들어준다.

이후 bcrypt를 통해 password를 안전하게 암호화 할 것이다.

이제 Service로직에 존재하는 createUser함수로 이 정보들을 보내 DB에 저장해주면 된다.

 jwt.sign(
            payload,
            config.jwtSecret,
            { expiresIn: 36000 },
            (err, token) => {
                if(err) throw err;
                res.json({ token });
            }
        );

config에 미리 정해둔 jwt 정보를 이용해 토큰을 발급한다. 

이 토큰을 클라이언트한테 던져주면 다용도로 사용할 수 있게 된다.

✔️ Service

src/services/index.ts

import UserService from './UserService';

export{
    UserService
}  // 객체 내보내기

컨트롤러와 마찬가지로 UserService 모듈을 내보낸다.

 

src/services/UserService.ts

import { IUserInputDTO, userUniqueSearchInput } from "../interfaces/IUser";
import User from "../models/User";

const createUser = (data: IUserInputDTO) => {
    const user = new User(data);
    return user.save();
}

const findEmail = (data: userUniqueSearchInput) => {
    const { email } = data;
    return User.findOne({ email });
}
export default {
    createUser,
    findEmail
};

아까 회원가입 컨트롤러 함수에서 봤던 서비스 로직 함수들이다.

createUser에서는 data를 받아 새로운 User를 만들어 DB에 save 해준다. 

만일 IUserInputDTO 인터페이스 타입과 맞지 않는 data가 온다면 에러가 날 것이다.

 

findEmail 함수에서는 email을 받아 findOne 함수를 이용해 해당 유저가 존재하는지 검사한다.

존재한다면 해당 유저 객체를 return 할 것이다.

✔️ Error 핸들링

src/errors/errorGenerator.ts

const DEFAULT_HTTP_STATUS_MESSAGES = {
    400: 'Bad Requests',
    401: 'Unauthorized',
    403: 'Foribdden',
    404: 'Not Found',
    409: 'duplicate',
    500: 'Internal Server Error',
    503: 'Temporary Unavailable',
};

//interface 이용해 Error 객체에 statusCode key 추가
export interface ErrorWithStatusCode extends Error {
    statusCode? : number
};

const errorGenerator = ({ msg='', statusCode=500}: { msg?: string, statusCode: number }): void => {
    //인자로 들어오는 메세지와 상태 코드를 매핑
    const err: ErrorWithStatusCode = new Error(msg || DEFAULT_HTTP_STATUS_MESSAGES[statusCode]);
    err.statusCode = statusCode;
    throw err;
}

export default errorGenerator;

에러 핸들러는 딱히 없어도 된다. 그냥 컨트롤러에서 직접 res.json으로 send 해줘도 된다.

하지만 참고 블로그에서 핸들링 함수를 만들어 놓으면 간편하게 사용할 수 있다하여 나도 따라서 만들어 보았다.

다양한 상태코드를 미리 정의해두고 이와 맞는 메시지를 error 객체로 생성하여 던져준다.

 

src/errors/generalErrorHandler.ts

import { ErrorRequestHandler, Request, Response, NextFunction } from 'express';
import { ErrorWithStatusCode } from './errorGenerator';

const generalErrorHandler: ErrorRequestHandler = (err: ErrorWithStatusCode, req: Request, res: Response, next: NextFunction) => {
    const { message, statusCode } = err;
    //console.error(err);
    res.status(statusCode || 500).json({ message });
}

export default generalErrorHandler;

errorGenerator 에서 정의한 인터페이스 ErrorWithStatusCode 에러를 직접 response로 보내주게 된다.

에러 핸들링 함수를 사용할 때는 간편하게 

   if(foundUser)   errorGenerator({ statusCode: 409 });  // 이미 가입한 유저

이런식으로 상태 코드만 보내주면 알아서 send 해준다.

✔️ 그 외 코드들

src/index.ts

가장 처음 실행 될 코드이다.

import express, { Express } from "express"; 
import routes from './api/route';
import generalErrorHandler from "./errors/generalErrorHandler";
const app : Express = express(); 
import connectDB from "./Loaders/db";

// Connect Database
connectDB();

app.use(express.urlencoded());
app.use(express.json()); 

app.use(routes);
app.use(generalErrorHandler);
// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "production" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

app 
  .listen(5000, () => {
    console.log(`
    ################################################
    🛡️  Server listening on port: 5000 🛡️
    ################################################
  `);
  })
  .on("error", (err) => {
    console.error(err);
    process.exit(1);
  });

Loaders에 만들어둔 db연결 함수와 서버 실행을 진행한다.

 

🔗 참고 자료

https://velog.io/@hopsprings2/%EA%B2%AC%EA%B3%A0%ED%95%9C-node.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90-%EC%84%A4%EA%B3%84%ED%95%98%EA%B8%B0

견고한 node.js 프로젝트 설계하기

https://velog.io/@hjulee12/Nodejs-practice.-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EB%AA%A8%EB%8D%B8%EB%A7%81-%EB%B0%8F-blog-API-%EA%B5%AC%ED%98%84

Node.js | User(회원가입) API 구현