따꼼 트러블 슈팅 | 이미지 업로드 오류: InvalidKey 해결 방법

1. 오류 발생 

다음은 이미지 업로드 시 발생한 오류 메시지입니다:

이미지 업로드 오류: 
{statusCode: '400', error: 'InvalidKey', message: 'Invalid key: public/1732276487299_따꼼_단체사진1.png'}

이미지 업로드 오류: 
{statusCode: '400', error: 'InvalidKey', message: 'Invalid key: public/1732275371312_Screenshot 2024-11-20 at 10.10.32 AM.png'}

 

2. 문제 원인

1. 파일 경로에 공백이나 특수문자 포함: 파일 이름에 공백이나 특수문자가 포함되어 있어 업로드 경로가 잘못 처리될 수 있습니다. 파일 이름을 URL-safe 형식으로 인코딩하거나, 공백을 제거하는 방법을 사용할 수 있습니다.

2. 한글 문자: 일부 파일 저장소 시스템은 한글을 포함한 파일 이름을 처리하지 못할 수 있습니다.

 

이로 인해, 이미지 업로드가 실패하고 InvalidKey 오류가 발생한 것입니다.

 

 

3. 해결 방법

이 문제를 해결하기 위해서는 파일 이름을 안전한 형식으로 변환해야 합니다. 아래와 같은 방법으로 한글 문자, 공백 및 특수문자를 처리할 수 있습니다.

1. 파일 이름에서 공백을 제거하고, 특수문자를 안전하게 변환하기:
   • 공백을 _로 대체
   • 한글 및 특수문자를 _로 변환
   • 알파벳, 숫자, 밑줄, 점, 하이픈 외의 문자 제거

 

4. 코드 수정

수정 전 코드

// 이미지 업로드 함수
  const uploadImage = async (file: File): Promise<string | null> => {
    const fileName = `public/${Date.now()}_${file.name}`;
    const { error } = await browserClient.storage.from("profiles").upload(fileName, file, {
      cacheControl: "3600", // 1시간 동안 캐시 유지
      upsert: true // 기존 파일이 있으면 덮어씌움
    });

    if (error) {
      console.error("이미지 업로드 오류:", error); // 업로드 오류 처리
      return null;
    }

    const { data: publicUrlData } = browserClient.storage.from("profiles").getPublicUrl(fileName);
    return publicUrlData?.publicUrl ?? null; // 이미지 URL 반환
  };

 

문제 코드 수정

const fileName = `public/${Date.now()}_${file.name
  .replace(/\s+/g, '_') // 공백을 밑줄(_)로 대체
  .replace(/[^\x00-\x7F]/g, '_') // 한글 및 특수문자를 밑줄(_)로 대체
  .replace(/[^\w.-]/g, '')}`; // 알파벳, 숫자, 밑줄(_), 점(.), 하이픈(-) 외의 문자는 제거

 

 

코드 설명

• 공백을 밑줄(_)로 대체: replace(/\s+/g, '_')는 파일 이름에 있는 모든 공백을 _로 변환합니다. 이렇게 하면 경로에 공백이 포함되지 않도록 처리할 수 있습니다.
• 한글 및 특수문자 처리: replace(/[^\x00-\x7F]/g, '_')는 한글과 기타 특수문자를 _로 변환합니다. 이는 URL-safe한 형식으로 변환하여, 파일 시스템에서 처리할 수 있게 합니다.
• 안전한 문자만 남기기: replace(/[^\w.-]/g, '')는 알파벳, 숫자, 밑줄(_), 점(.), 하이픈(-) 외의 문자를 제거합니다. 이를 통해, 안전한 파일 이름만 남게 됩니다.

예시

파일 이름이 따꼼_단체사진1.png라면, 위의 코드를 적용한 후에는 파일 이름이 1732276487299_따꼼_단체사진1.png와 같이 변환됩니다. 이렇게 변환된 파일 이름은 경로에서 문제가 발생하지 않도록 안전하게 처리됩니다.

 

 

배운 점

이번 문제를 해결하면서 여러 가지 중요한 교훈을 얻었습니다:

1. 파일 이름의 안전성: 파일 경로와 URL에서 문제가 발생할 수 있는 문자들—특히 한글, 공백, 특수문자—을 안전하게 처리하는 방법을 배웠습니다. 이는 파일 업로드 시 발생할 수 있는 다양한 오류를 예방할 수 있는 중요한 기술입니다.
2. 문자열 처리의 중요성: 문자열을 변환하거나 필터링하는 작업에서 정규 표현식을 사용하여 특정 문자를 대체하거나 제거하는 방법을 배웠습니다. 이를 통해 다양한 종류의 오류를 예방할 수 있습니다.
3. 문제 해결의 과정: 문제의 원인을 분석하고, 이를 해결할 수 있는 방법을 찾아가는 과정에서 체계적인 접근의 중요성을 다시 한 번 느꼈습니다. 단순히 오류 메시지를 보고 해결책을 찾아가는 것보다, 문제의 근본 원인을 이해하고 해결책을 도입하는 것이 더 효과적이라는 점을 깨달았습니다.