24.09.25

• 모달이 많으므로 커스텀훅으로 만들기
• userDataFetching 트러블슈팅 내용 1차 작성

---

supabase 테이블에서 데이터 가져오기

 const fetchNickname = async () => {
    const { data, error } = await supabase
    .from('users') 
    .select('nickname')
    .eq('id', userId)
    .single();
    if (error) {
      throw new Error(error.message);
    }
    return data?.nickname;
  };

➡️ 'users' 테이블에서 ➡️ 'nickname' 컬럼을 선택하고
➡️ 'id' 컬럼이 userId와 같은 데이터를 가져와서 ➡️ 하나의 레코드 반환

여기서 내가 아무 생각 없이 써오다가 궁금해진 건 eq의 정확한 의미.

eq는 Supabase 쿼리에서 특정 조건을 설정하고,
이 쿼리 구문은 users 테이블에서
id 컬럼이 userId와 같은 데이터를 가져오는 조건을 의미한다.

eq('id', userId):
eq는 equal(같음)이라는 의미의 함수로,
Supabase에서 SQL의 WHERE 조건을 만드는 함수다.

'id'는 테이블의 특정 컬럼을 나타내고,
여기서 id는 users 테이블의 기본 키(유저 ID).

userId는 함수 인자로 전달된 값으로, 현재 로그인된 유저의 ID.

즉, users 테이블에서 id가 userId와 같은 레코드를 찾으라는 뜻!

---

아니 지금 짜증 나는 이유가,

1. 아는 지식 범위 내에서 혹은 검색으로 찾을 수 있는 문법 사용해서
   데이터 페칭, 로딩 관리, 에러 관리, 상태 관리, 변경까지 하려고 보니
   고려할 사항이 많다.

• useQuery의 적절한 사용
• useContext vs 컴포넌트 트리 구조 (우선은 후자 선택)
• 전체정보 다 렌더링하는 컴포넌트를 위한 페칭 훅
• 닉네임만 렌더링하는 컴포넌트를 위한 개별 정보 페칭 훅
• 레벨네임만 렌더링하는 컴포넌트를 위한 개별 정보 페칭 훅
  • 얘네들을 다 한 컴포넌트에 쓰나?
  • 따로 쓰면 어떻게 분리할까?
  • 그렇다면 children을 감싸는 부분은 어떻게 수정하나?

2. levelUp.tsx나 AttendanceCheck.tsx 같은 컴포넌트는?
3. 결국 기술적 고민 중인 것 같다.
4. 아니면 지식이 모자란 상태를 고민이라고 착각하고 있는 것 같다.
5. 학습량과 근거의 부실이 온몸 온마음으로 느껴질 정도인데
   의사결정을 하려니 되겠니?