개발 일지 15일차

issue: 백엔드와 로그인 모달창 연결

1. loginParam 객체가 console창에 출력 안됨

const handleChange = (e) => {
    const { name, value } = e.target;
    setLoginParam((prevState) => ({ ...prevState, [name]: value }));
  }

const validateForm = () => {
    console.log("Email :", loginParam.email);
    console.log("Password :", loginParam.password);

    let valid = true;

    if (loginParam.email.trim() === '') {
      setEmailError('이메일을 입력하세요.');
      valid = false;
    } else if (!loginParam.email) {
      setEmailError('존재하지 않는 이메일입니다.');
    }

    if (loginParam.password.trim() === '') {
      setPasswordError('비밀번호를 입력하세요.');
      valid = false;
    } else if (!loginParam.password) {
      setPasswordError('존재하지 않는 이메일입니다.');
    }
    return valid;
  }

설정하고 나서 확인해보니 Email과 Password 모두 null값으로 되어있었다.

그래서 확인해보니, handleChange 함수의 name과 value값을 제대로 지정해주기 않고, loginParam 데이터를 onClick이 아닌 onSubmit으로 전달하고 있었기 때문이었다.

아래와 같이 수정하니, 문제해결

<div className='input-box'>
            <input className='email-input'
              name="email"
              type="email"
              placeholder="이메일"
              value={loginParam.email}
              onChange={handleChange}
            />
            {emailError && <p className='input-error'>{emailError}</p>}
          </div>
          <div className='input-box'>
            <input className='pw-input'
              name="password"
              type="password"
              placeholder="비밀번호"
              value={loginParam.password}
              onChange={handleChange}
            />
            {passwordError && <p className='input-error'>{passwordError}</p>}
          </div>
          <div className='add-fucntion'>
            <div className='agree-checkbox'>
              <input className='checkbox' type="checkbox" id="keepLoggedIn"/>
              <div className="checkbox-text">로그인 상태 유지</div>
            </div>
            <div><a className='forgotPW' onClick={openFinePWModal}>비밀번호 찾기</a>
            </div>
          </div>
          <button className='login-button' onClick={handleLogin}>
            로그인
          </button>

 

2. loginSlice의 비동기 액션(loginPostAsync)을 호출하여 받아온 loginParam 데이터를 data 변수에 저장하지 못함

data가 undefined로 출력되면서 data에 제대로 담기지 않는 것을 발견했다. 이는 알고보니 백엔드에서 요구하는 content type과 memberApi에서 보내는 content type이 달라서 생긴 문제였다.

 

원래의 코드를

export const loginPost = async (loginParam) => {

    const header = {headers: {"Content-Type" : "x-www-form-urlencoded"}}

    const form = new FormData();
    form.append('username', loginParam.email);
    form.append('password', loginParam.password);

    const res = await axios.post(`${host}/auth/login`, form, header);

    return res.data;
}

아래와 같이 수정하고

export const loginPost = async (loginParam) => {

    const header = { headers: {"Content-Type": "application/json"} };
    const data = {
        email: loginParam.email,
        password: loginParam.password
    };
    try {
        const res = await axios.post(`${host}/auth/login`, data, header);
        return res.data;
    } catch (error) {
        throw error;
    }
}

unwrap()을 이용한 후처리도 함께해주니, 백엔드로 무사히 loginParam 데이터를 전달할 수 있었다.

const handleLogin = async (e) => {
    e.preventDefault();
    if (validateForm()) {
      try {
        const data = await doLogin(loginParam); // 혜리 추가
        const loginData = unwrapResult(data); // unwrapResult로 결과 추출
        dispatch(login(loginData)); // 동기화된 호출 
        dispatch(loginPostAsync(data)) // loginSlice의 비동기 호출 
        onClose();
      } catch (error) {
        Swal.fire('로그인 실패', '아이디와 비밀번호를 확인해주세요.', 'error');
      }
    }
  };

 

3. BCryptPasswordEncoder 경고

db에 저장되어 있던 email과 password를 입력했는데, password가 BCrypt 처리가 안되어있어서, 로그인이 불가능했다.

BCrypt가 무엇인가 하니, 보안을 위해 설정하는 비밀번호 해쉬 알고리즘이었다.

 

그래서 BCrypt 처리된 다른 계정으로 로그인을 시도하니, 로그인이 되었다.