청크파일 업로드 방식 로직 수정

[KimKyuHoi]

Pull request

Related issue

• Resolve 파일 업로드 방식 개선 #213 @KimKyuHoi

Motivation and context

• 파일 업로드 내 구현방식 로직 수정이 필요하여 대용량 파일 업로드 내 시간을 단축시킬수있는 청크방식업로드를 제안해보았습니다.

Solution

• 동적 네트워크 조건에 따른 업로드 최적화

  • 동적 청크 사이즈 결정:
    • getDynamicChunkSize 함수에서 네트워크 지연 시간(핑 테스트)을 측정하여, 지연 시간이 길면 더 작은 청크(2.5MB 또는 5MB)를, 빠른 네트워크에서는 기본 청크 사이즈(10MB)를 사용하도록 결정하도록 구현하였습니다.
    • 동적 업로드 동시성 결정:
      getUploadConcurrency 함수는 네트워크 상태에 따라 동시에 전송할 청크 개수를 5, 3, 혹은 1개로 설정하여 업로드 효율성을 높였습니다.

• 청크 기반 파일 업로드 개선

  • 파일 청크 생성:
    • createChunks함수를 통해 파일을 동적으로 결정된 청크 사이즈로 분할하였습니다.
  • 재시도 로직 추가:
    • uploadChunkWithRetry 함수에서는 업로드 실패 시 최대 5회까지 지수 백오프 방식으로 재시도하여 안정적인 업로드를 보장하였습니다.
  • 동시 업로드 큐 구현:
    • uploadChunksQueue 함수는 네트워크 상태에 따른 동시성(worker)을 사용해 분할된 청크를 병렬로 업로드합니다.

• 파일 검증 및 식별 기능 강화

  • 파일 타입/크기 검증:
    • validateFileType, validateFileSize, validateTotalFileSize 함수를 통해 지원하는 파일 형식(이미지, 비디오)과 최대 파일 크기(이미지: 20MB, 비디오: 200MB, 전체: 1000MB)를 체크합니다.
  • 임시 파일 식별자 생성:
    • generateTempFileIdentifier 함수로 사용자 ID, 타임스탬프, 파일 인덱스를 기반으로 임시 식별자를 생성합니다.

• React 기반 파일 관리 훅 개선

  • useFileManagements 훅 구현:
    • 파일 선택 시 미리보기 URL 생성, 파일 목록 상태 관리, 에러 및 로딩 상태 관리 등을 포함하는 파일 업로드 관리 로직을 구현했습니다.
  • 썸네일 처리:
    • 비디오 파일의 경우 processFile 함수를 이용하여 썸네일을 생성하고, 별도 API(uploadThumbnail)를 통해 업로드하도록 개선했습니다.
    • blobUrlCache를 사용해 이미 처리한 파일에 대해 중복 생성 없이 캐싱된 결과를 반환합니다.
    • 썸네일 생성 과정에서 일정 시간(7초) 이내에 작업이 완료되지 않으면 에러로 처리하여 무한 대기를 방지합니다.
    • requestAnimationFrame을 사용하여 브라우저 렌더링 타이밍에 맞춰 캔버스 작업을 실행, UI 스레드의 부하를 줄이고 안정성을 높입니다.
    • 비디오 또는 캔버스 처리 중 발생하는 오류를 적절히 처리하고, 사용한 blob URL을 해제하여 메모리 누수를 방지하였습니다.
  • 소형 파일과 대용량 파일 처리 분리:
    • 10MB 이하 파일은 소형 파일 업로드 API를, 그 외의 파일은 청크 업로드 로직을 통해 처리하여 업로드 효율성과 안정성을 동시에 확보했습니다.

How has this been tested

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the docs/CONTRIBUTING.md document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[netlify]

❌ Deploy Preview for jootalkpia failed.

Name	Link
🔨 Latest commit	05e963c
🔍 Latest deploy log	https://app.netlify.com/sites/jootalkpia/deploys/67bc8e195fa4790008d56422

[handje]

불필요한 코드는 주석 처리가 아닌 삭제해주시면 코드를 읽기에 더 좋을 것 같습니다 :)

아래 내용은 fix로 새로운 이슈로 고치는 것도 좋을 것 같습니다

1. 영상을 처리하는 것으로 보이는데, 영상 preview및 전송이 동작하지 않습니다 (테스트 영상 기준, avi확장자)
2. 이미지를 첨부한 뒤, 삭제하고 text만 보내도 이전에 삭제한 이미지가 함께 채팅에 보내지고 있습니다.

• 개발이 끝난 후, 이 로직에 관해 문서로 정리해서 공유해주시면 좋은 기록이 될 것 같아요 !