인프런 워밍업 클럽 3기 풀스택 - 1주차 발자국

2025-03-09T11:16:30.627Z

찬우 이

1주차 학습 내용

Firebase vs Supabase

Firebase 특징
- BaaS: 서버 없이도 빠르게 앱 출시 가능
- 커뮤니티, 문서화 잘되어 있음, 단순한 NoSQL 기반으로 돌아감
- Supabse보다 비쌈, 오픈소스 아님
- NoSQL기반이라 복잡한 쿼리 불가하고, 웹 개발엔 그닥,,
Supabase 특징
- 오픈소스 구성, PostgreSQL 기반
- 다양한 연동 방식을 지원함
- 커뮤니티, 문서화 부족
- 비교적 적은 기능

Server Action

서버에서 실행되는 비동기 함수
API 호출 없이 서버에서 바로 데이터 변환

메타데이터

SEO를 정의하는 방식
Static과 Dynamic 방식이 있는데 추 후 더 배울 예정

Tailwindcss

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-lg">
  테일윈드 CSS 예제
</div>

유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크로, 미리 정의된 클래스를 조합하여 빠르게 스타일을 적용할 수 있도록 도와준다.
CSS를 직접 작성할 필요 없이 클래스만 조합하여 스타일링 가능

Recoil

React에서 상태 관리를 쉽게 할 수 있도록 도와주는 상태 관리 라이브러리
Redux 같은 라이브러리보다 가볍고 사용법이 간단함
전역 상태뿐만 아니라 컴포넌트 간의 상태 공유를 효율적으로 관리할 수 있음
비동기 상태 관리도 지원하여 서버 데이터를 다룰 때도 유용함

React Query

React Query는 비동기 데이터(fetching, caching, synchronization)를 효율적으로 관리하는 라이브러리다.
서버 상태 관리에 특화되어 있으며, API 호출 후 데이터를 캐싱하고 자동으로 최신 상태를 유지할 수 있도록 도와준다.
React에서 API 요청을 효율적으로 관리하려면 필수적인 라이브러리다.

1주차 미션

1주차 미션에서는 강의에서 배운 TODO 앱을 기반으로,
새로 생성한 TODO는 생성된 시간(created_at)을 표시하고,
수정한 TODO는 수정된 시간(updated_at)을 즉시 UI에 반영하도록 구현하는 것이 목표였다.

// ui.tsx

  const createTodoMutation = useMutation({
    mutationFn: () =>
      createTodo({
        title: "New TODO",
        completed: false,
        created_at: new Date().toISOString(),
      }),
    onSuccess: () => {
      todosQuery.refetch();
    },
  });

✅ useMutation을 통해 새로운 TODO를 생성할 때, created_at을 추가하여 서버에 요청하도록 구현했다.
✅ 이를 통해 TODO가 생성된 시간을 함께 저장할 수 있도록 설정했다.

// todo.tsx

  const [updatedTime, setUpdatedTime] = useState(todo.updated_at);

  const updateTodoMutation = useMutation({
    mutationFn: () =>
      updateTodo({
        id: todo.id,
        title,
        completed,
        updated_at: updatedTime,
      }),
    onSuccess: () => {
      setIsEditing(false);
      queryClient.invalidateQueries({
        queryKey: ["todos"],
      });
    },
  });

----------------------

        <>
          <p className={`flex-1 ${completed && "line-through"}`}>{title}</p>
          <p>
            {new Date(todo.updated_at ?? todo.created_at).toLocaleString(
              "ko-KR",
              {
                year: "numeric",
                month: "2-digit",
                day: "2-digit",
                hour: "numeric",
                minute: "2-digit",
                hour12: true,
              }
            )}
          </p>
        </>

✅ 수정할 때마다 updated_at을 추가하여 최신화된 시간을 서버로 전송하도록 설정했다.

✅ 수정된 TODO(updated_at)가 있다면 수정 시간을, 그렇지 않다면 생성 시간(created_at)을 표시하도록 구현했다.
✅ 기본적으로 ?? 연산자를 사용해 updated_at이 존재하는 경우 이를 우선적으로 표시하도록 처리했다.
✅ 시간 포맷이 "2025.03.09 오후 7:34" 형식으로 나타나도록 toLocaleString()을 활용해 변환했다.

1주차 회고

내가 이 강의를 수강한 이유는 배우고 싶었던 Recoil, React Query, Supabase를 익히기 위해서였다.
하지만 생각보다 많이 어려웠다. 역시 한 번 본다고 해서 쉽게 익힐 수 있는 건 아니라고 느꼈다.
섹션 2까지는 본격적인 실습을 하기 전에 준비 단계라고 생각했다.
그리고 섹션 3부터는 본격적으로 TODO 프로젝트를 만들면서 학습을 진행했다.
Supabase를 사용하면서 백엔드의 기본적인 동작 방식을 조금이나마 이해할 수 있었다.
신기하기도 했지만, 한편으로는 어렵기도 했다.
미션 자체는 그렇게 어렵다고 느껴지지는 않았다.
결국 등록 시간과 수정 시간을 표현하는 것이 핵심이었기 때문이다.
하지만 강의에서 React Query나 Supabase를 다루는 부분은 이해가 잘되지 않아 여러 번 반복해서 학습해야 할 것 같다.
어려워서 살짝 우울하기도 하지만...
결국 어려운 만큼 성장할 수 있는 부분이 많다는 뜻이니까! 😂🔥

풀스택 풀스택 미션 인프런워밍업클럽 supabase next.js

답변 0