전체 글74 React Native에서 대용량 동영상 업로드 최적화 대용량 동영상을 업로드하는 과정에서 메모리 과부하(OOM)로 인해 앱이 튕기는 문제가 발생했다.처음에는 단순한 업로드 방식을 사용했지만, 테스트 과정에서 여러 가지 성능 문제가 드러났다.해결하기 위해 파일 압축, 업로드 방식 변경, 캐시 최적화 등의 방법을 적용,🚨 문제점: 대용량 동영상 업로드 시 메모리 과부하(OOM) 발생초기 방식: 파일을 한 번에 업로드처음에는 expo-file-system을 사용하여 동영상을 업로드하는 간단한 방식을 적용했다.파일을 선택한 후 그대로 서버에 전송하는 방식이었는데,이 방식에는 치명적인 문제가 있었다.📌 초기 방식의 문제점파일 크기 제한파일을 한 번에 업로드하는 방식이라, 2GB 이상의 파일은 업로드 도중 앱이 강제 종료됨메모리 과부하(OOM) 발생파일이 한꺼번에.. 2025. 3. 7. HLS와 M3U8 1. HLSHTTP Live Streaming, 비디오 파일을 다운로드할 수 있는 HTTP 파일 조각으로 나누고 HTTP프로토콜을 이용하여 전송. 클라이언트 장치는 이러한 HTTP 파일을 로드한 후 비디오로 재생 장점모든 인터넷 연결 장치가 HTTP를 지원하기 때문에 전용 서버가 필요한 스트리밍 프로토콜보다 간단하게 실행. HLS 스트리밍은 재생에 지장을 주지 않고 네트워크 상태에 따라 비디오 품질을 높이거나 낮출 수 있다는 것, 이 때문에 사용자가 비디오를 보는 중에 품질이 나빠지거나 좋아질 수 있음스트리밍 ? 파일을 한번에 보내는 대신에 여러번 나누어 사용자에게 전송, 따라서 사용자의 장치가 먼저 모든 파일을 다운로드하지 않고 비디오를 재생 2. HLS 동작원리 세그먼트 분할미디어파일 (비디오 등).. 2025. 2. 10. 업로드 상황에 따른 Progress 구현 기존에 expo-file-System의 uploadAsync를 사용해 대용량 데이터를 스트리밍 방식으로 진행해서 업로드를 했었음.여기에 프로그레스를 적용해 진행률 확인 구현해야함 프로그레스를 구현하려면 uploadAsync 가 아닌 createUploadTask API를 활용해 파일 업로드를 스트리밍 방식으로 진행, 업로드 도중 진행률(progress)을 콜백을 통해 계산하여 UI 상태를 업데이트한다. 업로드가 완료된 후에는 응답 상태를 확인해 성공 여부를 판단. 1. 업로드 작업 생성const uploadTask = FileSystem.createUploadTask( uploadUrl, fileUri, { httpMethod: "PUT", uploadType: FileSystem... 2025. 2. 10. 앱에서 앨범에 접근해 동영상 불러오는 시간 줄이는 방법 React Native에서 동영상을 갤러리에서 불러오는 방식은 여러 가지가 있지만,처음에는 expo-image-picker를 사용했다.하지만 느린 속도, 자동 압축 문제 등의 이유로,expo-media-library로 전환하는 과정을 거쳤다.🚨 문제점: 갤러리에서 동영상 불러오는 속도가 너무 느림초기 방식: expo-image-picker 사용처음에는 가장 간편한 방법인 expo-image-picker를 사용했다.이 방식은 기본적으로 이미지 및 동영상을 선택하는 기능을 제공하지만,사용해보니 여러 가지 문제점이 발생했다.📌 초기 방식의 문제점Base64 인코딩된 데이터를 반환하여 처리 속도가 느림expo-image-picker는 자동으로 일부 압축을 수행동영상을 선택한 후 압축 과정에서 시간이 지체됨✅.. 2025. 1. 27. 이전 1 2 3 4 ··· 19 다음
