📖 TIL - 프로젝트 3일차: API 호출과 상태관리, 그리고 Git 협업의 교훈들

🤦‍♂️ 오늘의 시행착오

처음에는 당연히(?) Context API에서 모든 상태값을 관리하려고 했는데, 튜터님께서 "굳이...?"라고 하시는 바람에 팀원들과 고민하게 됐다. 한 페이지에서만 쓰는 건데 전역으로 관리할 필요가 있나? 라는 생각이 들더라.

💡 API 호출 어떻게 할까?

// 이렇게 따로 빼니까 깔끔하다!
export const fetchData = async (table) => {
  try {
    const { data } = await supabase.from(table).select("*");
    return data;
  } catch (error) {
    console.log("error", error);
  }
};

테이블명만 props로 받아서 재사용할 수 있게 만들었다. 처음에는 각 컴포넌트마다 API 호출 로직을 작성하려고 했는데, 팀원들과 상의 후 api 폴더를 따로 만들어서 관리하기로!

😅 Promise? async/await?

여기서 재미있는 실수가 있었다...

// 이렇게 했더니 Promise라고 뜨더라...
const newFeedsData = await fetchData("feeds");
setFeedsData(newFeedsData);

알고보니 async 함수로 감싸야 했다! Supabase는 비동기 처리가 필수라는 걸 배웠다. 결국 이렇게 해결:

useEffect(() => {
  async function fetchFeeds() {
    const newFeedsData = await fetchData("feeds");
    setFeedsData(newFeedsData);
  }
  fetchFeeds();
}, []);

🤔 모달은 어떻게 관리하지?

모달의 경우는 좀 고민이 됐다. 지금은 Feed 페이지에서만 쓰지만, 나중에 다른 곳에서도 쓸 수 있지 않을까? 결국 Context API로 가기로 결정:

const [isModalOpen, setIsModalOpen] = useState(false);
const toggleModal = () => setIsModalOpen(state => !state);

😱 추가로 발생한 Git 이슈!

팀원들과 작업하다가 예상치 못한 문제가 발생했다. dev 브랜치에서 pull을 받았는데, 공통 레이아웃 작업이 내 커밋 스테이징에 추가되는 문제가 발생한 거다!

해결책: stash 활용하기

튜터님이 추천해주신 stash가 정말 유용했다. 그냥 커밋하지 말고 임시보관 개념으로 접근하라고 하시더라.

# 현재 작업 임시저장
git stash save "작업중이던 내용"

# dev 브랜치에서 pull
git pull origin dev

# 임시저장했던 작업 다시 가져오기
git stash pop

Git 충돌 관련 꿀팁

conflict 관련 콘솔 메시지가 뜰 때는 이렇게 하라고 하셨다:

git config pull.rebase false

💭 오늘의 깨달음

• 모든 걸 전역으로 관리하는 게 능사는 아니다
• Supabase는 async/await가 짱친이다
• 재사용성을 고려한 코드 구조가 중요하다!
• stash는 커밋보다 유연한 임시저장소
• pull 받기 전에 현재 작업 상태 정리가 중요
• 팀 프로젝트에서는 git 전략이 정말 중요하다!

내일은 이 모달에 실제 기능을 붙여볼 예정. 벌써부터 머리가 아프다... 😂