[Node.js] 회원가입 페이지 구현

👩🏻‍💻 여는 말

로그인 페이지를 구현했다면, 회원가입 페이지에서는 몇가지 세부요소를 제외하고 구현 방법은 동일했다. 하지만 세부적으로 신경쓸 부분을 기록해두기 위해서 작성 !!✨

(1) Server

⭐ index.js

// register router
app.post('/api/users/register', async(req, res)=> {
    const user = new User(req.body)

    try {
        await user.save();
        return res.status(200).json({success:true})
    } catch (err) {
        return res.json({success:false, err})
    }
})

📢 잠시 주목 !!

return res.status(200).json({success: true}) 이 부분에서 success가 Redux tool에서 success : true 로 나타난다.

ex) .json({loginSuccess: true})로 하면 loginSuccess: true로 나타날 것 !!

---

(2) Client

⭐ RegisterPage.js

import React, { useState } from 'react'
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { registerUser } from '../../../_actions/user_action';

export default function RegisterPage() {
  const [name, setName]= useState('');
  const [email, setEmail]= useState('');
  const [password, setPassword]= useState('');
  const [confirmPassword, setConfirmPassword]= useState('');
  const dispatch= useDispatch();
  const navigate= useNavigate();

  const handler= (e)=>{
    e.preventDefault();

    if(password !== confirmPassword){
      return alert("비밀번호를 확인해주세요.")
    }

      let user={
        name:name,
        email: email,
        password: password,
      }

      dispatch(registerUser(user))
      .then(response=> {
        if(response.payload.success){
          navigate('/login');
        }else{
          alert("ERROR");
        }
      }
        
      )
  }

  return (
    <div style={{display: 'flex', justifyContent:'center',alignItems:'center',
    width:'100%', height:'100vh'}}>
      <form style={{display:'flex', flexDirection: 'column', gap: '20px'}}>
        <label>이름</label>
        <input type='text' value={name} onChange={(e)=>{
          setName(e.target.value);
        }}></input>

        <label>이메일</label>
        <input type='email' value={email} onChange={(e)=>{
          setEmail(e.target.value);
        }}></input>

        <label>비밀번호</label>
        <input type='password' value={password} onChange={(e)=>{
          setPassword(e.target.value);
        }}></input>

        <label>비밀번호 확인</label>
        <input type='password' value={confirmPassword} onChange={(e)=>{
          setConfirmPassword(e.target.value);
        }}></input>

        <button onClick={handler}>회원가입</button>
      </form>
    </div>
  )
}

로그인 부분과 다르게 추가된 점은 이름 input과 비밀번호 확인 input이다.
여기서 비밀번호 확인은 if문을 통해 password와 confilrmPassword가 같은지 확인해야 한다.

---

⭐ user_action.js

export async function registerUser(dataToSubmit){
    const request= await axios.post('/api/users/register',dataToSubmit)
    .then(response=> response.data)

    return{
        type: REGISTER_USER,
        payload: request,
    }
}

⭐ user_reducer.js

        case REGISTER_USER:
            return{...state, registerSuccess: action.payload}
        break;

📢 주목 !!

user_reducer의 registerSuccess는 Redux tool에서 저런식으로 나타난다.

---

user_action과 user_reducer은 로그인, 회원가입 부분 구성이 거의 동일하다.