Supabase를 사용하여 프로덕션급 웹 애플리케이션 구축

Building Production-Grade Web Applications with Supabase – Part 1

(본 포스팅은 베이비프로그래머에 게재된 글입니다)

저는 David Lorenz의 저서 Building Production-Grade Web Application with Supabase(제휴 링크)를 읽고 2장 - Next.js로 Supabase 설정을 마쳤습니다. 몇 가지 문제가 발생하여 이를 해결한 방법과 함께 공유해드리고 싶습니다.

섹션: Next.js 내에서 기본 Supabase JavaScript 클라이언트 초기화 및 테스트

오류: ECmascript 소스 코드 구문 분석에 실패했습니다.

Supabase 버킷을 확인하려면 다음 코드를 사용하라는 지시를 받습니다.

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

로그인 후 복사

안타깝지만 이로 인해 다음과 같은 오류가 발생합니다.

 ⨯ ./src/app/page.js:9:5
 Parsing ecmascript source code failed
   7 |     supabase.storage.listBuckets().then((result) =>
   8 |       console.log("Bucket List", result)
 > 9 |     });
     |     ^
  10 |   }, []);
  11 |
  12 |   return (

Expected ',', got '}'

로그인 후 복사

다행히도 수정 방법은 매우 간단합니다. .then((result) => :
바로 뒤에 여는 중괄호를 추가하면 됩니다.

  useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) => {
      console.log("Bucket List", result)
    });
  }, []);

로그인 후 복사

오류: ReferenceError: useEffect가 정의되지 않았습니다.

위 오류가 해결되면 다음 오류가 발생합니다.

⨯ ReferenceError: useEffect is not defined
    at Home (src/app/page.js:5:2)
  3 |
  4 | export default function Home() {
> 5 |   useEffect(() => {
    |  ^
  6 |     const supabase = createSupabaseClient();
  7 |     supabase.storage.listBuckets().then((result) => {
  8 |       console.log("Bucket List", result) {
  digest: '3325505329'
}

로그인 후 복사

문제는 이 페이지에서 사용하기 위해 React에서 useEffect를 가져오지 않았다는 것입니다. 그렇게 하는 것은 간단합니다. Image:
를 가져온 직후에 useEffect에 대한 가져오기를 추가하세요.

import Image from "next/image";
import { useEffect } from "react";
import { createSupabaseClient } from "@/supabase-utils/client";

로그인 후 복사

오류: Ecmascript 파일에 오류가 있습니다.

즉시 또 다른 오류가 표시됩니다.

⨯ ./src/app/page.js:2:10
Ecmascript file had an error
  1 | import Image from "next/image";
> 2 | import { useEffect } from "react";
    |          ^^^^^^^^^
  3 | import { createSupabaseClient } from '@/supabase-utils/client';
  4 |
  5 | export default function Home() {

You're importing a component that needs `useEffect`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive.

 Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

로그인 후 복사

다행히도 해결책은 매우 간단합니다. 파일 상단에 "클라이언트 사용"을 추가합니다. 그렇죠:

"use client";

import Image from "next/image";

로그인 후 복사

섹션: 페이지 라우터 및 앱 라우터와 함께 Supabase 클라이언트 사용

하위 섹션: 프런트엔드에서 createBrowserClient 활용

첫 번째 문제는 실제로 오류가 아니라 일부 독자에게 일부 지침이 완전히 명확하지 않을 수 있다는 점입니다. 독자는 다음과 같이 createBrowserClient를 사용하도록 createSupabaseClient 함수를 업데이트하라는 지시를 받습니다.

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () => createBrowserClient(...);

로그인 후 복사

...이 있는 곳에 말 그대로 ...를 배치해서는 안 되며, 이전에 createClient() 내에 있던 콘텐츠를 삽입해야 합니다. 최종 코드는 다음과 같습니다.

import { createBrowserClient } from "@supabase/ssr";
export const createSupabaseClient = () =>
    createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    );

로그인 후 복사

그런 다음 client.js 파일에 대해 상대적으로 작은 두 가지 조정을 수행하라는 지시를 받습니다.

client.js에서 browserClient.js로 파일 이름을 바꿉니다

createSupabaseClient의 이름을 getSupabaseBrowserClient로 변경합니다

그러나 편집자가 변경 사항을 선택하여 자동으로 수정하지 않는 한 추가 작업이 발생합니다.

먼저 page.js에서 가져오기를 업데이트해야 합니다.

import { getSupabaseBrowserClient } from "@/supabase-utils/browserClient";

로그인 후 복사

다음으로 page.js에서 클라이언트 인스턴스화를 업데이트해야 합니다.

const supabase = getSupabaseBrowserClient();

로그인 후 복사

우리는 다음과 같은 말을 들었습니다:

"VS Code에서 F2를 눌러 createSupabaseClient의 이름을 바꿀 수 있습니다. 프로젝트 전체에서 자동으로 이름이 변경됩니다. 파일 이름을 변경하면 VS Code는 참조를 선택하고 이에 따라 다른 파일의 경로도 리팩터링해야 합니다."

(커서를 사용했는데 변경사항이 반영되지 않았습니다... 이 경우에는 확실히 의자와 키보드의 연결이었을 수도 있습니다)

하위 섹션: 백엔드에서 createServerClient 활용

Lorenz가 인정한 것처럼 이 섹션은 꽤 길고 다소 혼란스럽습니다.

특히 혼란스러운 코드 블록이 하나 있습니다.

useEffect(() => {
    const supabase = createSupabaseClient();
    supabase.storage.listBuckets().then((result) =>
     console.log("Bucket List", result);
    });
}, []);

로그인 후 복사

얼핏 보면 같은 단계를 두 번 수행하는 것처럼 보일 수 있습니다. 첫 번째 인스턴스는 요청 쿠키를 수정하고 두 번째 인스턴스는 응답 쿠키를 수정한다는 사실을 간과하기 쉽습니다.