나는 이렇게 논다/월간 메이커스 4

Supabase로 SvelteKit에 GitHub 로그인을 구현해보자

SvelteKit에서 GitHub로그인을 어떻게 구현할 수 있을까요? 이번 글에서는 SvelteKit에서 Supabase를 이용해 간단히 Github로그인을 구현해 보도록 하겠습니다. *SvelteKit: Svelte를 기반으로 한 풀스택 웹 프레임워크 Supabase 란? Supabase 는 Firebase의 대안으로 떠오르는 오픈소스 백엔드 서비스입니다. Supabase의 주요 기능으로는 PostgreSQL 기반의 데이터베이스, 소셜 인증 기능, 실시간 구독과 파일을 저장할 수 있는 스토리지 등이 있습니다. 저는 Supabase 의 소셜 인증 기능을 사용해 Github 로그인으로 구현해 보겠습니다. Supabase 프로젝트 생성 먼저 Supabase 홈페이지에 접속하여 프로젝트를 생성해 줍니다. 프로..

003. Supabase로 이미지 저장

학습 목표 Supabase Storage 를 이용해 이미지를 저장할 수 있는가? 저장한 데이터들을 다시 불러올 수 있는가? 측정요소 Supabase Storage 에 이미지를 저장하면 성공이다. ✅ 저장 후 공개 URL 을 받아와 DB에 저장하면 성공이다. ✅ 레퍼런스 Storage Quickstart supabase storage 사진 올리기 만들기 feat: 이미지 storage 저장로직 구현 배우고 느낀 것 이미지를 저장하고 URL을 생성하는 것을 처음 구현해보았는데 생각한대로 동작하니 재밌었다. bind:value와 bind:this라는 svelte 바인딩 명령에 대해서 알게되었다. HTML의 요소는 사용자가 파일을 선택할 수 있게 하는 DOM 요소이기 때문에 Svelte에서 bind:this를 ..

002. Supabase로 데이터 저장 및 페이지 이동

학습 목표 데이터를 Supabase로 저장할 수 있을까? 자장 후 다시 메인 페이지로 돌아갈 수 있을까? 측정요소 폼 데이터가 Supabase에 저장되면 성공이다. 저장 후 메인 페이지로 이동하면 성공이다. 레퍼런스 https://supabase.com/docs/reference/javascript/insert https://kit.svelte.dev/docs/modules#$app-navigation-goto 만들기 https://github.com/Daco2020/monthly-makers/commit/4b7791fc57b7011e128782b50e29270c3107a2d5 배우고 느낀 것 데이터 전송이 너무 빠르다.. 일부러 로딩 시간을 주면 프로젝트 등록하는 느낌을 유저에게 줄 수 있을 듯 등록 ..

001. Supabase 연동 및 Github 로그인

학습 목표 - 월간 메이커스를 수파베이스와 연동할 수 있을까 - 깃헙 로그인을 구현할 수 있을까? 측정요소 - 스벨트킷에 수파베이스를 연동하여 데이터를 주고받는데 까지 동작하면 성공이다. - 깃헙 로그인, 로그아웃을 할 수 있다면 성공이다. 레퍼런스 - https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit - https://youtu.be/1tsUB58KX2s 만들기 - https://github.com/Daco2020/monthly-makers/commit/a193f48e51dd24bf3912f49133a799daba82bbcb 학습한 것 - supabase 연동과 로그인 자체는 어렵지 않았다. (카카오 로그인도 있더라) - 깃헙..