이번주에 배운 내용은 Storage를 통해 Image를 CRUD 하는 기능이다. 이 강의를 들은 다음 추후 Next.js + Supabase 스택으로 블로그를 만들 생각이었어서 그 때 Supabase Storage를 사용할거라 좀 더 유심히 들었다.

이번 Dropbox 프로젝트에서는 지난 TodoList 프로젝트를 했을 때 개인적으로 Meterial UI Tailwind를 사용할 때 마음에 들지 않았던 부분들이 있어서 한번 써보고 싶기도 했던 Shadcn/ui를 통해 css를 구현해봤다.

수강 내용

Section 4. Dropbox 클론코딩

이번 섹션에서 배운 내용들은 다음과 같다.

1. Storage 설정 (Bucket 생성 및 Policy 설정)

2. 파일 업로드, 검색, 수정, 삭제 기능

3. 드래그 앤 드롭을 통한 파일 업로드 기능 추가

주로 이제 스토리지에 어떻게 접근해 파일들을 제어할 것인지가 핵심 내용이었다.

export async function uploadFile(formData: FormData) {
  const supabase = await createServerSupabaseClient();
  const file = formData.get("file") as File;

  const { data, error } = await supabase.storage
	.from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!)
	.upload(file.name, file, { upsert: true });

  handleError(error);
  return data;
}

예를들어 다음과 같은 코드는 파일을 업로드할 때 사용하는 코드이다. upsert를 통해 insert + update 기능으로 같은 이름이 있다면 자동으로 수정해주는 기능이 있다는 것도 처음 알게 된 사실이다.

프로젝트에서 한가지 아쉬운 점이 있었다면 파일을 검색할 때 예를들어 A 를 검색했다면 A 로 시작하는 파일 이름만 검색된다는 점이었다. 따라서 이 부분을 개인적으로 한번 수정해보기도 했다.

export async function searchFiles(keyword: string = "") {
  const supabase = await createServerSupabaseClient();

  const { data, error } = await supabase.storage
	.from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!)
	.list(); // 전체 파일 목록 가져오기
	
  handleError(error);
  return data ? data.filter((file) => file.name.includes(keyword)) : [];

}

다음과 같이 keyword를 받아오면 supabase storage의 전체 파일 리스트들을 가져오고, 그 안에서 filter을 통해 keyword가 포함된 데이터들만 표시되도록 구현해봤다. 이렇게 하면 검색 키워드가 포함된 파일 이름들은 모두 나타나게 된다.

드래그 앤 드랍 기능도 구현했는데 이는 react-dropzone 라이브러리를 사용했다.

const onDrop = useCallback((acceptedFiles: File[]) => {
// Do something with the files
}, []);

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

npm에 적혀있는 공식 사용법인데, 기존에 사용했던 form을 삭제하고 div로 바꾼 다음 div와 input에 getRootProps getInputProps를 넣고 각각에 적절한 로직들을 넣어주면 드래그 앤 드랍을 통한 파일 업로드 기능도 정상적으로 이루어진다.

미션

미션은 마지막으로 업데이트 된 날짜를 이미지 카드에 표시해주는 내용이었다. supabase에서 이미지 리스트들을 불러오면 각각의 이미지들은 다음과 같은 구조를 띈다.

따라서 lastModified 나 updated_at을 작성해주면 된다. (둘이 무슨 차이가 있는지 잘 모르겠다.....) 날짜 포맷은 지난 Todolist때 사용했던 것 그대로 사용했다. :)

결과 화면은 다음과 같다.

마무리

파일 업로드를 Supabase에 어떤 방식으로 해야할 지 알게 된 시간이었다. 그리고 지난번 기초를 잘 잡아두니 (초기 세팅 등) 별다른 불편함 없이 프로젝트를 새로 시작할 수 있어서 역시 초기 세팅이 중요하다 생각됬다. 또한 강의만 따라 듣는 것이 아닌 부족한 점을 개선하고 내 방식을 추가해서 작업했다는 점도 고무적이었다.

다음 프로젝트는 Netflix 프로젝트인데 사실 넷플릭스 프로젝트는.. 다른 강의에서도 몇번 해봤던 내용이지만 특히 그 중 기대하는 점은 SEO에 관한 내용이 있다는 것이었다. Next.js를 사용하는 큰 이유 중 하나가 바로 SEO 관련인데 이 부분에 대해 어떤 내용일지가 궁금하다. 예를 들어 Next.js는 자체적으로 sitemap이나 robots.txt 기능을 제공한다는 점과 강의에서도 말씀해주셧든 page.tsx가 서버 컴포넌트여야 하는 이유 등 어떻게하면 Next.js만이 가지는 장점을 최대한 효율적으로 활용하면서 프로젝트를 만들 수 있을지 기대가 된다.