[Supabase] 이미지 업로드 React.js

Supabase는 강력한 오픈소스 Firebase 대안을 제공합니다. 내장된 저장 기능은 React 애플리케이션 내에서 이미지 처리를 단순화합니다. 이미지를 원활하게 업로드하고 공개적으로 액세스 가능한 URL을 얻는 방법을 살펴보겠습니다.

[Supabase] 이미지 업로드 React.js

1. 프로젝트 설정

• 종속성 설치:

npm install @supabase/supabase-js

• Supabase 프로젝트 생성: [유효하지 않은 URL 삭제됨] 이동하여 새로운 프로젝트를 설정합니다.
• 자격 증명 얻기: 프로젝트 설정에서 "API"로 이동하여 Supabase URL과 공개 API 키를 기록합니다.

2. React 컴포넌트

이미지 업로드 로직을 처리하는 React 컴포넌트를 만들어 보겠습니다.

import React, { useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_PUBLIC_ANON_KEY';
const supabaseClient = createClient(supabaseUrl, supabaseAnonKey);

const ImageUpload = () => {
  const [imageFile, setImageFile] = useState(null);
  const [imageUrl, setImageUrl] = useState(null);

  const handleImageChange = (event) => {
    setImageFile(event.target.files[0]);
  };

  const handleUpload = async () => {
    const bucket = 'your-storage-bucket'; // 버킷 이름으로 변경
    const fileName = imageFile.name;

    const { data, error } = await supabaseClient.storage
      .from(bucket)
      .upload(fileName, imageFile);

    if (error) {
      console.error('Upload error:', error);
      return;
    }

    const publicUrl = supabaseClient.storage
      .from(bucket)
      .getPublicUrl(fileName);

    setImageUrl(publicUrl.data.publicUrl);
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      <button onClick={handleUpload}>업로드</button>
      {imageUrl && <img src={imageUrl} alt="Uploaded" />}
    </div>
  );
};

export default ImageUpload;

설명

• Supabase 설정: 템플릿에서 주어진 값을 자신의 프로젝트 정보로 바꿉니다.
• 상태 변수: imageFile은 선택된 이미지 파일을 저장하고 imageUrl은 생성된 공개 URL을 저장합니다.
• handleImageChange: 사용자가 파일을 선택하면 imageFile 상태를 업데이트합니다.
• handleUpload:
  • 이미지를 Supabase 스토리지 버킷에 업로드합니다.
  • getPublicUrl을 사용하여 공개 URL을 가져옵니다.
  • 업로드된 이미지를 표시하도록 imageUrl 상태를 업데이트합니다.

3. 컴포넌트 활용

ImageUpload 컴포넌트를 메인 React 애플리케이션에서 가져와 사용합니다.

주요 사항

• 스토리지 버킷: 업로드하기 전에 Supabase 프로젝트에서 공개 스토리지 버킷을 생성합니다.
• 오류 처리: 사용자에게 원활한 경험을 제공하기 위해 앱에서 강력한 오류 처리를 구현합니다.
• 이미지 표시: 코드 조각은 <img> 태그를 사용하여 업로드된 이미지를 표시하는 기본적인 방법을 포함합니다.

추가 기능

• 이미지 크기 조정
• 진행률 표시기