[고양이와 책을] 팀 프로젝트(2)

현재 '고양이와 책을' 팀 프로젝트는 백엔드인 Django와 프론트엔드의 React를 연동한 후 axios를 이용하여 데이터를 주고 받는 걸 통해 회원가입과 로그인 기능을 구현하는 중이다.

회원가입과 로그인 기능을 구현하기 위해 프론트엔드에서는 axios의 post를 통해 Django로 데이터를 주게 된다.

이렇게 회원가입 부분은 해결이 되었는데, 로그인 부분에서 서버 쪽 오류 500(internal server)가 계속 떠서 진행이 되지 않는 상태였다. 그러나 코드 리뷰 중 프론트엔드 쪽에서 오류를 발견했고, 그 오류는 다음과 같다.

회원가입

밑은 처음에 구동이 잘 됐던 회원가입 코드 부분이고,

// submit시 서버로 axios 요청하여 signup
    const onSubmit = (e) => {
      e.preventDefault()
        axios.post("http://localhost:8000/user/create", {
        userName: nickname,
        userEmail: email,
        userPw: password,
    }).then(function (response) {
        console.log(response.message)
        history.push("/login");
    }).catch(function (error) {
        console.log(error.message);
        alert('failed to signup')
    });
    }

로그인

const onSubmit = (e) => {
        e.preventDefault()
        axios.post("http://localhost:8000/user/login", {
          params :{
            userEmail : emailState,
            userPw : passwordState,
          }
          }).then(function(response){
            console.log(response.message)
            alert(`${emailState}님 환영합니다`)
            setLogin(true)
        }).catch(function(error){
            console.log(error.message)
            alert('failed to login')
        })
    }

문제가 있던 로그인 코드 부분이다.

두 코드의 차이는 axios 내부에 params를 집어 넣었냐의 여부인데, 찾아보니 이 params는 주로 axios에서 get을 사용할 때 parameter를 params에 조건으로 넣어주어 보낼 때 사용하는 것이었다.

React에서 보낸 parameter를 받아서 Django에서는 parameter 조합 쿼리를 Database에 보내게 되고, Django는 다시 Database로 부터 쿼리 결과를 전송받게 된다. 이후, Django는 React로 response를 전송하며, React는 이를 이용하게 된다.

axios의 post로 데이터를 보낼 때도 params를 사용 가능한데 이 때는

import 'url-search-params-polyfill';

다음과 같은 코드를 추가해 준 후 사용 가능하다.