[ React ] Fetch apply

Fetch 함수를 이용한 회원가입 & 로그인 구현을 가볍게 진행해 보았다.
로직에 대해 작성 후 코드 리뷰를 진행해보겠다.

제발,, 벨로그 자동 임시저장을 너무 믿지말자,,
1시간동안 작성된 내용들이 다 날라갔,,,ㅜ

애증의 fetch 절대 안잊을 것 같다.

먼저,

[ Fetch 를 이요한 회원가입, 로그인 구현 ]

회원가입, 로그인 구현을 위한 전체적인 흐름에 대하여 작성해보자.

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

[ Fetch 함수 ]

fetch 함수는 인자를 2가지 받는다.

1. 첫번째 인자는 API 주소 
2. 두번째 인자는 HTTP 통신에 관한 내용 

이때 두 번째 인자 에는 ?

• method 에는 GET, POST, PATCH 등 HTTP method를 입력.
• body 에는 JSON 형태로 주고 받을 데이터를 넣는다.
• 통신을 할 때는 String 형태의 JSON으로 보내야 하기 때문에 JSON.stringify() 라는 메서드를 활용해서 포맷을 기존의 javascript object에서 JSON String으로 변환.

then 메서드가 사용되는 이유는 ?

HTTP 통신은 다른 로직에 비해 오래 걸리기 때문에 비동기로 처리. JS 에서 비동기를 처리하는 문법으로 Promise 객체가 있습니다. 따라서 fetch 함수는 Promise 객체를 리턴한다.then() 메서드는 Promise 객체에 사용할 수 있는 메서드 이다. 위 예제 코드를 보면, then() 메서드를 fetch 함수의 실행 결과에 체이닝 하고 있는데, 이는 비동기로 처리된 fetch 함수의 결과 값이 들어오면 then 메서드의 액션을 실행 하라는 의미이다.

then 메서드에 대한 해석 !

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

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

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

두 번째 then에서는 object로 변환한 response를 console.log로 확인합니다.

위 예제 코드에서는 콘솔을 출력하고 있지만, 사실 이 부분에 분기 처리하는 로직이 구현 된다.

예를 들어,

-로그인 성공하면 main 페이지로 이동
-로그인 실패하면 alert 창에 "아이디 / 비밀번호를 확인해주세요." 띄우기
와 같은 로직이 들어간다.

하단에 작성된 코드에 대하여 해설하였으니 떠올리며 확인해보자

쉽게 말해,

.then 을 기준으로 위에 있는 코드는 요청, 아래 있는 코드는 응답 받는 것을 표현한다.

아래는 input 의 값을 서버로 보내서 회원가입과 로그인을 구현한 코드이다.

 // fetch함수를 이용해 api 호출 - 회원가입
  const goToSignup = () => {
    fetch('http://10~~~~/users/signup', {
      method: 'POST',
      body: JSON.stringify({
        name: 'kyuhyun',
        email: id,
        password: pw,
        phone_number: '010',
      }),
    })
      .then(res => res.json())
      .then(result => alert(result.message));
    setId('');
    setPw('');
  };

  // fetch함수를 이용해 api 호출 - 로그인
  const goToLogin = () => {
    fetch('http://10~~~~/users/signin', {
      method: 'POST',
      body: JSON.stringify({
        name: 'kyuhyun',
        email: id,
        password: pw,
        phone_number: '010',
      }),
    })
      .then(res => res.json())
      .then(result => (result.token ? goToMain() : alert(result.message)));
    setId('');
    setPw('');
  };

회원가입 코드 기준으로 보면
위 부분은 요청 하는 서버의 주소, POST 메서드, 서버로 보내는 내용을 작성하고

첫번째 .then은 서버에서 JSON 으로 가져온 값을 사람, JS 가 이해 가능하게 변경해주는 것,

두번째 .then 은 input에 입력한 값이 서버로 잘갔으면 success 값을 alert 을 통해 알람창으로 보여주고, alert 알림이 나왔다면 ID, PW 의 input 값은 "" 빈 문자열로 변경한다 . 라고 해석이 가능하다.

직접 API 를 호출하며 알게된 점

메서드 Get 을 사용하면 안되는 이유 ?

회원가입을 할때만 POST 하면 되는게 아닌가? 라는 생각이 들었지만 잘못된 접근이었다. 결국 로그인할때도 input의 값을 작성하여 서버로 보내서 내가 회원가입할때 입력했던 값들과 유효성검사를 진행하여 맞다면 토큰을 발급해주기 때문이다.

위처럼 상수를 넣어 작성된 이유 ?

서버에서 요구되는 객체의 KEY를 맞추기 위하여 서버로 보내는 input 값이 아닌 다른 값은 상수로 처리 하였다.

          onClick={() => {
            fetch('http://10.58.3.10:8000/users/signin', {
              method: 'POST',
              body: JSON.stringify({
                name: 'kyuhyun',
                email: id,
                password: pw,
                phone_number: '010',
              }),
            })
              .then(res => res.json())
              .then(result => (result.token ? goToMain() : alert(result.message)));
            setId('');
            setPw('');
          };}

위는 코드는 button 태그에 onClick event 를 부여함과 동시에 fetch 함수를 통해 API 를 불러온 것이다. 즉, 함수로 만들어 적용하지 않고 태그로 바로 적용한 방법이다.

마지막으로 ,,

< 개똥이는 오늘도 성장한다 ! >