React Native 앱을 만들다 보면 이미지, 동영상, 문서 등 대용량 파일 업로드와 관리가 필요한 경우가 많다.
이때 단순 로컬 저장소만으로는 한계가 있어 클라우드 스토리지를 연동해야 한다.
이번 글에서는 AWS S3, Firebase Storage, Cloudinary를 중심으로 React Native에서 클라우드 스토리지 연동 전략을 정리한다.
npm install @react-native-firebase/app @react-native-firebase/storage
import storage from '@react-native-firebase/storage';
async function uploadFile(uri: string) {
const reference = storage().ref(`/images/${Date.now()}.jpg`);
await reference.putFile(uri);
const url = await reference.getDownloadURL();
return url;
}
장점
단점
npm install aws-sdk
import S3 from 'aws-sdk/clients/s3';
const s3 = new S3({
accessKeyId: 'YOUR_KEY',
secretAccessKey: 'YOUR_SECRET',
region: 'ap-northeast-2',
});
async function uploadToS3(fileUri: string, fileName: string) {
const response = await fetch(fileUri);
const blob = await response.blob();
const params = {
Bucket: 'your-bucket',
Key: fileName,
Body: blob,
ContentType: 'image/jpeg',
};
return s3.upload(params).promise();
}
장점
단점
npm install cloudinary
import { Cloudinary } from 'cloudinary-core';
const cloudinary = new Cloudinary({ cloud_name: 'your_cloud_name' });
function getImageUrl(publicId: string) {
return cloudinary.url(publicId, { width: 300, crop: 'scale' });
}
장점
단점
서비스 | 장점 | 단점 | 추천 환경 |
---|---|---|---|
Firebase Storage | 쉬운 연동, Firebase와 통합 | 대규모 비용 부담 | 스타트업 MVP, 빠른 개발 |
AWS S3 | 확장성, 세밀한 제어 | 설정 복잡 | 엔터프라이즈, 대규모 서비스 |
Cloudinary | 자동 최적화, URL 기반 변환 | 한도 제한 | 이미지 위주 앱, 미디어 처리 특화 |
React Native 앱에서 클라우드 스토리지는 필수 인프라에 가깝다.
서비스의 성격과 트래픽 규모에 따라 적절한 스토리지를 선택하는 것이 핵심이다.