WIL - Supabase 사용해서 개발자 스터디 커뮤니티웹 만들기

지난 한주는 프론트엔드 개발자들을 위한 자료 공유 커뮤니티 웹서비스를 기획하고 제작해보는 시간을 가졌다.

이번 프로젝트에서는 새롭게 사용해본 스택들이 많았다. 
완전히 새로 시도해보는 스택에는 Supabase, Zustand, Tailwind CSS이 있었다.

Problem & Solve

1. Supabase의 경우 아직 TypeScript도 익숙하지 않아 타입오류가 잦았다. → 이 과정에서 supabase가 지원하과 있는 Type generate를 사용하기로 하고 셋팅해 이후부터는 편리하게 작업할 수 있었다. 참고 블로그

2. 한글로 된 이미지는 storage에 저장되지 않는다. → 알아보니 Supabase는 storage에 저장되는 파일의 이름에 특수문자 사용이 불가하다고 한다. 우리는 uuid를 활용해 파일명을 랜덤하게 바꿔주어 해결하였다.

const { error: storageError, data } = await supabase.storage
.from("profileImgs")
.upload(profile_Images/${email}/${uuid()}, profileFile, {
cacheControl: "3600",
upsert: false
});
profileUrl = data?.path;

3. supabase가 어렵다 추천하지 않는다는 이야기를 들었다. 그런데 오히려 직관적인 UI와 친절한 가이드로 걱정했던것 보다는 어렵지 않게 사용할 수 있었다. 개인 프로젝트에도 supabase를 한번 더 사용해보면서 익혀나가봐야겠다.

4. Tailwind CSS의 경우 직관적으로 사용할 수 있는 점이 좋았다. 적은 타이핑으로 직관적으로 스타일을 입혀나갈 수 있었지만 아무래도 메인 코드가 지저분해진다는 단점이 있었다. 처음이라 작업 전에 컴포넌트화를 미리 해주지 못했고 그로 인해 마지막에는 스타일 수정이 오래걸리고 어떤 부분을 수정해야하는지 몰라 어려움이 있었다. config 파일을 활용해 각 ui 컴포넌트에 따른 속성값을 미리 지정해주고 스타일을 시작하면 확실히 코드 가독성이나 유지보수면에서 좋은 툴이라는 생각.