#1 팀 프로젝트 시작! 로그인/회원 조회 API 테스트 (REACT)

친구들과 팀플을 시작!

IMAD 라는 영화리뷰 어플리케이션을 내가 팀플에 참여해서 웹버젼도 제작하기로 하였다.

 

우선 기초적인 API 부터 사용을 해보기로 하였다.

로그인 API 를 사용해서 로그인 토큰을 제공받고 

받은 토큰을 헤더에 넣어 회원정보를 받아오는것이 목표이다!

 

 

아직 테스트 환경이기때문에 필요한 리소스만 활용해 CSS 없이 화면을 구성했다.

로그인 을 할 화면이다.

로그인후 회원정보를 조회해 나열한 모습이다.

 

로그인 페이지의 로직부

import { ChangeEvent, useState } from "react";
import LoginPageUI from "./login_presenter";
import axios from "axios";
import { useRouter } from "next/router";
import { setCookie } from "../../../commons/cookies/cookie";

export default function LoginContainer() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const router = useRouter();
  const LOGINIMAD = async () => {
    await axios
      .post("https://ncookie.site/api/login", {
        email: email,
        password: password,
      })
      .then((res) => {
        if (res.status === 200) {
          console.log(res.data);
          const accessToken = res.headers["authorization"];
          setCookie("Authorization", accessToken, {
            path: "/",
            secure: true,
            sameSite: "none",
          });
          if (process.browser) {
            router.push("/login/success");
          }
        }

        return res.data;
      });
  };

  const onChangeEmail = (event: ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value);
  };

  const onChangePassWord = (event: ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  };

  const onClickLogin = () => {
    if (email === "" || password === "") {
      alert("아이디와 비밀번호를 입력해주세요.");
      return;
    }

    LOGINIMAD();

    if (process.browser) {
      router.push("/login/success");
    }
  };

  return (
    <>
      <LoginPageUI
        onChangeEmail={onChangeEmail}
        onChangePassWord={onChangePassWord}
        onClickLogin={onClickLogin}
      />
    </>
  );
}

 

로그인에 사용할 이메일과 비밀번호를 input text onchange 하여서 state 에 저장하고 로그인 버튼을 누르면 state 데이터를 담아서 api 요청을 날리게 하였다. 응답이오면  응답 헤더에 들어있는 JWT 토큰을 쿠키에 저장 하는 로직도 작성 하였다.

회원정보 조회 의 로직부

import { getCookie } from "../../../commons/cookies/cookie";
import axios from "axios";
import { useState } from "react";

import { useEffect } from "react";
export default function LoginCompletePage(): JSX.Element {
  const [userData, setUserData] = useState("");
  const aaa = [];
  const FETCHUSER = async () =>
    await axios
      .get("https://ncookie.site/api/user", {
        headers: {
          Authorization: `Bearer ${getCookie("Authorization")}`,
        },
      })
      .then((res) => {
        if (res.status === 200) {
          setUserData(res.data);
          console.log(userData);
          return res.data;
        }
      });

  useEffect(() => {
    FETCHUSER();
  }, []);

  return (
    <>
      <div>{userData?.data?.nickname}님 환영합니다!</div>
      <div>나이 : {userData?.data?.age_range}</div>
      <div>성별 : {userData?.data?.gender}</div>
      <div>회원종류 : {userData?.data?.auth_provider}</div>
      <div>email : {userData?.data?.email}</div>
    </>
  );
}

로그인페이지에서 쿠키에 담아놓은 토큰을 API 요청 헤더에 담아 API 요청을 날린다.

응답 바디에 들어있는 데이터를 state 에 담아서 아래 html 파트에 뿌려 데이터를 표시한다.

작동모습!

어려웠던점!

1. 기존에 썼던 graphql 이 아닌 rest-api를 활용해야 해서 새로배우는 느낌이라 힘들었다...

2. 기존에 이미 어느정도 진행중이던 모바일 프로젝트에 내가 추가된 것이라 백엔드 api 에서 웹으로 통신시에 벌어지는 오류가 있다 예) cors cors cors cors ... 하지만 나도 rest api 통신이 사실상 처음이라 내쪽 오류인지 백엔드쪽오류인지 잘 알수가 없었다...