React & Expo - 파일 업로드 및 다운로드 방법

소개

Expo 기반 모바일 앱에서 파일을 업로드하고 다운로드하는 방법에 대한 명확한 예를 찾으려고 애썼습니다. 같은 문제에 직면한 다른 사람들이나 단순히 호기심이 많은 사람들을 돕기 위해 이 게시물을 썼습니다.

이 과정에서 이해해야 할 주요 개념을 살펴보겠습니다.

• 버퍼
• 인텐트 필터
• MIME 유형
• 애플리케이션/옥텟 스트림
• 다중 부분/양식 데이터
• 그 외...

우리가 다룰 내용:

• Fastify 서버로 파일을 보내고 받습니다.
• React 웹 앱에서 파일 업로드, 다운로드 및 표시
• React Native(Expo) 모바일 앱에서 파일 업로드, 다운로드 및 표시

모든 코드와 Postman 컬렉션은 내 GitHub에서 확인할 수 있습니다.

섬기는 사람

서버는 Fastify(Express.js의 현대화된 버전)에서 실행됩니다. 앱을 시작하려면 다음을 수행하세요.

1. 터미널을 사용하여 /server로 이동하세요.
2. npm install로 종속성 설치
3. npm run dev를 사용하여 서버를 실행하세요.

app.js에는 세 가지 주요 엔드포인트가 있습니다.

- 다운로드 엔드포인트(/download)

이 엔드포인트는 createReadStream()을 사용하여 example.webp를 스트림으로 보냅니다. MIME 유형이 포함되어 클라이언트가 파일 처리 방법을 알 수 있습니다. 예를 들어.webp의 경우 image/webp가 됩니다.

?참고: MIME 유형은 전송되는 파일의 형식을 정의합니다. 이는 클라이언트가 이를 올바르게 표시하는 데 도움이 됩니다.
더 많은 MIME 유형을 확인하세요.

Content-Disposition 헤더는 클라이언트에 콘텐츠가 표시되는 방식을 정의합니다. 첨부파일 포함; 파일 이름=<파일 이름> 파일을 인라인으로 표시하는 대신 브라우저에 파일을 다운로드하라는 메시지를 표시합니다. 직접 표시하려면 첨부파일 대신 인라인을 사용하세요.
콘텐츠 처리에 대해 자세히 알아보기

- 양식 데이터(/upload-multiples)를 사용하여 다중 파일 업로드

이 엔드포인트는 다중 부분/양식 데이터 요청을 수락합니다. 그것은:

1. 요청에서 파일을 검색합니다.
2. 각 파일을 버퍼(바이너리 데이터의 JavaScript 표현)로 변환합니다.
3. 파일을 /upload 디렉터리에 저장합니다.

예를 들어 요청은 다음과 같습니다.

- 옥텟 스트림(/upload-octet-stream)을 사용하여 파일 업로드

이 엔드포인트는 요청 본문(애플리케이션/옥텟 스트림)에 단일 바이너리 파일이 있을 것으로 예상합니다. multipart/form-data와 달리 파일은 이미 바이너리 데이터이므로 디스크에 직접 쓸 수 있습니다.

요청은 Postman에서 다음과 같이 표시됩니다.

웹(반응)

앱을 실행하려면:

1. 터미널을 사용하여 /web으로 이동하세요.
2. npm install로 종속성 설치
3. npm run dev를 사용하여 앱 시작

웹 애플리케이션의 모든 기능은 App.tsx에 포함되어 있습니다.

이 React 앱은 세 가지 주요 기능을 제공합니다.

- 파일 다운로드/표시

사용자가 "다운로드" 버튼을 클릭하면 앱은 다음을 수행합니다.

1. /download 엔드포인트를 호출합니다.
2. 파일을 바이너리 blob으로 받습니다.
3. Blob에서 objectURL을 생성하여 브라우저가 액세스할 수 있는 임시 URL 역할을 합니다.

동작은 서버에서 반환된 Content-Disposition 헤더에 따라 다릅니다.

• Content-Disposition에 인라인이 포함된 경우 파일이 새 탭에 표시됩니다.
• 첨부파일이 포함된 경우 자동으로 파일이 다운로드됩니다.

다운로드를 실행하기 위해 앱은 임시 href가 objectURL로 설정된 요소를 프로그래밍 방식으로 클릭하여 사용자 다운로드 작업을 시뮬레이션합니다.