Supabase, Next ํ ์คํ ์์ํ๊ธฐ (feat. ์ํ๋ฒ ์ด์ค OAuth, nextjs 14)
Firebase์ SQL๋ฒ์ ! Supabase๋ฅผ ํตํด Next.js ํ ์คํ ๊ธฐ์ด๋ฅผ ๋ง์คํฐ ํ ์ ์์ด์.!
์๊ฐ์ 451๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ํด๊ฒฐ
vsCode ๋์ ์ปค์๋ฅผ ์ฌ์ฉ
์ปค์๋ฅผ ์ฌ์ฉํด๋ ํ๋ฌ๊ทธ์ธ ๋ชจ๋ ๋์ผํ๊ฒ ์ฌ์ฉ ๊ฐ๋ฅํ์ง์?
reactํด๋ก ์ฝ๋ฉnext.jssupabaseae0505
ใป
3๋ฌ ์
0
55
2
- ํด๊ฒฐ
mac ํฐ๋ฏธ๋ ์ค์ ์ด ๊ถ๊ธํฉ๋๋ค
์ฌ์ฉํ์๋ ํฐ๋ฏธ๋์ด๋, ํ ๋ง, ํ๋ฌ๊ทธ์ธ ์ด๋ค๊ฒ์ ์ฌ์ฉํ์๋์ง ๊ถ๊ธํฉ๋๋ค
reactํด๋ก ์ฝ๋ฉnext.jssupabaseae0505
ใป
3๋ฌ ์
0
50
1
- ํด๊ฒฐ
DBeaver์ supabase connection
host, port, username, password ๋ค ์ ๋๋ก ์ ์๋๋ฐ, test connection์ ํ๋ ค๊ณ ํ๋ฉด"no route to host"๋ผ๊ณ ๋น๋๋ค.<p style="text-align: l
reactํด๋ก ์ฝ๋ฉnext.jssupabaseํ์ด
ใป
4๋ฌ ์
0
203
2
- ํด๊ฒฐ
๊ฐ์ํ๊ฒฝ ๊ฐ์๊ฑด ์๋์?
์๋ ํ์ธ์๋ฆฌ์กํธ๋ NextJS๋ ์ต์ํ์ง ์์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.ํ์ด์ฌ์ ์ธ๋๋ ๊ฐ์ํ๊ฒฝ์ ๋ง๋ค์ด์ ํ๋ก์ ํธ
reactํด๋ก ์ฝ๋ฉnext.jssupabaseํ์ง์ง
ใป
5๋ฌ ์
0
69
3
- ํด๊ฒฐ
serverComponent=false์ผ ๋ ์ฟ ํค ์ธํ ์ ํ๋ ์ด์ ?
์๋ ํ์ธ์! supabase.ts ํ์ผ์์ createServerSideClient ํจ์์์ serverComponent=false์ผ ๋ ์ฟ ํค ์ธํ ์ ํ๋ ์ด์ ๊ฐ ๋ฌด์์ธ๊ฐ์? ์ด ์ฟ ํค๋ ์ํ๋ฒ ์ด์ค ๋ก๊ทธ์ธํ ๋ ์ธ์ ์ด๋
reactํด๋ก ์ฝ๋ฉnext.jssupabase์ฐ์์ฝ๊ธฐ
ใป
10๋ฌ ์
0
105
2
- ํด๊ฒฐ
getUser ์ ๊ฐ์๊ธฐ serverComponent๊ฐ ์ถ๊ฐ๋ ์ด์ ?
9-1๊ฐ์ ์์ ๋ ธํธ ๋ดค๋๋ฐ์, ์ฝ๋์์ getUser ํจ์๋ 2๊ตฐ๋ฐ์ ์ฌ์ฉ๋๋๋ฐ, ํญ์ ์ธ์๊ฐ serverComponent๊ฐ true๋ก ์ ๋ฌ๋๋๋ผ๊ตฌ์. ๊ทธ๋ฌ๋ฉด getUser๋ฅผ ์ฌ์ฉํ ๋ ์ธ์๋ฅผ ๋๊ธฐ์ง ์๊ณ
reactํด๋ก ์ฝ๋ฉnext.jssupabase์ฐ์์ฝ๊ธฐ
ใป
10๋ฌ ์
0
79
2
- ํด๊ฒฐ
getUser ์ ๊ฐ์๊ธฐ serverComponent๊ฐ ์ถ๊ฐ๋ ์ด์ ?
9-1๊ฐ์ ์์ ๋ ธํธ ๋ดค๋๋ฐ์, ์ฝ๋์์ getUser ํจ์๋ 2๊ตฐ๋ฐ์ ์ฌ์ฉ๋๋๋ฐ, ํญ์ ์ธ์๊ฐ serverComponent๊ฐ true๋ก ์ ๋ฌ๋๋๋ผ๊ตฌ์. ๊ทธ๋ฌ๋ฉด getUser๋ฅผ ์ฌ์ฉํ ๋ ์ธ์๋ฅผ ๋๊ธฐ์ง
reactํด๋ก ์ฝ๋ฉnext.jssupabase์์ฑ์ ์์
ใป
10๋ฌ ์
0
83
2
- ํด๊ฒฐ
useCallback์ ๋ํ๋์ ๋ฐฐ์ด์ supabase ๋ฃ๋ ์ด์ ?
const getUserInfo = useCallback(async () => { const result = await supabase.auth.getUser(); if (result?.data?.user) setUser(result?.
reactํด๋ก ์ฝ๋ฉnext.jssupabase์ฐ์์ฝ๊ธฐ
ใป
10๋ฌ ์
0
75
2
- ํด๊ฒฐ
์ํ๋ฒ ์ด์ค ์ธ์ฆ ํ ํฐ์์ ๊ฐ์ธ์ ๋ณด ์ง์ฐ๋ ๋ฒ?
์๋ ํ์ธ์! ์ํ๋ฒ ์ด์ค ๋ก๊ทธ์ธ ํ๋ฉด, sb-๋ก ์์ํ๋ ์ฟ ํค๊ฐ ์์ฑ๋๋๋ฐ์,์ด ์ฟ ํค value๋ฅผ ๋์ฝ๋ฉํด๋ณด๋ฉด ์ด๋ฉ์ผ, ์ด๋ฆ ๊ฐ์ ์ ๋ณด๋ค์ด ๋์์ ๋ณด์์ ์ทจ์ฝํ ๊ฒ
reactํด๋ก ์ฝ๋ฉnext.jssupabase์ฐ์์ฝ๊ธฐ
ใป
10๋ฌ ์
0
128
2
- ํด๊ฒฐ
Server Actions CRUD ๋ก์ง, RLS ํ ์คํธ ๊ถํ error
$ npx supabase gen types typescript --project-id 'rirtnceyccxjlupupgxi' --schema public > types/supabase.ts ๋ฅผ ํฐ๋ฏธ๋์์ ์คํ์
reactํด๋ก ์ฝ๋ฉnext.jssupabase์์ฑ์ ์์
ใป
์ผ ๋ ์
2
106
2
- ๋ฏธํด๊ฒฐ
DBeaver๋ก supabase connectionํด๋ณด๊ธฐ
Database Settings์์ Connection parameters์ Host ์ฃผ์๋ฅผ ๋ณต์ฌํ๋ ค๊ณ ํ๋๋ฐ Connection parameters ์์ฒด๊ฐ ์๋ณด์ด๋๋ฐ ์ด๋ป๊ฒ ํ๋ฉด ์ข์๊น์ ??
reactํด๋ก ์ฝ๋ฉnext.jssupabase์์ฑ์ ์์
ใป
์ผ ๋ ์
0
389
2
- ํด๊ฒฐ
Supabase CRUD ํ๊ธฐ ๋๋ REST APIํ ํ๊ธฐ ์ค ์ง๋ฌธ์ด ์์ต๋๋ค.
์๋ ํ์ธ์! ์ข์ ๊ฐ์ ์ ๋ค์์ต๋๋ค!๊ฐ์ ์ค ๋ด์ฉ์ ๊ดํ ์ง๋ฌธ์ด ์์ด ์ฌ์ญ๋๋ค.ํ์ ์์ ์์ ์ฌ์ด๋ ํ๋ก์ ํธ๋ฅผ ์ด์์ค์ธ๋ฐ ๊ธฐ์กด์๋ Firebase๋ฅผ ์ฌ์ฉํ๋ค๊ฐ SQL DB๊ฐ ํ์ํด Supabase๋ก ์ด์ ์ ๊ณ ๋ คํ๋ค ๊ฐ์๋ฅผ ๋ฃ๊ฒ ๋์์ต
reactํด๋ก ์ฝ๋ฉnext.jssupabase์ ์ฌ์
ใป
1
230
2
- ํด๊ฒฐ
Direct connection / Transaction pooler / Session pooler ์ฐจ์ด๊ฐ ๋ฌด์์ธ๊ฐ์?
<img src="https://cdn.inflearn.com/public/files/posts/0af2755e-f812-4b09-9d4a-ec83e1aa1c15/e0502ba2-ee31-4528-93c7-0895d38b20ab.png" media-type="img"
reactํด๋ก ์ฝ๋ฉnext.jssupabase๋ฐ์ข ํ
ใป
1
478
2
- ๋ฏธํด๊ฒฐ
LiveDemo ํ์ด์ง ์ ์์๋ํ๋์?
๊ฐ์๋ฅผ ๋ณธ๊ฒฉ์ ์ผ๋ก ๋ฃ๊ธฐ์ ์์Live Demo๋ฅผ ์ดํด๋ณด๋ คํ๋๋ฐ,๋งํฌ ์ ์ ์์ฒด์๋ ๋ฌธ์ ๊ฐ ์์ผ๋,๋ก๊ทธ์ธ ํด๋ฆญ์ ๋ฆฌ๋ค์ด๋ ํธ url์ด ์๋ชป๋์๋์ง ์ ํํ ์ด์ ๋ ๋ชจ๋ฅด๊ณ์ผ๋ "This site can't be reached" ์๋ฌ๊ฐ ๋จ๋ค
reactํด๋ก ์ฝ๋ฉnext.jssupabase์นํ
ใป
2
129
2
- ํด๊ฒฐ
์๋ฒ ์ปดํฌ๋ํธ์์ API ํธ์ถ ์ Supabase์ ํด๋ผ์ด์ธํธ/์๋ฒ ํด๋ผ์ด์ธํธ ์ฐจ์ด์ ์ด ๊ถ๊ธํฉ๋๋ค.
๊ฐ์๋ฅผ ๋ฃ๋ค๊ฐ ๊ถ๊ธํ ์ ์ด ์๊ฒจ์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.๋ธ๋ผ์ฐ์ ์์ ์คํ๋๋ ์ฝ๋์์๋ ๋ธ๋ผ์ฐ์ ํด๋ผ์ด์ธํธ๋ฅผ ์ฌ์ฉํ๊ณ , ์๋ฒ์์ ์คํ๋๋ ์ฝ๋์์๋ ์๋ฒ ํด๋ผ์ด์ธํธ๋ฅผ
reactํด๋ก ์ฝ๋ฉnext.jssupabaseseong2
ใป
0
307
2
- ํด๊ฒฐ
7.2 ๊ตฌ๊ธ ๋ก๊ทธ์ธ 1 - AuthUI ๊ตฌํ ๊ตฌ๊ธ ๋ก๊ทธ์ธ ๊ด๋ จ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
'use client'; import React, { useEffect, useState } from 'react'; import { Auth } from '@supabase/auth-ui-react
reactํด๋ก ์ฝ๋ฉnext.jssupabasemoko
ใป
0
359
2
- ๋ฏธํด๊ฒฐ
7.2 ๊ฐ ๊ตฌ๊ธ ๋ก๊ทธ์ธ 1 ๊ฐ์ข์์ redirectTo ๋ก ์ค์ ํด๋ ์ด๋์ด ์๋์.
๊ฐ์ข ์ ๋ณด๊ณ ์์ต๋๋ค. package.json ๋ฒ์ ์ ๋ชจ๋ ๊ฐ์ต๋๋ค.๊ฐ์ข์ ์๋๋ฐ๋ก ๋ชจ๋ <a target="_blank" rel="noopener noreferrer nofollow" href="http://supabase.c
reactํด๋ก ์ฝ๋ฉnext.jssupabase์์ฑ์ ์์
ใป
0
394
3
- ๋ฏธํด๊ฒฐ
๋ก๋ฉ์ ๋ํ ์ง๋ฌธ
ํ์ฌ ํฌ๋ ํ์ด์ง์์ ์๋ก๊ณ ์นจ์ ํ๋ฉดempty -> loading -> todolist ๋ณด์ฌ์ง ์ด๋ ๊ฒ ๋๋๋ฐ,loading -> emptyloading -> todolist์ ๊ฐ์ด ๋ก๋ฉ
reactํด๋ก ์ฝ๋ฉnext.jssupabaseMalik KIM
ใป
1
192
1
- ํด๊ฒฐ
DBeaver๋ ์์ฐ๋ ๊ฑด๊ฐ์?
์๋ ํ์ธ์..!! ์ ๊ฐ ๋ฐฑ์๋๋ db๊ด๋ จํด์ ์ง์์ด ์์ด์ ์ ์ดํด๊ฐ ์๋๋ค์ ใ db๊ด๋ฆฌ๋ฅผ supabase ์ฌ์ดํธ๋ก ๋ค์ด๊ฐ์ ํ์ธํ๋ฉด ๋๋๋ฐ, ์ ํด๋ผ์ด์ธํธ ํด์ธ DBeaver๋ฅผ ์ฐ๋๊ฑด๊ฐ์?supabase ์๋ฒ์ ์ ๊ทผํ์ง ๋ชปํ๋ ํด๋ผ์ด์ธํธ
reactํด๋ก ์ฝ๋ฉnext.jssupabasekykim818
ใป
2
600
1
- ํด๊ฒฐ
ํน์ ssr๊ณผ csr์ ๋ณํํ์ฌ ์ฌ์ฉํ๊ณ ์ถ์ ๋
api/(site)/page.tsx์ actions/todo/todo.actions.ts๋ฅผ ์ฌ์ฉํ๊ณ ํ์์ปดํฌ๋ํธ๋ค์์๋ ex) api/(site)/compoents/...container.ts ๋ด๋ถ์์๋ hook์ ์ํฌํธํ๊ฒ๋ค์ด <b
reactํด๋ก ์ฝ๋ฉnext.jssupabase๋ฃจํคํคํค
ใป
1
261
2






