React - 백엔드와 통신하기

이전 포스팅에서는 백엔드 서버와 통신하기 전이었기 때문에 아이디와 패스워드 값을 임의로 설정한 후 실제 아이디와 패스워드 창에 입력되는 값이 내가 지정한 값과 일치할 때 메인페이지로 화면이 넘어가도록 코드를 작성했었다.

오늘은 fetch를 이용해 백엔드 서버에 회원가입 때 생성된 id와 pw값을 보내고, 다시 로그인 할 때 입력한 값이 백엔드 서버에 저장된 아이디&패스워드 값과 일치할 경우 메인페이지로 이동하는 기능을 구현해보았다.

백엔드와 통신하는 기본 구조는 다음과 같다.

fetch('API 주소', {
      method: 'POST', // http의 method
      body: JSON.stringify({ // 기존의 js object를 JSON String의 형태로 변환
        email: id, 
        password: pw,
      }),
    })
      .then(response => response.json()) //server에서 보내준 response를 object 형태로 변환
      .then(result => console.log('결과: ', result)); //object로 변환한 response를 console.log에 출력

• fetch함수의 첫번째 인자에는 API 주소를 방고, 두번째 인자로는 HTTP 통신에 관한 내용을 받는다.
• 통신을 할 때는 String 형태의 JSON으로 보내야하기 때문에 JSON.stringify()라는 메서드를 활용해서 포맷을 기존의 js object에서 JSON String으로 변환해준다.
  
  
  
  

1. 회원가입

const signUp = () => {
    fetch('http://10.58.7.17:8000/users/signup', { //회원가입시 입력한 값들이 서버로 전송될 수 있는 주소
      method: 'POST',
      body: JSON.stringify({
        email: id,
        password: pw,
      }),
    })
      .then(response => response.json())
      .then(result => console.log('결과: ', result));
  };

     <div className="joinBox">
        <span>계정이 없으신가요?</span>
        <button onClick={signUp}>가입하기</button>
      </div>

signUp이라는 함수를 만들고 안에 fetch함수를 작성해주었다.
하단에는 회원가입 버튼을 따로 만들어 아이디와 패스워드 창에 값을 입력하고 '가입하기' 버튼을 누르면 'http://10.58.7.17:8000/users/signup' 라는 주소로 데이터가 전송될 수 있도록 했다.

2. 로그인

const signIn = () => {
    fetch('http://10.58.7.17:8000/users/signin', { 
      method: 'POST',
      body: JSON.stringify({
        email: id,
        password: pw,
      }),
    })
      .then(response => {
        if (response.message === 'SUCCESS') {
          window.localStorage.setItem('token',response.access_token);
          goToMain();
        } else {
          alert('아이디 또는 비밀번호가 일치하지 않습니다.');
        }
      });
  };

<button
	type="button"
	className="loginButton"
	disabled={button}
	onClick={signIn}
>

fetch함수 작성법은 회원가입 때 입력한 것과 똑같고, API 주소만 변경해주면 된다.
로그인버튼을 클릭했을 때 전송된 아이디&패스워드 데이터가 회원가입 때 전송된 데이터와 일치하면 {message: 'SUCCESS', access_token: '토큰값'}이 나오는데 이를 이용해서 메인페이지로 넘어가는 기능도 구현해보았다.

결국 회원가입 때 입력한 값과 로그인할 때 입력한 값이 일치해야 success라는 메세지가 나오는 것이므로 if (response.message === 'SUCCESS') 라는 조건을 만족할 때 메인페이지로 넘어가는 goToMain()함수를 실행시키고, 이후에 로그인을 계속 할 필요가 없도록 window.localStorage.setItem('token',response.access_token)를 통해 localStorage에 토큰값을 저장해주었다.
그 이외의 경우에는 '아이디 또는 비밀번호가 일치하지 않습니다.'라는 경고창이 뜨도록 했다.