[TIL] 오늘의 개발일지

최종 프로젝트에서 왜 authService를 바꾸고 싶었냐!!!!!

1. authService의 currentUser의 데이터를 서버(파베)에서 받아오는데까지 약간의 시간이 걸렸다

2. 단순히 삼항연산자로 데이터가 불러와지는동안 "로딩중"이나 이런걸 보여주면 되지 않나? 생각으로 해결되지 않았다

3. 이유? 타쿠의 식탁은 'guest'모드(유저가 아닌 경우)에서도 이용할 수 있는 서비스가 있고, login을 해야만 할 수 있는 기능이 2가지가 나누어져 있는데, 단순하게 유저 정보가 없으면 Guest, 아니면 User로 하기엔 

로그인을 한 유저가 자기는 로긴을 한 상태인데(currentUser 데이터가 있는 상태), 데이터가 불러와지는 동안 잠깐 "guest"인 유저가 볼 수 있는 페이지가 보이면 '읭? 나 로그인 했는데" 라는 체험을(?) 해버리기 때문에 2번의 방법대로 할 수 없었다

4. 최종플젝을 하면서 임시방편으로 '로그인'시에 sessonStorage에 "userData"를 넣어놓고, 어떤 페이지가 랜더될때 세션스토리지에 userData가 있으면 그 유저 데이터를 사용하고 그렇지 않으면 guest로 인식하도록 했었었다.

 

1. 로그인 정보를 (유저의 uid , 이메일 등이 담긴 회원정보) sessionStorage나 localStorage에 담으면 보안 상 취약하다는 생각이 들었다.

2. 보안도 문제지만 애당초 페이지마다 매번 sessionStorage에서 유저 데이터를 확인하고 꺼내오는 로직을 실행하는게 효율적이지 않다는 생각이 들었다. 

 

auth 부분을 리팩토링을 하면서 이래저래 실험해본 것들

 

1. 그럼 쿠키나 세션에다가 넣으면 되지 않을까?

=> 세션은 서버측에서 보내주는건데 내가 어케 넣어, (애당초 백엔드를 내가 임의로 만질 수 있는 부분이 아니니 사용할 수가 없었다) , 쿠키? 쿠키는 얼마나 유지될지 설정해주고, 쿠키 관리를 신경써줘야할 부분이 엄청 많아짐

2. next-firebase-auth ?

=> 나와 같은 문제를 겪었던 사람들이 많아서인지 next-firebase-auth가 있었는데 계속 라이브러리에 라이브러리에 라이브러리가 추가되는 듯한 느낌이 들었다

3. 어차피 Recoil쓰는데 recoil-persist를 써볼까?

=> 게시글 데이터를 전역관리를 하고싶어서 Recoil을 깐 상태였는데, recoil-persist를 이용해서 유저 정보를 유지시킬까 했는데

아쒸 이것도 세션스토리지나 로컬스토리지에 저장되는거여쒀!!!!!!!!!!!1

 

진짜 많이 고민하다가 문득 supabase는 로그인 방식이 어떻게 돌아가는지가 궁금해서 공식문서를 뒤져보다가

나의 눈알이 돌아간 코드

import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs";

export default function index({ user }) {
  return <div>Hello {user.name}</div>;
}


export const getServerSideProps = async (ctx) => {
  // Create authenticated Supabase Client
  const supabase = createServerSupabaseClient(ctx);
  // Check if we have a session
  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return {
    props: {
      initialSession: session,
      user: session.user,
    },
  };
};

 

안늬, 내가 딱 하고 싶은 부분이쟈나 그러챠나

(일단 유저를 체크해서 (세션에서 확인) 세션이 없으면 리다이랙트 시키는거 (나는 리다이랙트가 아니라 user 정보를 "guest"라고 넘겨주면 되겠지)

 

아무튼!! 저 코드를 보고 막혀있던 머리가 띠용띠용 돌아가기 시작했다. 

 

'세션에 저장하는게 되니 일단 회원가입/로그인 구현해보고 세션을 찍어보자'

 

공식문서 따라서 회원가입하고, 로그인을 했는데 

 

읭, 처음엔 로그인이 됐는데 user 데이터는 잘 들어오는데, session은 왜 null 이 뜨는거징?

내가 정작 필요한건 session인뒈!!~~!!

 

 

해서 공식문서 더 꼼꼼히 살펴보니 아래와 같이 나와있던 친절한 설명 ㅇ_<

• Confirm email determines if users need to confirm their email address after signing up.
  • If Confirm email is enabled, a user is returned but session is null.
  • If Confirm email is disabled, both a user and a session are returned.

 

내가 찾던 session~~~~~ 너를 위해 구워찌~~~ㅇ_<

 

auth 서비스에 들어가서 Confirm email을 해지하고 다시 콘솔을 찍어보니 

 

쨔자잔~~~ session까지 잘 조회가 된 걸 확인할 수 있었다

 

 

진심 며칠동안 로컬스토리지나 세션스토리지에 유저 정보 저장하지 않으면서, 불러올 수 있는 방법이 뭐가 있을까 

해결하고 싶어서 별놈의 검색 다해보고 어떤게 효율적일까 주변에 물어도 보고 , 이런저런 시도들도 해봤지만

특히 기억에 남는건 Recoil에서 atom의 디폴트값에 firebase에서 유저정보를 받아온 데이터를 넣어주려고 하면서 시도해봤던 부분?

 

바로 요 아래 코드인데 결론적으로 authService의 currentUser에 바로 접근하지 못하고 계속 null이 떠서 실패했었다. 

(다른 페이지에서는 (일반적인 페이지 컴포넌트) 잘 조회되는데 여기서 currentUser에 바로 안되는거 보니 뭔가 실행순서의 차이때문인가 궁금해서 더 알아봐야겠다)

import { useEffect } from "react";
import { authService } from "@/config/firebase";
import { atom, selector } from "recoil";

const checkUser = selector({
  key: "checkUser",
  get: () => {
  const userCheck = authService.currentUser?.uid;
  let userStatus;
  if(userCheck){
  userStatus=authService.currentUser?.uid
  }
  else{
  userStatus="guest"
  }
    return userStatus
  },
});

export const userAtom = atom({
  key: "userAtom",
  default: checkUser,
});

 

 

해결해보려고 next-firebase-auth도 써보고 쿠키도 써보고 recoil-persist도 써보고 

무엇보다 머리 터지게 어떻게 짤까 고민도 해보고 그러다 방법을 찾아낸 것이라고 생각이 든다

 

그렇게 supabase로 이 '로그인' 부분까지 다 쓰면 되겠다 생각이 들어서 세션 확인까지 했는데

9만좀훼 이제 9만 회

또 머릿속에 쓸데없이 스물스물 기어오르는 생각, 근뎅...firebase도 당연히 되지 않을깡 ㅇㅅㅇ??

 

이력서 수정해야되는데 오늘 딱 오후 3시까지만 붙잡고 하려고 했는데, 리팩토링 해결한거 좋다고 또 파이어베이스도 들어가서 찾아보니

역시나 있었다  

 

 

휴 ㅎㅅㅎ

아무튼!!!! 이런저런 연구 덕분에 getServerSideProps에서 상태를 확인하고 세션에 저장해놓은 유저 정보를 활용할 수 있다는 것도 배우고 세션스토리지에 저장시켰던 로직도 더 좋은 방법으로 바꾼 것 같고

 

해야할일은 너무 많은데 하고싶은것도 너무 많고....이제 고만하고 더 중요한 이력서 수정하러 가야즹...일단 밥좀 먹공 ㅎㅅㅎ...