[NEXT]React 심화 Intro : 실무와 가까운 수준의 프로젝트 - Trouble Shooting

 

 

🐞 Trouble Shooting

 

 

 

1. 새로고침 시 로그아웃 문제

• 문제: 새로고침하면 로그인 정보가 초기화되어 로그인 페이지로 이동.
• 원인: 클라이언트와 Zustand 상태가 초기화되어 user 값이 null로 설정.
• 해결 방법:
  • Zustand 상태를 확인하고 supabase.auth.getSession()으로 세션 정보를 체크.
  • useEffect에 조건을 추가하여 이미 user가 있는 경우 세션 확인을 건너뛰도록 수정
     

useEffect(() => {
  const checkSession = async () => {
    if (user) {
      setIsPending(false)
      return
    }
    const { data, error } = await supabase.auth.getSession()
    if (error || !data.session) {
      router.push('/auth/login')
      return
    }
    setIsPending(false)
  }
  checkSession()
}, [router, user])

 

 

2. 유저 상태와 콘솔 출력 불일치

• 문제: console.log(user)는 null을 출력하지만, 브라우저 콘솔에서는 유저 정보가 표시됨.
• 원인: 브라우저 콘솔과 상태 업데이트 타이밍의 차이.
• 해결 방법: Zustand의 user 상태와 supabase.auth.getSession()을 동기화하여 초기 로딩을 정확히 처리.

 

3. 북마크 상태 유지 문제

• 문제: 새로고침 후 북마크가 제대로 반영되지 않음.
• 원인: post.isBookmarked 값을 초기 상태에서 확인하지 못함.
• 해결 방법:
  • supabase에서 북마크 상태를 가져오고 post 데이터에 포함.
   

const parsedPosts = postData.map((post) => ({
  ...post,
  isBookmarked: post.bookmarks.some(
    (bookmark) => bookmark.user_id === user.id,
  ),
}))

4. 마지막 카드 학습 완료 시 알럿 처리

• 문제: 카드 학습 완료 후 알림(Swal.fire)이 정상적으로 뜨지 않음.
• 원인: 마지막 카드의 상태 업데이트가 비동기적으로 이루어져 알림이 표시되지 않음.

const goToNextCard = async () => {
  if (currentIndex < totalCards - 1) {
    setCurrentIndex(currentIndex + 1)
    setIsFlipped(false)
  } else {
    await Swal.fire({
      title: '🎉 학습 완료!',
      text: '모든 카드를 학습하셨습니다!',
      icon: 'success',
      confirmButtonText: '확인',
    })
    router.push('/learning')
  }
}

6. 타입스크립트와 타입 오류

• 문제: postData.map에서 빨간 밑줄 발생.
• 원인: postData의 타입을 명시적으로 설정하지 않아 발생.

=>제 화면에서는 빨간밑줄이 뜨는데 다른 분이 클론받아서 확인해본 결과, 안뜸..

 

7. 페이지 이동 시 사용자 세션 체크

• 문제: 세션이 없을 때 자동으로 로그인 페이지로 이동하지 않음.
• 해결 방법:
  • useEffect를 활용하여 사용자 세션 체크 후 없을 경우 로그인 페이지로 이동하도록 추가

useEffect(() => {
  const checkSession = async () => {
    const { data, error } = await supabase.auth.getSession()
    if (error || !data.session) {
      router.push('/auth/login')
    }
  }
  checkSession()
}, [router])