이번 주에는 드랍박스를 클론코딩하는 프로젝트를 진행했다.

이번 프로젝트에서 새로 배운 것들을 정리해보자면,

1. useDropzone:

   파일을 드래그 앤 드롭으로 업로드할 수 있는 섹션을 만든다.

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    multiple: true,
  });

이 부분에서 getRootProps, getInputProps는 ()를 붙여서 사용해야 하는데 그걸 또 빼먹어서 오류가 났다. 콜백으로 사용하는 함수와의 차이를 확실히 공부할 필요가 있어 보인다...

2. 스토리지에 데이터를 업로드하고 정보를 가져오기
   - upload, search, delete

  const results = await Promise.all(
    files.map((file) => {
      supabase.storage
        .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET)
        .upload(file.name, file, { upsert: true });
    })
  );

스토리지에 파일을 등록하고 삭제하거나 조회할 수 있는 기능을 구현했다. 혼자서 구현할 때는 꽤 복잡하게 했던 거 같은데 엄청 편리하게 구현한 것 같다.

따로 진행 중인 팀 프로젝트에서 데이터 업로드에 고생을 하고 있는데, 잘 배워놓으면 더 편하게 업로드를 구현할 수 있을 거 같다. supabase를 제대로 배워봐야겠다는 생각이 든다.

과제: 최종 수정 시간 표시하기

image에 포함된 updated_at 속성을 파일 제목 아래에 작은 글씨로 표시되게 만들었다.

먼저 개발자 도구와 console.log(image)로 image 객체에 포함된 정보들을 확인해주고,

수정된 날짜를 나타내는 updated_at을 찾아 파일명 아래에 포함시켰다.

      {/* updated_at */}
      <div className="text-xs">수정된 시간: {formattedDate}</div>

날짜를 좀 더 보기 쉽게 나타내기 위해서 포맷도 지정해 줬다.

  const formattedDate = new Date(image.updated_at).toLocaleString("ko-KR", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: true,
  });

후기

기본적인 CRUD 기능이기 때문에 어디에서나 쓰인다는 걸 팀 프로젝트를 진행하면서 느끼고 있다. 꼭 필요한 기능이니 워밍업 클럽 완주 이후에도 다시 공부해야겠다.

클론 코딩을 하면서도 놓치는 부분이 많다는 걸 또다시 느끼고 있다. 노션과 깃허브 코드를 다시 살펴보면서 제대로 정리해 볼 생각이다.