supabase를 이용한 데이터베이스 다루기

Supabase 공식 가이드로 데이터베이스 관리해 보기

참조
https://supabase.com/docs/guides/getting-started/tutorials/with-react

supabase를 이용한 소셜 로그인 구현

https://velog.io/@rookiejj/Supabase-github-login 참조

데이터베이스 테이블 만들기

supabase.com 로그인 > 사이드 메뉴 > SQL Editor > User Management Starter 선택 > Run 버튼 선택

- profiles 라는 DB 테이블이 만들어 지고, 사이드 메뉴 > Database > Tables 에서 확인 가능하며, 이 메뉴에서 [+New table] 버튼을 선택해서 새로운 DB 테이블을 만들 수도 있음

Profiles 데이터베이스를 읽고 쓰는 페이지 만들기

src/Account.jsx 파일 작성

import { useState, useEffect } from 'react'
import { supabase } from '../App'

export default function Account({ session }) {
  const [loading, setLoading] = useState(true)
  const [username, setUsername] = useState(null)
  const [website, setWebsite] = useState(null)
  const [avatar_url, setAvatarUrl] = useState(null)

  useEffect(() => {
    let ignore = false
    async function getProfile() {
      setLoading(true)
      const { user } = session

      const { data, error } = await supabase
        .from('profiles')
        .select(`username, website, avatar_url`)
        .eq('id', user.id)
        .single()

      if (!ignore) {
        if (error) {
          console.warn(error)
        } else if (data) {
          setUsername(data.username)
          setWebsite(data.website)
          setAvatarUrl(data.avatar_url)
        }
      }

      setLoading(false)
    }

    getProfile()

    return () => {
      ignore = true
    }
  }, [session])

  async function updateProfile(event, avatarUrl) {
    event.preventDefault()

    setLoading(true)
    const { user } = session

    const updates = {
      id: user.id,
      username,
      website,
      avatar_url: avatarUrl,
      updated_at: new Date(),
    }

    const { error } = await supabase.from('profiles').upsert(updates)

    if (error) {
      alert(error.message)
    } else {
      setAvatarUrl(avatarUrl)
    }
    setLoading(false)
  }

  return (
    <form onSubmit={updateProfile} className="form-widget">
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="text" value={session.user.email} disabled />
      </div>
      <div>
        <label htmlFor="username">Name</label>
        <input
          id="username"
          type="text"
          required
          value={username || ''}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="website">Website</label>
        <input
          id="website"
          type="url"
          value={website || ''}
          onChange={(e) => setWebsite(e.target.value)}
        />
      </div>

      <div>
        <button className="button block primary" type="submit" disabled={loading}>
          {loading ? 'Loading ...' : 'Update'}
        </button>
      </div>

      <div>
        <button className="button block" type="button" onClick={() => supabase.auth.signOut()}>
          Sign Out
        </button>
      </div>
    </form>
  )
}

Account 컴포넌트 사용하기

// App.jsx

function App() {
	(...)
    
    return (
    <div className="container" style={{ padding: '50px 0 100px 0' }}>
      {!session ? <Auth /> : <Account key={session.user.id} session={session} />}
    </div>
  )
}
export default App;