본문 바로가기

JavaScript

3차 미니프로젝트_회원가입

728x90

3차 미니프로젝트_회원가입


 

📄 routes/signuprouts.js

const { User } = require("../models");

 

 

📄 models/user.js

'use strict';
const { Model } = require('sequelize');
module.exports = (sequelize, DataTypes) => {
  ...
  User.init(
    ...
    {
      sequelize,
      modelName: 'User',
    }
  );
  return User;
};

modelName이랑 객체{ }일치해야 함!

 

나는 자동생성으로만 sequelize를 썼어서 몰랐다...

modelName이 객체값과 일치해야 모델을 불러올 수 있었다!!

튜터님이 설명해주신것 같은데..참 어렵다.


위와 같은 상황이 일치하지 않아 오류가 발생했다.

라우터에서만 실행해보고 에러가 발생해 이를 해결한 후, 3계층으로 실행!

 

C:\Users\xxxxh\OneDrive\바탕 화면\gyeonggi\routes\signup.route.js:12
    const userCreateData = await Users.create({userType, email, phoneNumber, password, name, address});
                                       ^

TypeError: Cannot read properties of undefined (reading 'create')
    at C:\Users\xxxxh\OneDrive\바탕 화면\gyeonggi\routes\signup.route.js:12:40


📌 Sequelize DB 생성(Terminal)

npx sequelize db:create

 

📌 Sequelize Table 삭제(Terminal)

npx sequelize db:migrate:undo:all

조원분이 알려주셔서 알게된 테이블 삭제!

후발대 강의에서 undo를 알려주시긴했는데, 이럴 때 사용하는 구나!

직접 프로젝트를 하니 왜 이 명령어가 필요한지 알게 되었다.

 


회원가입 3 계층 구조로 구현

 

📄 routes/signup.routs.js

const express = require("express");
const router = express.Router();

const SignupController = require('../controllers/signup.controller');
const signupcontroller = new SignupController();

router.post('/', signupcontroller.postSignup);


module.exports = router;

 

📄 controllers/signup.controller.js

const SignupService = require('../services/signup.service');

class SignupController {
    signupService = new SignupService();

    postSignup = async (req, res, next) => {
        const { userType, email, phoneNumber, password, name, address } = req.body;

        const createUserData = await this.signupService.createUser(userType, email, phoneNumber, password, name, address);

        res.status(200).json({ data : createUserData});
    }

}

module.exports = SignupController;

 

📄 services/signup.service.js

const SignupRepository = require('../repositories/users.repository');

class SignupService {
    signupRepository = new SignupRepository();

    createUser = async (userType, email, phoneNumber, password, name, address) => {
        const createUserData = await this.signupRepository.createUser(userType, email, phoneNumber, password, name, address);

        return{
            userId: createUserData.userId,
            email : createUserData.email,
            phoneNumber: createUserData.phoneNumber,
            name: createUserData.name,
            address: createUserData.address,
            createdAt: createUserData.createdAt,
            updatedAt: createUserData.updatedAt,
        };
    }

}


module.exports = SignupService;

 

 

📄repositories/user.repository.js

const { User } = require("../models");

class UserRepository {

    createUser = async(userType, email, phoneNumber, password, name, address) => {
        const createUserData = await User.create({ userType, email, phoneNumber, password, name, address });

        return createUserData;
    }

}

module.exports = UserRepository;

 

 

회원가입


Node express rander

 

📌 설치 모듈

npm i nunjucks
npm i chokidar

 

📄 app.js

const nunjucks = require("nunjucks");

const express_render = require('./renders');

// nunjucks 템플릿 언어 선언
app.set('view engine', 'html');
nunjucks.configure('templates', {
    express: app,
    watch: true,
});

app.use('/', express_render);

 

 

📌 templates폴더에 html넣기

sign.html폴더

 

📄 renders/index.js

const express = require('express');
const router = express.Router();

router.get('/api/signup', (req, res) => {
    try{
        res.render("sign");
    } catch (err) {
        console.log(`${req.method} ${req.originalUrl} : ${error.message}`);
        res.render('error');
    }
})

module.exports = router;

 

signup front 연결

 

그냥 막무가내로 사장님 회원가입 버튼을 누르면 UserType을 0으로

사용자 회원가입을 누르면 UserType을 1로 했다.

회원가입


+ cotroller랑 server에서 에러 띄우는 부분을 진행해야한다.

또한 middleware로 Cookie 값도 받아와야 한다.