Sveltekit + Vercel + Supabase 삼위일체 사용 후기

https://supabase.com/blog/supabase-beta-june-2021

 

sveltekit + vercel + supabase 사용 후기

평소에 토이 프로젝트를 만드는 것을 좋아하기 때문에, 가볍고 쉽게 배포할 수 있는 방법 없을까 하며 고민을 많이 했다.

그러다 이번에 sveltekit, vercel, supabase라는 것을 알게 되고 간단한 토이 프로젝트를 이 서비스에 적용해 보았다.

삼대장을 만나게 된 계기

삼대장! Sveltekit + Vercel + Supabase

이번에 만들어본 프로젝트는 예전에 만들었던 회사 근처 식당 추천기이다. 그냥 간단히 회사 근처의 식당 중 어떤 것을 먹을까 고민하다, 대신 골라주는 “메뉴 추천기”가 있으면 좋겠다는 생각을 하면서 만들게 되었었다.

 

24년 03월 21일

아래 메뉴추천기 사이트는 현재 작동하지 않습니다. ㅎㅎ

그냥 그런게 있었다. 라고 생각해주세요.

 

https://flow-merecom.vercel.app/

flow 메뉴 추천기

 

처음 메뉴추천기에 사용했던 희한한 조합

기존 메뉴 추천기는 vanilla js, firebase hosting, notion db를 이용하여 만들었다.

chatGPT를 이용해 간단히 vanilla js로 만들었고, 당시 사용량이 적으면 무료로 호스팅 해주는 서비스인 firebase를 사용하여 배포했다.

 

디비미아

그런데 문제는 db였다. 메뉴 추천기에 메뉴 데이터는 필수이다.

메뉴 데이터를 json으로 하드코딩하거나 json 파일로 저장해서 배포해도 되지만, 중간에 메뉴가 수정되면 다시 배포해야 하는 불편함이 이 있다.

최근에 notion api를 이용하여 notion db를 POST로 호출해 데이터를 받아올 수 있는 법을 알게 되었다.

이 방법을 쓰면 토이 프로젝트는 notion db로 쓰면 좋겠다는 생각을 했다.

그래서 실제로 크롬 익스텐션 토이 프로젝트는 notion db를 사용해서 데이터를 관리하고 있다.

 

하지만 실제 서버에 배포한 토이 프로젝트인 경우, CORS 문제가 생긴다.

크롬 익스텐션은 CORS를 해결해 주는 config가 존재하기 때문에 문제가 없었던 것이다.

기존 메뉴 추천기는 이 문제를 해결하기 위해 heroku를 이용하여 프록시서버를 개설했다.

속도는 느리지만 프록시 서버를 이용하면 cors 문제를 해결할 수 있다.

그런데 이렇게 프록시 서버를 사용하면 2개의 단점이 생긴다. 첫 번째는 과금이 생긴다. 실제로 한 15000원 정도 뜯겼고, 헤로쿠가 무료인 줄 알고 있었는데 백엔드 서버를 돌리면 과금이 발생할 수 있다. 두 번째는 서버 region이 유럽과 미국밖에 없기 때문에 엄청나게 느리다.

 

위와 같은 이유로 결국 notion db를 사용하는 방법을 과감히 포기했다.

그렇다면 위의 서비스들을 대체할 수 있는 것이 없을까?

방랑하며 찾아다니던 도중, 차츰 vercel, supabase, sveltekit에 대해 알게 되었다.

 

Sveltekit

https://kit.svelte.dev/

SvelteKit • Web development, streamlined

svelte에서 만든 풀스택 프레임워크이다.

그동안 firebase 호스팅 서비스에 배포를 해봤는데, 파이어베이스에서 백엔드 로직을 넣는 즉시 과금이 발생했다. 그래서 그동안 vanilla js로만 이용해서 api 호출 정도만 사용하여 토이 프로젝트를 개발했다.

하지만 vanilla js만 사용하여 서버리스 웹 앱을 개발하는 것보다 sveltekit을 이용해 웹 앱을 만들면 확실한 장점이 있었다.

서버개발이 가능했다.

js뿐만 아니라 react, vue를 사용하면 클라이언트 서버만 개발이 가능했고, 서버 개발을 위해 nodejs express를 사용하는 방식으로 다른 api 서버를 만들어줘야 했었다.

한때 예전에 만들었던 “운쿠” 프로젝트가 그런 식으로 만들어졌었다.

하지만 sveltekit을 사용하면서 서버 개발이 가능하고, 클라이언트 서버와 api 서버를 다 같이 만들 수 있다. 규모가 커지면 나누는 게 용이할 수 있다고 생각하지만 프로토타입이나 토이 프로젝트 개발에 정말 최적이라고 생각 들었다.

라우팅이 용이하다.

vanilla js만 사용하면 라우팅에 한정적이다. 그래서 그동안 SPA로만 개발했어야 했는데, 이번에 sveltekit을 사용하면서 다양한 페이지를 만들고 쉽고 자유로운 라우팅이 좋았다.

SSR을 할 수 있으면서, svelte를 사용한 클라이언트 사이드 랜더링(CSR)에도 강하다.

아래에서 설명하겠지만, supabase를 이용해 db에 있는 데이터를 가지고 오기 위해서 클라이언트에서 보이면 안 될 데이터 호출, 가공에 대한 로직을 숨겨야 한다. 그러나 vanilla js만 사용하면 이러한 로직을 숨길 수 없기 때문에 보안의 위험이 있을 수 있다.

vercel

https://vercel.com/

Vercel: Develop. Preview. Ship. For the best frontend teams

vercel은 내가 만든 웹 애플리케이션을 쉽게 배포할 수 있도록 서비스되고 있는 PaaS(Platform as a Service)이다.

vercel을 만나기전에 firebase와 heroku를 만났는데, 둘 다 아쉬움이 많았다. firebase는 일단 웹 호스팅만 무료이고, 서버 호스팅은 무료로 들어가며 AWS lamda와 비슷한 functions로만 백엔드 지원이 가능했기 때문에 아쉬웠다. heroku는 나름 가격도 싸고 무료로도 어느 정도 사용할 수 있지만, 서버 region이 미국과 유럽밖에 없기 때문에 속도가 너무 느렸다.

그러다 vercel을 만나면서 앞서 말한 두 서비스보다 빠르고, 배포도 쉽고, 가격도 저렴했기 때문에 vercel의 매력에 빠지면서 애용하게 되었다.

무료!

 

가장 중요했다. 물론 firebase도 무료지만, 서버를 배포하게되면 과금을 하게 된다. 그리고 기존에 notion db로부터 데이터를 가져오기 위해 헤로쿠로 프록시 서버를 만들었었다. 그래서 이 점심 추천기를 쓰기 위해 헤로쿠 프록시 서버도 배포했는데, 이 것도 마찬가지로 서버 배포가 이루어져 과금이 되었다.

그러나 vercel은 대부분 무료이다.

다른 디테일한 사용량에 따라 유무료가 아니라 그냥 무료이다.

다양한 프레임워크를 지원한다.

주로 js 프레임워크에 최적화 되어 있고, 이 프레임워크에 대한 템플릿과 개발 및 배포하는 방법에 대한 문서들이 아주 잘 작성되어 있다.

아마 최근 프론트 SSR 프레임워크로 Next.js가 인기가 많은데, Next.js는 Vercel에서 만들었기 때문에, 그만큼 잘 지원해주고 그래서 요즘 vercel의 인기가 엄청 많은 것 같다.

문서가 잘 만들어져 있다.

https://vercel.com/docs

Vercel Documentation

아직 vercel의 대부분 기능을 사용해본것은 아니지만, 각각의 프레임워크와 인프라, 보안, API, 모니터링, 스토리지, 워크플로우 등 문서가 준비되어 있다. 확인해보고 필요한 기능을 사용할 수 있다.

supabase

https://supabase.com/

The Open Source Firebase Alternative | Supabase

무료로 사용할 수 있는 DB 서비스를 찾으러 다니다가 처음에 firebase를 알게되고, 그 후 mongoDB를 알게 되면서 noSQL을 체험하다 supabase를 만났다.

이전에 firebase나 mongoDB처럼 noSQL방식이 아닌 RDBMS를 찾던 중 supabase를 알게 되어 너무 좋았다.

인터넷에서는 supabase를 firebase의 오픈소스버전이라고 이야기하지만, 직접 겪은 이미지는 조금 다른 느낌이었다. firebase보다 사용하기 쉽고 RDBMS를 사용하며, 문서도 아주 훌륭했다.

한번 supabase를 경험하면서 좋았던 기억을 나열해보고자 한다.

postgreSQL을 사용한다.

supabase는 postgreSQL을 사용합니다. 이미 회사에서 postgreSQL을 사용하기 때문에, 아주 친숙한 환경이었다.

평소에 사용하는 DB툴과 연결할 수 있도록 환경도 마련해두었고, 웹에서 스키마나 쿼리를 입력하고 DB 업무를 할 수 있도록 UI/UX도 친숙했다. 그래서 supabase로 만든 프로젝트의 DB를 언제 어디서나 사용할 수 있다는 게 큰 매력으로 다가왔다.

supabase DB를 접속하기 위해 @supabase/supabase-js를 사용했는데, 이 라이브러리도 사용하기 쉽고 DX가 좋았다. 차후 이 라이브러리 소개나 사용하는 방법에 대해 포스팅하면 좋을 것 같다.

프리티어에서 왠만한 기능을 사용할 수 있다.

supabase의 프리티어는 아래만큼의 리소스를 사용할 수 있습니다. 토이프로젝트로 사용해 보기 딱 좋은 양의 리소스이다.

• 소셜 OAuth 공급자
• 최대 500MB 데이터베이스 및 1GB 파일 저장
• 최대 2GB 대역폭
• 최대 50MB 파일 업로드
• 월 활성 사용자 50,000명
• 최대 500K Edge functions 호출
• 200개의 동시 실시간 연결
• 200만 실시간 메시지
• 1일 로그 보존

문서가 잘 만들어져 있다.

https://supabase.com/docs

Supabase Docs

supabase가 정말 좋았던 이유는, 단순하고 다양한 템플릿을 제공하는 것이었다. 많은 프레임워크에서 사용하는 방법에 대한 예시가 거의 다 있었다.

데이터베이스뿐만 아니라, Auth, Edge Function, Realtime, Storage, AI 등등 다양한 서비스를 제공하고 이에 맞는 문서가 아주 잘 되어 있어서 나중에 한 번씩 사용해 보면 좋겠다고 생각이 들었다.

이렇게 친절한 문서가 나름 사용자를 모아주는 큰 역할을 한다는걸 새삼 느낄 수 있었다.

3가지의 기술 스택은 서로 스벨트를 사용하기 아주 좋은 환경을 구성하고 있다. vercel과 supabase 둘 다 sveltekit을 사용하기 쉽도록 프레임워크 맞춤형 문서가 아주 잘 작성되어 있다. 그래서 블로그 글이나 강의를 보지 않고도 문서를 통해 대부분 프로젝트를 구현할 수 있을 것 같았다.

 

 

 

앞으로 이 조합을 사용하여 사이드 프로젝트를 간간히 해볼 생각이다.