React 회원가입 API (로그인 기능 전)

(React Hook Form을 가지고 회원가입, 로그인페이지 유효성 검증까지 해놓은 상태임)

 

1. express모듈을 설치했고, Mongoose library로 mongoDB를 연결했다.

2. model과 schema를 생성

3. clinet - server 통신 test해봄 (body-parser 설치 후)

4. mongoURI보호를 위해 환경 변수를 나눠주었다. 

5. bcrypt를 통해 비밀번호 암호화

 

 

 

먼저 클라이언트 

//[client] signup.jsx 

const onValue = (data) => {
    axios.post('http://localhost:3000/auth/register', {
        email: data.email,
        pw: data.pw,
        pwComfirm: data.pwComfirm,
        name: data.name
    }).then((res) => {
        alert('회원가입이 완료되었습니다.')
        history('/') //useNavigate
    })
}

- 사용자 정보를 post로 전송했다.

1) 가입이 완료가 되면 alert창이 뜨고

2) mongoDB에서 해당 데이터가 들어왔는지 확인!!

3) useNavigate로 다시 로그인 페이지로 이동하게 했다. 

 

 

 

 

회원가입 api 기능 구현 - server

// express
// auth.js

var express = require('express');
var router = express.Router();
const { User } = require('../models/users');


// 회원가입
router.post('/register', function (req, res, next) {
    const { email, name, pw: password } = req.body
    const user = new User({ email, name, password }) //스키마 프로퍼티랑 이름이 같아야함


    // pre 
    user.save((err, userInfo) => {
        console.log('userInfo: ', userInfo);
        if (err) {
            console.log('err: ', err);
            return res.json({ success: false, err })
        }
        return res.status(200).json({
            success: true
        })
    })
});

요청받은 req.body는 

User는 모델 이름이다. 

• mongoose.model()을 통해 스키마를 인스턴스 시켜서 타 모듈에서 import하여 사용할 수 있따.
  • mongoose.model('모델 이름', 스키마)

 

해당 user는 save 되기 전에 pre함수를 받는다. 

//express
//medels/users.js

...

userSchema.pre('save', function (next) {
    var user = this;

    if (user.isModified('password')) {
        const salt = bcrypt.genSaltSync(10)
        const hash = bcrypt.hashSync(user.password, salt)
        user.password = hash
    }
    next()
})

userSchema가 생성된 스키마 파일이다. 

위 코드에서 user변수 this는 userSchema를 말한다.  pre함수는 'save'전에 콜백함수를 실행한다.  

if(user.isModfied('password') : 다른 정보가 아닌 유저의 password의 대한 값만 변경시, 암호화 진행

 

* isModified함수는 해당 값이 db에 기록된 값과 비교해서 변경된 경우 true를, 그렇지 않은 경우 false를 반환하는 함수이다.

만약 모델 필드 user안에 password가 일치하다면 bcrypt를 이용해서 암호화 시켜주고, 그렇지 않다면 바로 next()

* Sync()가 붙는 함수와 아닌 함수
- sync는 동기적인 처리를 하기 때문에 순차적으로 한줄이 끝나고 다음줄로 진행된다. 하지만 비동기는 작업이 끝나면 실행할 콜백함수를 인자에 전달하게 되고 작업의 완료유무를 따지지 않고 바로 다음이 실행한다.