찾다
웹 프론트엔드JS 튜토리얼Supabase를 사용하여 프로덕션급 웹 애플리케이션 구축 – 1부

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);
    });
}, []);

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

나머지

페이지 라우터와 함께 createServerClient를 사용하는 섹션을 건너뛰었고 현재 그린필드 프로젝트를 진행 중입니다. 페이지 라우터를 사용하여 Next.js로 작업해야 하는 경우 언제든지 다시 방문할 수 있습니다.

데이터베이스에 직접 연결 섹션은 매우 기본적이므로 SQL DB에 익숙하다면 직관적으로 이해할 수 있습니다.

TypeScript 사용에 대한 섹션은 주로 단일 명령을 실행하여 유형 정의를 생성(필요에 따라 재생성)하는 방법에 대해 설명합니다.

이 장은 Nuxt 3(Vue) 및 Python용 클라이언트를 생성하는 기본 예제로 마무리됩니다.

이것이 챕터 2의 결론입니다. 이제 그 포스팅이 정말 감동적이지 않았나요?

위 내용은 Supabase를 사용하여 프로덕션급 웹 애플리케이션 구축 – 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript로 문자열 문자를 교체하십시오JavaScript로 문자열 문자를 교체하십시오Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

사용자 정의 Google 검색 API 설정 자습서사용자 정의 Google 검색 API 설정 자습서Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

예제 색상 JSON 파일예제 색상 JSON 파일Mar 03, 2025 am 12:35 AM

이 기사 시리즈는 2017 년 중반에 최신 정보와 새로운 예제로 다시 작성되었습니다. 이 JSON 예에서는 JSON 형식을 사용하여 파일에 간단한 값을 저장하는 방법을 살펴 봅니다. 키 값 쌍 표기법을 사용하여 모든 종류를 저장할 수 있습니다.

10 JQuery Syntax Highlighter10 JQuery Syntax HighlighterMar 02, 2025 am 12:32 AM

코드 프레젠테이션 향상 : 개발자를위한 10 개의 구문 하이 라이터 웹 사이트 나 블로그에서 코드 스 니펫을 공유하는 것은 개발자에게 일반적인 관행입니다. 올바른 구문 형광펜을 선택하면 가독성과 시각적 매력을 크게 향상시킬 수 있습니다. 티

자신의 Ajax 웹 응용 프로그램을 구축하십시오자신의 Ajax 웹 응용 프로그램을 구축하십시오Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

8 멋진 jQuery 페이지 레이아웃 플러그인8 멋진 jQuery 페이지 레이아웃 플러그인Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

10 JavaScript & JQuery MVC 자습서10 JavaScript & JQuery MVC 자습서Mar 02, 2025 am 01:16 AM

이 기사는 JavaScript 및 JQuery Model-View-Controller (MVC) 프레임 워크에 대한 10 개가 넘는 튜토리얼을 선별 한 것으로 새해에 웹 개발 기술을 향상시키는 데 적합합니다. 이 튜토리얼은 Foundatio의 다양한 주제를 다룹니다

' this ' 자바 스크립트로?' this ' 자바 스크립트로?Mar 04, 2025 am 01:15 AM

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.