[React] 로그인, 회원가입 API 통신

⚡️로그인  API 통신

 const appearAlertModal = () => {
    setIsAlertModalAppear(true);
    setTimeout(() => {
      setIsAlertModalAppear(false);
    }, 3000);
  };
 
 const loginRequest = e => {
    e.preventDefault();
    fetch(API.login, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ email, password }),
    })
      .then(response => {
        if (response.ok === true) {
          return response.json();
        }
        throw new Error("에러 발생!");
      }, [])
      .then(data => {
        localStorage.setItem("token", data.accessToken);
        navigate("/");
      })
      .catch(appearAlertModal);
  };
      });
  };

                      ***** 로그인 할 때 서버에서 받아온 userInfo *****
{
    "userInfo": {
        "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NywiaWF0IjoxNjY2Njg0NTU3LCJleHAiOjE2Njc0NjIxNTd9.K5Z1eox93DHKnFIszc0phgob-mXYR70DpXjv1v9kj5g",
        "userName": {
            "firstName": "code",
            "lastName": "kim"
        }
    }
}

1. e.preventDefault  : 고유 동작을 중단

form 테그는 브라우저를 새로고침하는 것이 디폴트이기 때문에 콘솔에서는 브라우저가 가진 정보가 뜨고 나서 빠르게 사라진다.
이를 막기위해 사용 preventDefault 사용

2. fetch 첫번째 인자 : API주소(서버.백엔드로부터 받음)

http:// 혹은 https:// , IP 주소(with 포트 번호) 혹은 도메인 주소, 엔드 포인트로 구성

3. fetch 두번째 인자 : method, headers, body가 있는 요청과 없는 요청

method : GET, POST, PUT, PATCH, DELETE
headers : 서버에 요청할때 보낼 부가적인 정보
method:"POST" 로 요청하는 경우 headers에 Content-Type: application/json; charset=utf-8 은 필수로 담아야 합니다.
body가 있을경우 >> 서버에 보낼 정보가 있는경우 , 요청 body에 담아서 보낸다
JSON.stringify라는 메서드에 담아서 보내야 한다.(JSON으로 형 변환을 해준다 >> 서버와 클라이언트가 다른언어를 주고 받을 수 없어서 >> JSON형태는 어떤 언어든 상관 없이 데이터를 주고 받을수있다. )

4. 첫번째 then

.then(response => response.json()) 응답받은 response 객체를 자바스크립트 객체로 변환해주는 매서드
(response.ok === true)는 response 객체 안에 ok key가 있는데 로그인 전에는 ok의 value 값이 false 되어있다,
성공 시에 true로 변경되면서 실행 
로그인 실패 할 경우 error 메세지를 띄우고 catch(appearAlertModal)가 시행되어 modal을 실행

5. 두번째 then

.then(data => {
localStorage.setItem("token", data.userInfo.accessToken);
 >> token이라는 key로 accesstoken이라는 value 값을 추가
localStorage.setItem( "userName", JSON.stringify(data.userInfo.userName) ); }) 
>> userName이라는 key로 userName이라는 value 값을 추가

6. localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장 

setItem() - key, value 추가 (setItem(key, value))
getItem() - value 읽어 오기 (getItem(key))
removeItem() - item 삭제
clear() - 도메인 내의 localStorage 값 삭제
length - 전체 item 갯수
key() - index로 key값 찾기

7. catch( ) 메서드

에러 처리 콜백을 지정해 줄 수 있다. 
만약 then 메서드 안에서 에러가 발생하면 try...catch구문과 유사하게 처음만나는 에러 처리 콜백으로 코드로 건너뛰어 실행한다 

8. throw문

thow문을 통해 사용자 정의 예외를 발생(throw)할 수 있음
예외가 발생하면 현재 함수의 실행이 중지. throw 이후의 명령문은 실행되지 않음
제어 흐름은 콜스택의 첫 번째 catch블록으로 전달됩니다. 호출자 함수 사이에 catch 블록이 없으면 프로그램이 종료됩니다. 

9. new Error('') 생성자

오류 객체 생성

 

⚡️회원가입  API 통신

const signupRequest = e => {
    e.preventDefault();
    fetch(API.signup, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email,
        password,
        lastName,
        firstName,
        phoneNumber,
        birthday,
      }),
    })
      .then(response => {
        console.log(response);
        if (response.ok === true) {
          return navigate("/Login");
        } else {
          throw new Error("에러 발생!");
        }
      })
      .catch(error => console.log(error));
  };