관리 메뉴

프로그래밍 삽질 중

프로젝트 수정 1 - node.js로만 구성된 프로젝트에 리액트 추가(서버 항목 : 회원가입) 본문

과거 프로그래밍 자료들/프로젝트

프로젝트 수정 1 - node.js로만 구성된 프로젝트에 리액트 추가(서버 항목 : 회원가입)

평부 2022. 5. 13. 15:09

* 현재 진행상황

- 프로젝트에 CRUD만 만든 상황

- fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단

- node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정

- 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분)

 

항목들

폴더 config middleware model routes src views
문서 dev/key/prod auth user/stay 등 ctrl, index public 화면단
설명 mongoDB와 연결 route안 auth 작동하기 위한 미들웨어 스키마 및 함수 존재 컨트롤러 존재
(get, post 다룸)
css, image, js 존재 react 적용 시 없어질 예정

 

[회원가입 만들기 - server 부분]

1. User.js를 만든다(mongoDB와 연결)

2. index에는 루트부분만, ctrl에는 index에 들어갈 기능부분을 넣어준다

3. postman으로 확인한다

 

 

1. User.js를 만든다(mongoDB와 연결하기 위함) 

 

①[models/User.js]

 

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    maxlength: 50,
  },
  email: {
    type: String,
    trim: true,
    unique: 1,
  },
  password: {
    type: String,
    minlength: 5,
  },
  lastname: {
    type: String,
    maxlength: 50,
  },
  role: {
    type: Number,
    default: 0,
  },
  image: String,
  token: {
    type: String,
  },
  tokenExp: {
    type: Number,
  },
});

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

module.exports = { User };

 

 

② routes/index.js에 router 모아놓기 / routes/auth.ctrl에 기능 정리

 

[index.js]

 

const express = require("express");
const router = express.Router();
const authCtrl = require("./auth.ctrl");

router.post("/api/user/register", authCtrl.process.register);

module.exports = router;

 

[auth.ctrl.js]

 

"use strict";
const { User } = require("../../models/home/user");

const process = {
  register: (req, res) => {
    //저장할 userSchema 가져옴
    const user = new User(req.body);
    console.log(user);
    console.log(req.body.email);
    //유저 저장함
    user.save((err, userInfo) => {
      if (err)
        return res.json({
          success: false,
          err: "중복된 아이디나 비밀번호 설정에 오류가 있습니다.",
        });
      return res.status(200).json({
        success: true,
      });
    });
  },

module.exports = {
  process, //여러 개 exports 할 필요 없이 한 개만 하면 됨
};

 

 

3. postman으로 확인한다 - 서버 키고(npm start) 확인해야 함

 

postman에서 확인
MongoDB에서 확인