📌

✨ 컬러리스트 사이트(아직 없음

오늘은 백엔드와 프론트엔드 서버를 동시에 열어놓고
로그인과 회원가입을 성공한 경우
페이지 이동 및 전달된 토큰 내용을 alert로 확인할 수 있게 해보았다.

api 연결 전 Register.tsx

전에 만들어둔 Register.tsx에 들어가보면
아직 백엔드와 연결하는 코드가 없고 data를 alert창에서 보여주게끔 만들어 놓았다.

onSubmit={handleSubmit((data) => {
        alert(JSON.stringify(data));

회원가입 성공시 페이지 이동하기

그리고 response의 반응이 200번대나 300번대, 즉 성공 범위 안에 있을 경우
ok로 성공을 간주하고, react-router-dom에 있는 useNavigate()를 이용해 로그인 페이지로 이동한다.

ok
ok는 status의 200-299의 값을 추상화한 boolean인데 200-299사이의 status이면 true를 가지게 된다.
출처: https://velog.io/@daybreak/React-Fetch%ED%95%A8%EC%88%98

import { Link, useNavigate } from "react-router-dom";
  ...

function Register() {
  const navigate = useNavigate();
  ...

if (response.ok) {
          navigate("/login");
        }

로그인 Login.tsx도 동일하게

Login.tsx도 일단 동일하게 로그인에 성공했을 경우만 코드로 작성했다.
조금 다르게 한 것은 로그인에 성공했을 경우 전달된 jwt토큰 값을 result에 넣고
alert창에 띄워 볼 수 있게 했다.

onSubmit={handleSubmit(async (data) => {
        const response = await api.login(data);

        if (response.ok) {
          const result = await response.json(); // body로 온 json을 파싱함!

          alert(JSON.stringify(result));
          navigate("/");
        }
      })}

이렇게 해서 현재 회원가입과 로그인에 성공했을 경우를 간단히 작동시킬 수 있게 되었다.
중간에 input 타입에 에러가 나서 forwardRef로 수정을 했는데 이 부분에 대해서는 나중에 정리해보겠다.