[React Native/Flask] React Native에서 이미지 전송 시 UUID 도입

React Native Expo 기만 앱에서 사용자가 사진을 촬영하면 Flask 서버(/analyze)로 전송해 Yolo 모델에게 전달해주는 방식이었다.

const formData = new FormData();
formData.append("image", {
  uri: photoUri,
  name: "photo.jpg",
  type: "image/jpeg",
});

기존의 코드는 다음과 같았다. 모든 유저가 photo.jpg라는 동일한 이름으로 이미지를 전송하고 서버에서는 이 파일을 임시 저장한 후에 분석하는 방식이었다. 근데 이때 동시에 여러 명이 사진을 찍으면 이미지가 서로 덮어씌워져서 분석 결과가 뒤바뀌는 문제가 발생했다.

그래서 사용자 요청을 구분할 수 있도록 UUID를 생성해서 uuid+이미지 쌍으로 서버에 전달하도록 했다.

import { v4 as uuidv4 } from 'uuid';

const uuid = uuidv4();
formData.append("uuid", uuid);
formData.append("image", {
  uri: photoUri,
  name: "photo.jpg",
  type: "image/jpeg",
});

이때 pip install uuid를 해주어야 한다.

삽질...

서버 코드도 변경하고 테스트하는데 자꾸만 서버로 이미지와 uuid가 전달되지 않았다.

로그를 찍어보니 React Native 내에서 uuid를 생성하지 못하고 있었는데, 찾아보니 crypto.getRandomValues()가 없는 환경이기에 그냥 uuid만 설치했을 때 안되는 것이었다.

npm install uuid react-native-get-random-values

의존성을 추가로 설치해준 뒤, 코드 최상단에 다음과 같이 임포트 해준다.

import 'react-native-get-random-values'; 
import { v4 as uuidv4 } from 'uuid';

그럼 실행했을 때 다음과 같은 로그를 확인할 수 있었다.

uuid가 성공적으로 출력되어 서버로도 잘 전달되었고 다시 클라이언트에게 결과를 반환해주었다.