✨ 구현한 부분

• 담당한 기능에 대한 설명

  • 게시물 작성 시 이미지 서비스를 구현합니다.

  

  

• 사용한 기술 스택과 그 선택 이유

  • Minio

• 구현 과정에서의 핵심 결정사항들

  • 업로드하는 이미지 파일이 에디터에 미리보기로 나와야 함.
  • presigned-url로 PUT요청으로 이미지를 저장한다.
  • url 요청 시 파라미터를 제거한 주소가 실제 이미지 주소이다.

🤔 고민한 부분

• 성능 최적화를 위해 고려한 요소

  • Presigned URL 사용: 이미지 업로드 시 Presigned URL을 통해 직접 스토리지 서버에 이미지를 업로드함으로써, 서버 부하를 줄이고 사용자와 Minio 간의 통신을 통해 속도를 개선했습니다. 이를 통해 이미지 저장 과정에서 서버가 직접 파일을 처리하지 않아도 되어 성능 효율을 높였습니다.
  • 즉시 PUT 요청 방식: 에디터에 이미지를 삽입할 때 사용자가 이미지를 추가하면 그 즉시 Presigned URL로 PUT 요청을 보내 이미지를 업로드하는 방식으로 변경했습니다. 이를 통해 페이지가 이동하거나 작성이 완료되지 않아도 이미지는 바로 스토리지에 저장되며, 이로 인해 페이지 로딩 시 미리보기를 포함한 이미지가 정확하게 표시될 수 있습니다.
  • 비동기 업로드 처리: 이미지 업로드 과정에서 비동기 처리를 통해 UI가 블록되지 않고, 다른 작업을 동시에 수행할 수 있도록 해 사용자 경험을 향상시켰습니다.

• 확장성을 위한 고려사항

  • 원래는 불필요한 이미지 공간 낭비 발생을 대비해서 업로드한 이미지 파일들을 한번에 PUT 요청 하려고 했으나 에디터 미리보기에서 이미지가 보이지 않아 업로드 시 바로바로 PUT 요청하는 방식으로 변경

• 보안, UX 등 비기능적 요구사항에 대한 고민

  • 기존에는 이미지 파일을 업로드하면 60000자 정도되는 url이 생성되어 에디터 작성 시에 많이 불편함을 느꼈는데, Presigned-URL로 요청함으로써 실제 에디터 상에 코드도 깔끔해지고 게시물을 작성하는데에 더욱 편하게 설정하였습니다.
  • 또한 ngrok 도메인을 next.config.mjs파일에 추가해줘야 이미지 서비스를 정상적으로 사용할 수 있다.

☄️ 트러블 슈팅 및 해결 방법

• 오류 사항

  • 처음에 이미지 서비스를 구현할 때는 에디터에 업로드한 이미지 파일들을 게시물 작성 완료 시에 presigned-url로 한꺼번에 PUT 요청을 보내려고 했음. 그렇게 해야 이미지를 업로드하고 작성을 완료하지 않는 경우에 스토리지 공간 낭비를 줄일 수 있기 때문이였는데, 서비스가 블로그 게시물 작성이기에 작성 중인 에디터에서 업로드한 이미지 파일이 미리보기에 보이지 않는 오류가 발생하였다.

    

• 해결 방법과 그 선택 이유

  • 그래서 이미지 파일을 업로드할때마다 PUT 요청을 하는 방식으로 변경. 사용자가 게시물을 작성하면서 미리보기로 바로바로 본인이 업로드한 이미지를 볼 수 있어야 하기 때문에 이렇게 변경.

  const handleImageUpload = async (blob: File, callback: Function) => {
      try {
        
        console.log('fileName', blob.name);
        const response = await fetch(
          `/api/blog/images?bucketName=dev-blog&fileName=${blob.name}`,
        );
        if (!response.ok) {
          throw new Error('Failed to get presigned URL');
        }
        const resData = await response.json();
        const presignedUrl = resData.result;
  
        
        await fetch(presignedUrl, {
          method: 'PUT',
          headers: {
            'Content-Type': blob.type,
          },
          body: blob,
        });
  
        const imageUrl = presignedUrl.split('?')[0];
        callback(imageUrl, '이미지');
      } catch (error) {
        console.error('Error handling image upload:', error);
        alert('이미지 업로드에 실패했습니다.');
      }
    };
  

  Presigned-url을 먼저 GET요청을 통해 받아온 후에 파라미터를 제거하여서 이미지 파일을 presignedUrl에 PUT요청으로 이미지를 저장하고 서버에 파라미터를 제거한 URL로 받아온다.

• 성능 이슈

🧪 성능과 확장성 고려사항

• 성능 테스트 결과 및 분석