로그인 & 회원가입

fetch()함수

프론트 엔드, 백 엔드 간에 http 통신을 위해 사용 하는 메서드

• fetch 함수는 인자를 2가지 받습니다.
  • 첫번째 인자는 API 주소 입니다.
  • 두번째 인자는 HTTP 통신에 관한 내용 입니다.
• 두 번째 인자
  • method 에는 GET, POST, PATCH 등 HTTP method를 입력합니다.
  • body 에는 JSON 형태로 주고 받을 데이터를 넣습니다.
    백 엔드, 프론트 엔드 사용하는 언어가 다르기 때문에,
    통신을 할 때는 String 형태의 JSON으로 보내야 하기 때문에 JSON.stringify() 라는 메서드를 활용해서 포맷을 기존의 javascript object에서 JSON String으로 변환해줍니다.
• HTTP 통신은 다른 로직에 비해 오래 걸리기 때문에 비동기로 처리합니다. JS 에서 비동기를 처리하는 문법으로 Promise 객체가 있습니다. 따라서 fetch 함수는 Promise 객체를 리턴 합니다. then() 메서드는 Promise 객체에 사용할 수 있는 메서드 입니다. 위 예제 코드를 보면, then() 메서드를 fetch 함수의 실행 결과에 체이닝 하고 있는데, 이는 비동기로 처리된 fetch 함수의 결과 값이 들어오면 then 메서드의 액션을 실행 하라는 의미입니다.

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

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

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

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

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

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

import { useNavigate } from 'react-router-dom';
import './LoginForm.scss';

function LoginForm({ loginValues, onChange }) {
  const { id, password } = loginValues;
  const navigate = useNavigate();

  const isInputValid =
    id.includes('@') && id.length >= 6 && password.length >= 6;

  const goToMain = () => {
    fetch('http://10.58.4.238:8000/users/login', {
      method: 'POST',
      body: JSON.stringify({
        email: id,
        password: password,
        // name: '래영',
        // phone_number: '010-1111-111',
      }),
    })
      .then(response => response.json())
      .then(result => {
        // console.log(result);
        if (result.token) {
          //localStorage.setItem('token', result.token);
          alert('환영합니다!');
          navigate('/main-han');
        } else if (result.message === 'INVALID_USER') {
          alert('ID와 PW를 확인해주세요.');
        }
      });
  };

  return (
    <form className="loginForm">
      <h1>Westagram</h1>
      <input
        id="id"
        name="id"
        className="userId"
        type="text"
        placeholder="전화번호, 사용자 이름 또는 이메일"
        onChange={onChange}
      />
      <input
        id="password"
        name="password"
        className="userPassword"
        type="password"
        placeholder="비밀번호"
        onChange={onChange}
      />
      <button
        type="button"
        className={`loginButton ${isInputValid ? 'loginBtnLive' : ''}`}
        onClick={goToMain}
        disabled={!isInputValid}
        //style={style}
      >
        로그인
      </button>
      <div className="findPassword">
        <a href="#">비밀번호를 잊으셨나요?</a>
      </div>
    </form>
  );
}

export default LoginForm;

onChange이벤트를 통해 inputvaild 변수에서 유효성 검사 실시. (백엔드와 조건문을 맞춰야 함)
onClick이벤트 발생 시 goToMain함수 실행.
( key명은 백엔드와 맞춰야 함 )
회원가입 후, 로그인 실시. 백엔드에서 온 response가 토큰일 경우 로컬스토리지에 저장하고, 알림창 띄운 후, 메인 화면으로 이동.

프론트 / 백엔드 통신이 안될 때 확인사항

• 연결 자체가 안될 때
  • 동일한 WIFI 를 사용하고 있는지 확인.
  • fetch 함수가 실행이 되는지 확인.
  • API 주소에 http://10.58.8.116:8000/users/signup 과 같이 http:// , IP주소 , 포트번호 , 엔드포인트 다 작성이 잘 되었는지 확인.
  • 백엔드 IP 주소 재확인.
  • 백엔드 서버가 열려 있는지 확인.
• 연결은 되었지만, 원하는 응답이 오지 않고 에러가 날 때.
  • fetch 함수의 syntax 확인.
  • body 에 담아서 전달해 주어야 하는 정보중 누락된 것이 있는지 확인.
  • body 에 key 값이 올바르게 들어갔는지 확인.

💡
위 사항들은 개발자 도구의 네트워크 탭 에서 전부 확인할 수 있습니다 👐