[프론트] 로그인 & 회원가입

로그인과 회원가입

로그인과 회원가입을 위해 백엔드와 통신하여 api를 사용하는 방법을 간단히 정리했다

fetch 함수를 이용한 로그인 및 회원가입 방법

클라이언트가 서버에 Request를 보내면 서버에서 인증과 인가의 과정을 거치고, 서버가 클라이언트에게 Response 하는 방식으로 진행이 된다.

프론트에서 백엔드와 통신해서 api를 통한 로그인 및 회원가입을 하기 위해서는,
일단 3가지의 협의 사항이 있다.

1. 로그인 api 주소와, 회원가입 api주소 요청

2. 요청하는 json 파일에 state 값을 어떻게 요청해야 하는지?
    - key 값을 어떻게 사용해야 하는지?
    
3. 응답을 어떤 형식으로 보내줄 것인지?
    - error 메세지를 뭐라고 출력 해줄것인지?

• 로그인 api주소와 회원가입 api주소는 fetch 함수를 사용해서 데이터를 보낼 때 사용
• 백엔드에서 받아가는 key값으로 Request를 보내야 통신 후 key값을 넣어주고, 그 값으로 백엔드에서 인증과 인가의 과정을 진행 할 수 있다
• 응답을 어떻게 보내줄지 알아야 그 데이터를 받아서 경고창을 띄워주거나, 페이지를 이동시켜 줄 수 있다

loginfetch = () => {
    fetch('API URL', {
      method: 'POST',
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password,
      }),
    })
      .then(response => response.json())
      .then(response => {
        if (response.message === 'INVALID_USER') {
          alert('아이디 또는 비밀번호가 맞지 않습니다.');
        } else if (response.message === 'SUCCESS') {
          this.props.history.push('/main-seong/');
        }
      });
  };

위의 코드는 백엔드와 프론트엔드의 통신을 위한 함수 코드 이다.

함수 코드 설명

fetch('API URL', {

협의한 api url 을 두번째 줄의 부분에 넣어주면, 그 url로 Request를 보내게 된다.

method: 'POST',

이때, method 는 get또는 post 를 사용하는데,

• get은 정보를 받아만 오고 다른 작업이 이루어지지 않을때 사용하며
• post는 정보를 받아오고, DB에 수정이 일어나야 할 때 사용한다

body: JSON.stringify({
  email: this.state.email,
  password: this.state.password,
      }),

위의 코드는 json 파일로 전달하기 위한 JSON.stringify를 사용해주고,
백엔드와 협의한 2번(key값을 어떤것을 사용해야 되는지?)내용을 토대로 key값을 정해준다

.then(response => response.json())
.then(response => {
  if (response.message === 'INVALID_USER') {
    alert('아이디 또는 비밀번호가 맞지 않습니다.');
  } else if (response.message === 'SUCCESS') {
    this.props.history.push('/main-seong/');
  }

위의 코드는 백엔드와 협의한 3번(응답메세지)을 이용해서 alert 창을 띄워주거나, 페이지 이동을 시켜줘서 기능을 넣어줄 수 있다

위의 내용 처럼 api를 이용한 데이터 사용을 위해서는 백엔드개발자와 프론트엔드개발자가 소통을 꾸준히 하면서 key값과, 요청 및 응답데이터의 구조들을 협의 해야 된다는것을 느끼게 되었다.