학습 내용

인프런 워밍업 클럽 스터디 2주차로,

이번 주는 드롭 박스 프로젝트와 함께 Supabase의 Storage를 다뤄볼 수 있는 시간이었다.

Supbase Storage

1. 기본 구성 요소

• Files: 모든 종류의 미디어 파일 저장 가능 (이미지, GIF, 비디오 등)

• Folders: 파일을 체계적으로 구성하기 위한 디렉토리 구조

• Buckets: 파일과 폴더를 담는 최상위 컨테이너 (접근 규칙별로 구분)

2. 접근 제어 모델

• Private Buckets (기본값)

   

  • RLS(Row Level Security) 정책을 통한 접근 제어

  • JWT 인증 필요

  • Signed URL을 통한 임시 접근 가능

• Public Buckets

  • 파일 조회 시 접근 제어 없음

  • URL만 있으면 누구나 접근 가능

  • 업로드/삭제 등 다른 작업은 여전히 접근 제어 적용

3. 보안 기능

• RLS 정책 설정 가능

  • SELECT (다운로드)

  • INSERT (업로드)

  • UPDATE (수정)

  • DELETE (삭제)

• 소유권 관리

  • owner_id 필드로 리소스 소유자 추적

  • JWT의 sub claim 기반 소유권 할당

4. 이미지 변환 기능 (Pro Plan 이상)

• 실시간 이미지 최적화

  • 크기 조정

  • 품질 조정 (20-100)

  • WebP 자동 최적화

• 변환 옵션

  • resize 모드: cover, contain, fill

  • width/height 지정 (1-2500px)

  • 최대 파일 크기: 25MB

  • 최대 해상도: 50MP

5. 인증 방식

• S3 액세스 키

  • 서버 사이드 전용

  • 모든 버킷에 대한 완전한 접근 권한

• 세션 토큰

  • 클라이언트 사이드 사용 가능

  • RLS 정책 기반 제한된 접근

6. 통합 기능

• Next.js 이미지 로더 지원

• AWS S3 호환성

• PostgreSQL DB와 연동

7. 제한사항

• 파일명은 AWS S3 명명 규칙 준수 필요

• HTML 파일은 보안상 plain text로 반환

• 이미지 변환 기능은 Pro Plan 이상에서만 사용 가능

미션 2 구현 내용

과제 구현 저장소

Dropbox 중

파일의 마지막 수정(업로드) 시간을 표시하는 기능 추가 하기

export interface FileObject {
  name: string
  bucket_id: string
  owner: string
  id: string
  updated_at: string
  created_at: string
  last_accessed_at: string
  metadata: Record<string, any>
  buckets: Bucket
}

=> DropboxImage 컴포넌트가 prop으로 받는 image의 타입은 FileObject로 그 중 업로드시간은 created_at을 의미하기에 이를 이미지에 추가하였다.(사진 참고)

포인트 1: 한글 파일명 es-hangul 사용

// 안전한 파일명 생성을 위한 유틸리티
export class FileNameConverter {
  // 안전한 문자 패턴 정의
  private static readonly SAFE_CHARACTERS = /^[a-zA-Z0-9!\-_.*'()]+$/;

  private static generateRandomString(length: number = 8): string {
    const chars =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    return Array.from({ length }, () =>
      chars.charAt(Math.floor(Math.random() * chars.length))
    ).join("");
  }

  // 파일명이 안전한 문자들로만 구성되었는지 확인
  private static isSafeFileName(name: string): boolean {
    return this.SAFE_CHARACTERS.test(name);
  }

  // 안전하지 않은 문자를 포함한 파일명을 안전한 형식으로 변환
  private static convertToSafeFileName(name: string): string {
    try {
      // 파일명 정규화
      const normalized = name.trim().normalize();

      // 한글이나 특수문자가 있는지 확인
      const hasKorean = /[ㄱ-ㅎㅏ-ㅣ가-힣]/.test(normalized);
      const hasSpecialChars = /[^A-Za-z0-9]/.test(normalized);

      if (!hasKorean && !hasSpecialChars) {
        return normalized;
      }

      // 한글이 있는 경우 로마자로 변환 시도
      if (hasKorean) {
        const romanized = romanize(normalized);
        if (romanized && romanized !== normalized) {
          // 로마자 변환 결과에서 안전하지 않은 문자 제거
          return romanized.replace(/[^a-zA-Z0-9]/g, "_").toLowerCase();
        }
      }

      // 변환 실패 시 랜덤 문자열 생성
      return this.generateRandomString();
    } catch (error) {
      console.error("Conversion error:", error);
      return this.generateRandomString();
    }
  }

  // 원본 파일명을 안전한 형식으로 변환
  static encode(fileName: string): string {
    console.log("Original filename:", fileName);

    const extension = fileName.split(".").pop() || "";
    const nameWithoutExt = fileName.slice(0, fileName.lastIndexOf("."));

    const safeName = this.isSafeFileName(nameWithoutExt)
      ? nameWithoutExt
      : this.convertToSafeFileName(nameWithoutExt);

    console.log("Safe filename:", safeName);

    return `${safeName}_${Date.now()}.${extension}`;
  }

  // 파일명에서 타임스탬프 제거하여 원본 이름 추출
  static decode(fileName: string): string {
    const [name] = fileName.split("_");
    return name || fileName;
  }
}

포인트 2 : 업로드 날짜 표시

export function formatDate(timestamp: string): string {
  const date = new Date(timestamp);
  const now = new Date();
  const diff = now.getTime() - date.getTime();

  // 1일 이내
  if (diff < 24 * 60 * 60 * 1000) {
    const hours = Math.floor(diff / (60 * 60 * 1000));
    if (hours < 1) {
      const minutes = Math.floor(diff / (60 * 1000));
      return `${minutes}분 전`;
    }
    return `${hours}시간 전`;
  }

  // 30일 이내
  if (diff < 30 * 24 * 60 * 60 * 1000) {
    const days = Math.floor(diff / (24 * 60 * 60 * 1000));
    return `${days}일 전`;
  }

  // 그 외
  return date.toLocaleDateString("ko-KR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}

회고

파일명 변환하는데 생각보다 시간이 많이 소요됐다.

여찌저찌 구현은 헀지만, 이미지가 어떻게 encoding되고 decoding되는지 일련의 과정에 대한 공부가 필요함을 느끼는 이번주 였다.