[TIL] Fetch method

💡 목표 : 로그인 창 구현

• input 2개 (email, password)
• 입력 후 버튼 클릭(or 엔터 입력) 시 백엔드와 통신
• 데이터베이스에 해당 정보 확인 후 알맞은 response 받기

🌸 결과 : fetch 함수 사용

const ERRORS = {
  USERS_DOES_NOT_EXIST: '잘못 입력',
  INVALID_PASSWORD: '비밀번호 확인',
};

const goToMain = () => {
  fetch('http://서버IP주소/users/signin', {
    method: 'POST',
    body: JSON.stringify({
      email: inputValues.userName,
      password: inputValues.password
    }),
  })
    .then(response => response.json())
    .then(result => {
      if (result.access_token) {
        alert('로그인 성공');
        navigate('/main-namju');
        return;
      }
      alert(ERRORS[result.message]);
    });
};

• 백엔드에 request를 보내기 위하여 fetch 함수를 사용하였다 ➡️ fetch("API주소", { request 내용 })

• 함수를 인라인으로 바로 넣을 수 없어, goToMain()이라는 함수로 분리하였다

• request는 method와 body로 구성됨
  method는 기본값이 GET, body는 문자열만 가능하기 때문에 객체를 문자열로 바꿔주는 JSON.stringify를 사용한다.

• response를 받으면 먼저 JSON 형태로 바꿔준다 .json()

• 그리고 로그인이 성공해 토큰을 받는다면 '로그인 성공' 얼럿을 띄운 후 메인 페이지로 이동한다.

• 오류가 날 경우 맞는 메시지를 띄운다
  오류를 else if 문으로 분기처리하는 것 보다는, 맵핑하여 간결하고 직관적으로 코드를 고쳤다.

• ✨ 나의 경우 email, password 값이 inputValues라는 state 객체의 프로퍼티로 들어가있었다.
  그냥 inputValues.userName 식으로 접근할 수 있었다.

⚠️ 항상 콘솔을 찍어보며 백엔드와의 통신이 제대로 이어졌는지, key error가 있는지, 오류 메시지는 무엇인지 확인하면서 작업하자