북새통 2

sparta TIL

북새통 2

hr7 2024. 7. 9. 20:16

앞전에 저장했던 이미지를 다른걸로 바꿨다가 다시 넣어도 에러

409{statusCode: '409', 오류: '중복', 메시지: '자원이 이미 존재합니다'}

Supabase Storage 이미지 [ 서버사용량 관리해야하는 이유 ]

1. 저장 공간 최적화

사용자가 프로필 이미지를 변경할 때마다 이전 이미지+새로운 이미지 이런 식으로 서버 데이터에 누적이 된다.

이전 이미지 파일이 계속해서 서버에 쌓이게 되면 스토리지 사용량을 불필요하게 증가시키고, 결국에는 저장 공간의 부족을 초래할 수 있다.

▶︎ 새로운 이미지를 업로드할 때 기존 이미지를 삭제하여 저장 공간을 최적화하는 방법이 있다. 이렇게 하면 필요한 파일만 저장되어 공간을 효율적으로 사용할 수 있다.

2. 비용 절감

클라우드 스토리지 서비스는 사용한 저장 공간에 따라 비용이 부과된다. 불필요한 이미지 파일이 많이 쌓이면 스토리지 비용이 증가하게 된다.

▶︎ 불필요한 파일을 제거함으로써 저장 공간 사용을 줄이고, 이에 따라 비용도 절감할 수 있다.

3. 데이터 관리 효율성

많은 불필요한 파일이 쌓이면 파일 관리가 어려워지고, 필요한 파일을 찾는 데 시간이 더 많이 소요될 수 있고, 중복된 파일이 많으면 데이터의 정합성을 유지하기도 어렵다.

▶︎ 최신 파일만 유지함으로써 파일 관리가 용이해지고, 데이터의 정합성을 쉽게 유지할 수 있다. 이는 데이터베이스의 청결도와 효율성을 높여줌

이번 플젝에서는 프로필수정에 적용했기 때문에 1번의 경우이다.

🌱 프로필 이미지 업로드 시 이전 이미지를 삭제하고 새로운 이미지로 대체하는 방법은 저장 공간을 절약하고 비용을 절감하며 성능을 향상시키는 데 중요한 역할을 함. 이러한 최적화 작업을 통해 서버 자원을 효율적으로 관리하고, 시스템의 전체적인 성능을 개선할 수 있다.

Zustand 스토어에서 사용자 상태를 관리

// src/zustand/userStore.js
import create from 'zustand';

export const useUserStore = create((set) => ({
  id: null,
  nickname: '',
  address: '',
  profile_url: '',
  setUser: (id, email, nickname, profile_url, address) => set({ id, email, nickname, profile_url, address }),
}));

프로필 페이지 컴포넌트

// 새로운 이미지 업로드 경로 설정
const cleanFileName = file.name.replace(/[^a-zA-Z0-9.]/g, '_');
const filePath = `profiles/${id}/${cleanFileName}`;

// 기존 이미지 삭제
if (profile_url) {
  const oldFileName = profile_url.split('/').pop();
  if (oldFileName) {
    await supabase.storage.from('avatars').remove([`profiles/${id}/${oldFileName}`]);
  }
}

// 새로운 이미지 업로드
const { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file, {
  upsert: true
});
if (uploadError) {
  console.error('업로드 에러 :', uploadError);
  setNotification('업로드 중 에러가 발생했습니다.');
  return;
}

const { data } = supabase.storage.from('avatars').getPublicUrl(filePath);

새로운 이미지 업로드 경로 설정 : 파일 이름을 깨끗하게 정리하고, filePath 변수에 새로운 파일 경로를 설정
기존 이미지 삭제 : 현재 프로필 URL이 존재하면, URL에서 파일 이름을 추출하고, 해당 파일을 Supabase 스토리지에서 삭제
새로운 이미지 업로드 : 새로운 파일을 설정한 경로에 업로드. upsert: true 옵션은 같은 이름의 파일이 이미 존재하면 덮어쓰기를 허용
업로드 성공 여부 확인 : 업로드 중 에러가 발생하면 에러 메시지를 출력하고, 알림을 설정
공개 URL 가져오기 : 업로드된 파일의 공개 URL을 가져옴