[🐾 일지] 리액트 프로젝트 회원가입 서버 연결 (Axios 400번 에러)

원래 fetch()를 썼었으나 axios를 많이 쓴다고 해서 처음으로 사용하게 되었다.

axios 공식문서를 보고 처음에 호기롭게 시도했으나 콘솔에 가득한 빨간줄...프로젝트 생명이 위험함

---

제일 많이 났던 400번 에러에 대해 작성해보려고 한다.

일단, 내가 하는 프로젝트는 회원가입 로직이 조금 복잡하다. 사실 복잡하지 않은데 처음해봐서 복잡하게 느껴졌다.

 

 

 [로직] step 1 

회원가입시 보내는 정보 

url	method	data (body)
http://localhost:3000/api/user/create	post	nickName, email, pw, profilePicture, location

 

회원가입 서버 연결 시 반환된 상태와 메세지에 따른 다음 수행작업

status	message	next step
200	성공	해당 이메일로 인증번호 발송
400	실패	내 잘못
403	이메일 인증을 하지 않음	안내 메세지 -> 해당 이메일로 인증번호 발송
409	이미 유일값을 가진 유저가 존재	안내 메세지 -> 다시 회원가입을 하도록 함

 

 

 

 

 

 

 

 [로직] step 2 

인증번호 발송시 보내는 정보

url	method	data (body)
http://localhost:3000/api/user/sendauthemail	post	email

 

인증번호 발송시 반환된 상태와 메세지에 따른 다음 수행작업

status	message	next step
200	성공	인증번호 확인
400	실패	내 잘못
500	서버 내의 문제 발생	서버 잘못

 

 

 

 

 

 

 

  [로직] step 3 

인증번호 확인시 보내는 정보

url	method	data (body)
http://localhost:3000/api/user/compareauthemail	post	email, authString

 

인증번호 확인시 반환된 상태와 메세지에 따른 다음 수행작업

status	message	next step
200	성공	로그인 페이지로 라우팅
400	실패	내 잘못
401	인증번호가 일치하지 않음	인증번호 재전송 or 재입력 창 띄우기
404	부여된 인증번호가 없음	누구의 잘못도 아님

 

 

---

 

 

 [구현] step 0 

데이터를 송신할 때마다 axios를 import 하기보다는 utils 폴더에 API 컴포넌트를 만들어 export 하였다.

 

import axios from 'axios';

const API = axios.create({
    baseURL: 'http://localhost:3000/api',
    headers: {
        'Content-Type': 'application/json',
    },
});

export default API;

 

baseURL에 저렇게 넣어두고 사용할 수 있다는 것이 가장 큰 장점이다.

 

 

 

 

 

 

 

 [구현] step 1 

회원가입 axios post 로 생성하기

회원가입 input 정보를 나는 다음과 같이 받았다. location은 받지 않기로 확정된 내용이라 따로 받지 않았다.

 

const [profile, setProfile] = useState('');
const [info, setInfo] = useState({
    nickName: '',
    email: '',
    pw: '',
    passwordConfirm: '',
});

 

인증번호 발송 버튼을 누를 시에 동작은 handleButton 으로 처리했다.

 

import { API, checkUserInfo } from 'utils';

const handleButton = () => {
	/* 입력 값의 형태가 올바른지 판별 */
        if (checkUserInfo(info.nickName, info.email, info.pw, setErrorMessage))
            return;
            
	/* 데이터 전송 */
        API.post('/user/create', {
        	nickName:info.nickName,
        	email:info.email,
        	pw:info.pw,
        	profilePicture: profile
            })
            .then((response) => {
                if (response.status === 200) {
                    const authEmail = { email: userData.email };
                }
            })
            .catch((error) => console.log(error.response));
    };

 

이렇게 해서 보냈더니 400번 오류가 계속 났다.

 

 

중간에 있는 net::ERR_SSL_PROTOCOL_ERROR 는 baseURL에 http가 아닌 https 를 써서 난 오류이다.

서버에서 설정한 '비밀번호 이상'이라는 메세지가 떠서 서버 코드를 확인해보았지만 찾을 수 없었다. 

 

const handleButton = () => {
        if (checkUserInfo(info.nickName, info.email, info.pw, setErrorMessage))
            return;
            
	/* 객체 생성 후 전송 */
        const userData = {
            nickName: info.nickName,
            email: info.email,
            pw: info.pw,
            profilePicture: profile,
        };


        API.post('/user/create', userData)
            .then((response) => {
                if (response.status === 200) {
                    const authEmail = { email: userData.email };
                }
            })
            .catch((error) => console.log(error.response));
    };

 

axios post body에 데이터를 일일히 보내지 않고 userData 객체를 생성해서 보냈더니 드디어 에러를 해결했고

데이터베이스에도 잘 들어간 걸 확인할 수 있었다. 

 

 

 

 

 

 

 

 [구현] step 2 

회원가입 후(정보가 잘 들어간 이후) 인증번호 보내기 

정보가 잘 들어갔다는 것을 확인하는 방법은 reponse.status === 200 일 때 밖에 없다. 따라서 해당 상태일 때에 맞는 정보를 맞는 url에 post 해주면 된다.

 

const sendAuthMail = async (email) => {
            await API.post('/user/sendauthemail', email)
                .then((res) => {
                    console.log(res);
                    if (res.status === 200) {
                        props.setEmail(email.email);
                        props.setShowSignup(false);
                        props.setShowEmailAuth(true);
                    } else if (res.status === 403) {
                        alert('you already signup');
                    }
                })
                .catch((err) => console.log(err.response));
        };

const handleButton = () => {
        if (checkUserInfo(info.nickName, info.email, info.pw, setErrorMessage))
            return;

        const userData = {
            nickName: info.nickName,
            email: info.email,
            pw: info.pw,
            profilePicture: profile,
        };

        API.post('/user/create', userData)
            .then((response) => {
                if (response.status === 200) {
                    const authEmail = { email: userData.email };
                    sendAuthMail(authEmail);
                }
            })
            .catch((error) => console.log(error.response));
    };

 

sendAuthMail 이라는 함수를 만들어 handleButton의 response.status === 200 일 때,

authEmail 객체를 생성해주고 sendAuthMail을 호출했다. 

 

 

 

 

 

 

 

 [구현] step 3 

sendAuthMail 의 response.status === 200 일때, 인증번호를 입력하는 화면을 띄어준다.

 

본인확인 화면

인증번호 입력

 

인증번호를 입력하고 확인 버튼을 누르면 인증번호 비교를 하는 함수를 호출한다.

 

const handleCompareButton = async () => {
        const authData = {
            email: props.email,
            authString: authCode,
        };

        await API.post('/user/compareauthemail', authData)
            .then((res) => {
                console.log(res);
                if (res.status === 200) {
                    alert('success');
                    props.setShowEmailAuth(false);
                    props.setShowLogin(true);
                } else if (res.status === 401) {
                    alert('no match');
                }
            })
            .catch((err) => console.error(err));
    };

 

이것도 마찬가지로 객체로 담아서 해당 url에 post하면 잘 되는 것을 볼 수 있다.

서버와 소통하는 함수들은 api 폴더에 index 파일에 분리해 작성하고 필요할 때마다 호출해 쓸 수 있도록 하였다.

 

 

 

 

 

 결론 

Axios 400번 Bad Request 에러 : post시에 body에 객체를 보내지 않을 경우 (잘못된 송신 방법) 일어난다.