로그인 개발하기

게시판 로그인 하기

📔 결과물

💻 코드리뷰

먼저 pages폴더의 app.tsx 부터 수정해야한다.
로그인과 회원 정보는 모든페이지에서 써야하기 때문에 app.tsx로 부터 불러와야하기 때문이다.

💻 app.tsx

• context.api 를 사용하기위해 createContext 를 import해준다.

import { createContext, useEffect, useState } from "react";

• Token을 받아오기위한 accessToken과 유저정보를 위한 userInfo를 useState해준다.
  그리고 useEffect를 이용해서 컴포넌트가 그려질때 Token을 localStorage를 통해 자신의 컴퓨터에 담아준다.

export const GlobalContext = createContext(null);
function MyApp({ Component, pageProps }) {
  const [accessToken, setAccessToken] = useState("");
  const [userInfo, setUserInfo] = useState("");
  const value = {
    accesstoken: accessToken,
    setAccessToken: setAccessToken,
    userInfo: userInfo,
    setUserInfo: setUserInfo,
  };

• 그리고 useEffect를 이용해서 컴포넌트가 그려질때 Token을 localStorage를 통해 자신의 컴퓨터에 담아준다.
  createUploadLink 안에 headers를 적어준다 (이 부분은 공부가 더 필요하다 ! )

  useEffect(() => {
    const accessToken = localStorage.getItem("accessToken") || "";
    setAccessToken(accessToken);
  });
  const uploadLink = createUploadLink({
    uri: "백엔드 주소",
    headers: {
      authorization: `Bearer ${accessToken}`,
    },
    // 탬플릿 리터널 (변수와 문자 같이쓰는방법)
  });

• context.api를 사용하기위해서 return 전체를 GlobalContext.Provider로 감싸준다.

    return (
    <GlobalContext.Provider value={value}>
		...
    </GlobalContext.Provider>
  );
}

💻 login.container

• context.api를 쓰기위해서 import 해준다.
  query문도 가져온다

...
import React, { useContext, useState } from "react";
import { GlobalContext } from "../../../../pages/_app";
import { LOGIN_USER } from "./login.queries";
...
export default function Login() {
...
  const [loginUser] = useMutation(LOGIN_USER);
  const { setAccessToken } = useContext(GlobalContext);

• 이메일과 비밀번호를 받기위한 useState , onChange 함수 선언

  const [myEmail, setMyEmail] = useState("");
  const [myPassword, setMyPassword] = useState("");
  function onChangeEmail(event) {
    setMyEmail(event.target.value);
  }
  function onChangePassword(event) {
    setMyPassword(event.target.value);
  }

• 클릭시 로그인되는 함수를 만들어준다.
  토큰을 이용하여 사용자 정보를 받아온다.
  로그인후에 랜딩페이지로 가게해주었다.

  async function onClickLogin() {
    const result = await loginUser({
      variables: {
        email: myEmail,
        password: myPassword,
      },
    });
    localStorage.setItem("accessToken", result.data?.loginUser.accessToken);
    setAccessToken(result.data?.loginUser.accessToken);
    router.push("/");
  }
  return (
...

• login.presenter 에 이메일과 비밀번호에는 onChange함수를, 로그인버튼에는 onClick함수를 넣어준다.

💻 header.container

• 역시 context.api를 사용하기위해 import해준다, query문도 불러온다

...
import React, { useContext, useState, useEffect } from "react";
import { GlobalContext } from "../../../../../pages/_app";
import { FETCH_USER_LOGGED_IN } from "./header.queies";
export default function Header() {
  const { setUserInfo, userInfo } = useContext(GlobalContext);
  const { data } = useQuery(FETCH_USER_LOGGED_IN);

• useEffect를 이용하여 유저 정보에 query문 데이터를 담아준다.
  무한루프 방지를 위해 이메일정보가 있으면 return하게 해준다.

  useEffect(() => {
    if (userInfo.email) return;
    setUserInfo({
      email: data?.fetchUserLoggedIn.email,
      name: data?.fetchUserLoggedIn.name,
      picture: data?.fetchUserLoggedIn.picture,
    });
        }, [data]);
...
  return (
    ...

💻 header.presenter

• userInfo가 존재하면 사용자이미지를, 그렇지 않으면 로그인과 회원가입버튼을 보이게해준다.

export default function HeaderUI(props: any) {
  return (
    <>
      ...
      {props.userInfo.email && <My src="/images/user.png"></My>}
      {!props.userInfo.email && (
        <My src="/images/login.png" onClick={props.onTogleLogin}></My>
      )}
	...
      <My src="/images/my.png"></My>
      {!props.userInfo.email && (
        <My
          src="/images/signup.png"
          onClick={props.onClickMoveToSignUp}></My>
      )}
      ...
      </>
  );
}