fetch함수를 이용한 로그인&회원가입

 

 

 

 

 

 

전체적인 흐름

 

코드로 바로 들어가기 전에 전체적인 흐름을 한 번 짚고 넘어가겠습니다.

 

 

1. 유저가 이메일을 입력합니다. Email Input의 onChange 함수가 실행 됩니다.
2. onChange 함수에서 Email Input의 value를 setState를 통해 업데이트 합니다.
3. 유저가 비밀번호를 입력합니다. Password Input의 onChange 함수가 실행 됩니다.
4. onChange 함수 안에서 Password Input의 value를 setState를 통해 업데이트 합니다.
5. Button을 클릭하면 onClick 함수가 실행 됩니다.
6. onClick 함수 안에서 fetch 함수를 통해 server에 요청(Request)을 보냅니다.
7. server에서 인증 / 인가 과정을 거친 후의 결과를 응답(Response)으로 보내 줍니다.
8. 응답의 결과에 따라 Main 페이지로 이동 하거나 에러 메세지를 띄웁니다.

복잡해 보이는 것도 잘게 나눈 다음에 하나씩 차례대로 구현 하면 됩니다.

 

코드

복잡해 보이는 것도 잘게 나눈 다음에 하나씩 차례대로 구현 하면 됩니다.

 

fetch("api주소", {
      method: "POST",
      body: JSON.stringify({
        email: this.state.id,
        password: this.state.pw,
      }),
    })
      .then((response) => response.json())
      .then((result) => console.log("결과: ", result));

 

fetch에 대해서 설명하기 전에 통신을 먼저 해봅시다. api 주소, body의 key 값과 value에 있는 state를 본인의 코드에 맞게 수정해주세요!

fetch 함수 설명

첫 번째 인자는 api 주소, 두 번째 인자는 http 통신에 관한 내용입니다.

두 번째 인자

• method는 GET, POST, PATCH 등 http method를 입력합니다.
• JSON 형태로 데이터를 주고 받는데 이 데이터를 body에 넣습니다.
  • 통신을 할 때는 string 형태의 JSON으로 보내야 하기 때문에 JSON.stringify()라는 메서드를 활용해서 포맷을 기존의 Object에서 String으로 변환해줍니다.
• 통신은 다른 로직에 비해 오래 걸리기 때문에 비동기 처리돼서 then 메서드를 사용합니다.

.then((response) => response.json())

첫 번째 then에서는 server에서 보내준 response를 Object 형태로 변환합니다.

.then((result) => console.log("결과: ", result));

두 번째 then에서는 object로 변환한 response를 console.log로 확인합니다. 여기서 원하는 로직을 구현합니다. 예를 들어

• 로그인 성공하면 main 페이지로 이동
• 로그인 실패하면 alert 창에 "아이디나 비밀번호를 확인해주세요." 띄우기

 

---

 

 

실습

 

 

로그인, 회원가입 기능만을 설명하기 위해 다른 필요없는 기능이 담긴 코드들은 삭제하고 게시함.

 

같은 컴포넌트에서 처음에 회원가입Api로 접근해서 회원가입을 하고

그 후 회원가입 Api를 로그인Api로 바꾼 후 로그인을 시도함.

 

<회원가입>

 

<LoginButton.js>

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Login_Button extends Component {
  goTomain = () => {
    fetch('회원가입 api주소', {
      method: 'POST',
      body: JSON.stringify({
        email: this.props.idvalue,
        password: this.props.pwvalue,
      }),
    })
      .then(res => res.json())
      .then(result => {
        if (result.message === 'SUCCESS') {
          alret('회원가입 성공!')
        } else {
          alert('회원가입 양식이 틀립니다.');
        }
      });
  };

  render() {
    const { idvalue, pwvalue } = this.props;

    return (
      <div className="button_box">
        <button
          onClick={this.goTomain}
        >
          로그인
        </button>
      </div>
    );
  }
}

export default withRouter(Login_Button);

 

method가 get인 경우 :

1. fetch() 기본은 get이기 때문에 따로 기입하지 않아도 get으로 호출된다.

2. get은 데이터를 받아오는 역할만을 수행한다. 

3. QueryString을 활용해서 데이터를 요청하는 특징이 있다. 이런 특징은 보안에 아주 취약하다.

4. get을 요청할 때 QueryString에 민감하거나 노출이 되면 안되는 값을 노출시키는 행동을 조심해야 한다.

 

method가 post인 경우:

1. method를 따로 기입해줘야 합니다.

2.생성/업데이트하기 위해 서버로 데이터를 보내는데 사용됩니다. 서버에 내가 요청한 데이터를 추가하는

작업을 원할 때 사용합니다.

3.서버로 보내는 데이터는 get방식과 다르게 body에 담아서 보내기 때문에 보안적인 측면에서는

get보다 높다고 할 수 있습니다.

 

둘의 가장 기본적인 차이점은 get요청의 경우에는 사용자에게 필요한 화면에 대한 데이터를 받아오는 역할이라고 한다면 POST는 웹상에서 사용자의 어떤 행동을 Server에 반영하는 일을 한다고 보면 된다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

body는 데이터를 보낼 때 json형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON형태로 변환했다.

 

email,pass은 input태그에서 입력하는 값을 부모컴포넌트에서 props로 넘겨주었다.

 

email,password는 백엔드에서 원하는 형식으로 정보를 넘겨줘야 한다.

백엔드 측의 조건에 email에서 @이 포함되어야 하고, password는 8자리이상 이상이라고 하면

그 형식을 지켜줘야 데이터를 성공적으로 보내줄 수 있다는 말이다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

첫번째 then 함수에 전달된 인자 res는 http통신 요청과 응답에서 응답의 정보를 담고 있는 객체이다.

그런데 console을 확인해보면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않을 것이다. 

응답으로 받는 JSON 데이터를 사용하기 위해서는 res Object 의 json 함수를 호출하고, return 해야한다.

그러면 이 값이 객체 형태로 두 번째 then 함수의 인자(result)로 온다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

fetch함수는 비동기 함수이다.

즉, 처리가 완료되기까지 시간이 오래걸리기 때문에 fetch가 끝나기 전에 다른 함수가 먼저 실행될 수 있다.

그렇게 되면 순서가 섞을 수 있기 때문에 .then을 사용하여 순서를 고정시키는 것이다.

 

fetch함수 -> fetch가 다 끝나면 첫번째 .then -> 첫번째가 끝나면 두번째 .then

 

 

 

 

<로그인>

<LoginButton.js>

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Login_Button extends Component {
  goTomain = () => {
    fetch('로그인 Api', {
      method: 'POST',
      body: JSON.stringify({
        email: this.props.idvalue,
        password: this.props.pwvalue,
      }),
    })
      .then(res => res.json())
      .then(result => {
        if (result.message === 'SUCCESS') {
          this.props.history.push('/main');
          window.localStorage.setItem('token', result.token);
        } else {
          alert('잘못된 회원정보입니다.');
        }
      });
  };

  render() {
    const { idvalue, pwvalue } = this.props;

    return (
      <div className="button_box">
        <button
          onClick={this.goTomain}
        >
          로그인
        </button>
      </div>
    );
  }
}

export default withRouter(Login_Button);

백엔드에서 

회원가입 Api는 데이터 추가가 가능하게 해뒀고 

로그인 Api는 데이터 조회만 가능하게 해뒀다.

 

로그인Api에서 데이터 조회에 사용자 정보가 일치하면 this.props.history.push('/main');으로  메인페이지로 이동하게 하고

백엔드에서 보낸 토큰을 스토리지의 로컬세션에 저장해둔다.

 

정보가 틀리면 '잘못된 회원정보입니다.'가 나온다.