24.01.12 수파베이스 uid 값 추출&테이블행 삭제하기

이제는 로그인할 경우 각자의 mypage로 이동할 수 있게 기능을 구현하였다

 

const NavBar: React.FC = () => {
  const [currentUser, setCurrentUser] = useState<string | null>(null);
  const navigate = useNavigate();
  const [useruid, setuseruid] = useState<string | null>(null);

  useEffect(() => {
    const authListener = supabasedata.auth.onAuthStateChange((event, session) => {
      setCurrentUser(session?.user?.email || null);

      const userId = session?.user?.id;

      setuseruid(userId || null);
      //로그인한 유저의 uid값을 추출합니다
    });

 

처음에는 auth에서 uid를 바로 가져올 수 있지 않을까 했지만

supabasedata.auth.getUser()는 비동기 함수이기 때문에 즉시 사용자 정보를 반환하지 않았다

Promise 가 할당되어 있어서 어떡하지 하는 찰나에 onAuthStateChange 을 이용하여 해결하였다

비동기 처리 방식을 좀 더 공부해야겠다 바로바로 해결할 수 있도록 꽤나 헤맸다

추출한 uid 값은 마이페이지를 이동할 때 주소값으로 쓰인다

<HeaderButton>
          {currentUser ? (
            <>
              {/* 각자의 uid값으로 마이페이에 들어갈수있습니다 */}
              <Link to={`/mypage/${useruid}`}>마이페이지</Link>
              <button onClick={handleLogout}>로그아웃</button>
            </>
          ) : (
            <>
              <Link to="/login">로그인</Link>
            </>
          )}
        </HeaderButton>

 

이제 마이페이지에서 내가 작성한 글 찜 목록 등등을 불러와주면 된다 얼마 안 남았다

하지만 문제는 다른 팀원들과의 테이블 연결 일단은 내일 아침에 다시 해봐야겠다

벌써 새벽 4시다 코딩은 왜 새벽에 잘 되는 걸까 신기하다

일단 풀리퀘스트 올려놓고 설명 써 둔 뒤 내일 아침에 다시 해봐야겠다

---

팀원들과 회의 후 본격적으로 테이블 수정 작업에 들어갔다

userinfo 테이블에 uuid가 null 값인 것들을 삭제하려고 하니

primary 값이 지정이 안돼서 삭제가 안된다 그러고

그래서 primary 값을 지정하려고 하니 uuid 행(row)에 null 값이 이 있어서 설정을 못한다 하고

결국은 튜터님을 찾아갔다

우연히 만난 첫 조 팀원들 (다들 판교에서 보기로 약속함)

결론적으로는 해결됐는데 방법은

일단은 primary 값을 null 이 없는 email 행에 임시로 지정해 준 후 uuid 행이 null 값인 열을 지워준다

그 후 다시 primary 값을 uuid 행으로 지정했다

컬럼 수 적으면 그냥 지우고 새로 만들자

튜터님 말씀으로는 SQL 방식이라 좀 깐깐하다고 한다. 타입 스크립트 같은 녀석....

 

일단 각각의 테이블에 다 연결을 해보았다

SQL 방식이라 이미 users에 연결된 컬럼은 지우지 못하고

아예 새로운 컬럼을 만들어서 이름 바꾼 후 다시 연결 수파베이스는 진짜 수정보다 새로 만드는 게 훨씬 빠른 거 같다 애초에 처음부터 테이블 설정 회의를 제대로 하고 시작하는 게 편하다.

지금은 정보 값이 적어서 다행이지만 이게 많았다면...... 그래도 이제 같은 실수는 안 하지 싶다.

---

13. 쿠키, 세션, 웹 스토리지의 차이를 설명해 보세요

• 답변
• 쿠키: 클라이언트에 저장되며 주로 세션 관리, 사용자 맞춤, 사용자 추적에 사용. 저장 용량 제약이 있고, 보안성이 낮음.
• 세션: 서버에 저장되며 주로 클라이언트 식별, 보안 강화에 사용. 서버 메모리 사용이 증가할 수 있음.
• 웹 스토리지: 클라이언트에 저장되며 로컬 스토리지는 영구 데이터 저장, 세션 스토리지는 일시적 데이터 저장에 사용. 네트워크 요청 시 전송되지 않고, 쿠키보다 높은 저장 용량 지원.

 

 

14. 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해 주시고, 장/단점을 설명해 주세요.

• 답변

"Client-Side Rendering (CSR)은 브라우저에서 HTML을 직접 렌더링 하여 빠르고 부드러운 상호 작용을 제공합니다. 그러나 초기 로딩이 느리고 SEO에 어려움이 있을 수 있습니다. 반면에, Server-Side Rendering (SSR)은 초기 로딩이 빠르고 SEO에 유리하지만, 서버 부하와 일부 상호 작용 측면에서 CSR에 비해 느릴 수 있습니다. 따라서 선택은 프로젝트의 요구 사항에 따라 다르며, CSR은 빠른 상호 작용이 중요할 때, SSR은 초기 로딩과 SEO가 중요할 때 유용합니다."