[NewsFeed-Day 2] supabase 감 잡기

2025.02.13 (목) Works

 

1. supabase 특강

2. git conflict & issue 컨퍼런스

3. Prettier 파일 관리

4. Home 페이지 UI 구현

5. supabase에서 데이터 가져오기

 

 

Home 페이지 UI 구현

 

간단히 만들어 본 Home UI

index.css에 body 스타일을 유지 중이라 헤더가 짧게 나온다.

지금은 div로 주었지만 추후에 프로필 사진과 post 사진으로 대체할 예정이다.

 

 

Supabase

 

DOM을 통해 화면 컴포넌트에 접근하고,

React를 통해 상태 관리를 하고,

Redux, Context를 통해 props를 전역적으로 관리하고,

RRD를 통해 페이지를 이동하고,

RTK를 통해 store를 생성하여 간편하게 데이터를 관리하였다.

 

이번 프로젝트에서는 이전 내용들과 함께 supabase를 통한 user 정보 관리가 주된 기능이다.

 

 

📍내가 이해한 supabase

 

간략히 적어보자면 아래와 같다.

사용자가 등록한 정보(회원가입)와 입력한 정보(게시글, 사진 등)을 supabase라는 DB에 저장한다.
저장된 데이터는 key : value pair로 엑셀과 같은 표에 정리된다.
supabase 측에서 만든 API가 있는데 그것들을 사용해서 데이터를 관리할 수 있다.
사용자 정보를 입력하거나 가져올 수 있고,
회원가입/로그인 여부에 따라 사용 권한을 준다.(권한과 관련된 자세한 내용은 심화주차에서)

 

 

supabase에는 다양한 API가 있으며 그 내용을 공식 문서에서 다루고 있다.

https://supabase.com/dashboard/project/btdmubmenrbrjydmwwcx/api?page=users

API | Supabase

 

 

📍supabase 데이터 가져오기

그 중 오늘은 임의로 입력한 데이터를 가져와서 화면에 나타내보았다.

데이터를 가져오는 로직은 다음과 같다.

// App.jsx
import { createClient } from "@supabase/supabase-js";
import { useEffect } from "react";

// 인자1 : 프로젝트 주소
// 인자2 : 익명 키
const supabase = createClient(
  "https://<project>.supabase.co",
  "<your-anon-key>"
);

const App = () => {
  useEffect(() => {
    const getTodos = async () => {
      try {
        const { data, error } = await supabase.from("todos").select("*");
        if (error) throw error;
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    };
    getTodos();
  }, []);

  return <div>App</div>;
};

export default App;

useEffect()를 통해 최초 렌더링 시, 원하는 테이블의 데이터를 가져온다.

 

프로젝트 주소와 익명 키는 .env 파일에서 따로 선언한다.

// .env
VITE_APP_SUPABASE_URL = "https://<project>.supabase.co"
VITE_APP_SUPABASE_ANON_KEY = "<your-anon-key>"

 

그리고 client.js 파일에서 두 변수값으로 createClient() 를 통해 supabase와 연동이 된다.

// client.js
import { createClient } from "@supabase/supabase-js";

const SUPABASE_PROJECT_URL = import.meta.env.VITE_APP_SUPABASE_URL;
const SUPABASE_ANON_KEY = import.meta.env.VITE_APP_SUPABASE_ANON_KEY;

const supabase = createClient(SUPABASE_PROJECT_URL, SUPABASE_ANON_KEY);

export default supabase;

 

 

내가 구현할 Home 페이지의 메인 게시글 카드에는

users, posts, comments 세 테이블의 값이 필요하다.

user 정보(프로필 사진, 닉네임, MBTI) post 사진 게시물 댓글

 

 

아래 방식들은 잘 된 건지 확신이 들지 않지만 우선 출력은 된다..!

추후 변동사항이 있을 듯 하지만 우선 기록해두겠다.

 

useEffect 세 개를 써야하나..? 싶었지만 팀원 분의 조언으로 Promise.all 을 사용했다.

const Home = () => {
  const [posts, setPosts] = useState([]);
  const [users, setUsers] = useState([]);
  const [comments, setComments] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [
          { data: postsData, error: postsError },
          { data: usersData, error: usersError },
          { data: commentsData, error: commentsError },
        ] = await Promise.all([
          supabase.from("posts").select("*"),
          supabase.from("users").select("*"),
          supabase.from("comments").select("*"),
        ]);

        if (postsError) throw postsError;
        if (usersError) throw usersError;
        if (commentsError) throw commentsError;

        setPosts(postsData);
        setUsers(usersData);
        setComments(commentsData);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  supabase.from("posts").insert({ posts });
  supabase.from("users").insert({ users });
  supabase.from("comments").insert({ comments });

  console.log("posts", posts);
  console.log("users", users);
  console.log("comments", comments);

return (
    <StHomeMain>
      <StHeader>
        <StSearchInput placeholder="검색창" />
        <h2>FootPrint</h2>
        <Link to={"/login"}>
          <StLoginBtn>로그인/회원가입</StLoginBtn>
        </Link>
      </StHeader>
      <StCategory>
        <div>전체</div>
        <div>국내</div>
        <div>해외</div>
      </StCategory>
      {/* postCard */}
        <StHomeCard>
          <StCardTop>
            <StProfileImg />
            {users.map(user => (
              <StCardTextWrap key={user.id}>
                <StNickName>{user.nick_name}</StNickName>
                <StMbti>{user.mbti}</StMbti>
              </StCardTextWrap>
            ))}
          </StCardTop>
          <StPostImg />
          <StIcons>
            <img src="../assets/icon_comment.png" alt="comment img" />
            <img src="../assets/icon_heart_fill.png" alt="heart img" />
          </StIcons>
          {comments.map(e => (
            <StComents key={e.id}>{e.text}</StComents>
          ))}
        </StHomeCard>;
    </StHomeMain>
  );
};

 

 

🚨이렇게 작성하게 되면 저장된 user의 정보가 한 카드 내에 일렬로 뜨게 된다.

 

가장 헷갈리는 것은 각 테이블에서 사용하는 id들이다.

users에는 사용자 로그인 시 id, auth에서 지정된 uuid

posts에는 uuid, post의 id

comments에는 uuid, post의 id, comment의 id

가 주어진다.

 

각 id의 역할은 알겠지만 어떻게 연결되어있는지, 하나의 카드에서 출력하기 위한 로직은 무엇일지 헷갈린다.

또한 팀장님의 계정으로 supabase 하나를 사용하고 있기 때문에 유동적으로 값을 변동하기가 어려웠다.

따라서 내일은 팀원 분께서 '트리거'를 작성해주셔서 팀원 각자의 계정에서 DB 저장 정보를 확인할 수 있다고 한다!

 

내일은 트리거에 대한 내용을 익히고, supabase를 직접 다뤄보며 저장 정보대로 카드를 찍어보려고 한다.

 

 

 

 

Tomorrow Task

 

- supabase API 익히기

- 트리거 익히기

- DB 정보 가져오기 (각 테이블의 id 구별하기)