[React Native] Spring Boot를 활용한 백엔드 업로드

이번 장은 [React Native] 녹음 기능 구현하기: 라이브러리 활용 가이드와 이어집니다.

[React Native] 녹음 기능 구현하기: 라이브러리 활용 가이드

 

React Native를 사용해 음성을 녹음하고 Spring Boot 백엔드로 업로드하는 방법은 모바일 애플리케이션에서 흔히 요구되는 기능입니다.

특히 음성 데이터를 클라우드나 서버에 저장하면 다양한 데이터 처리가 가능해집니다.

이번 포스팅에서는 React Native 클라이언트와 Spring Boot 서버를 연결해 음성 데이터를 업로드하는 과정을 살펴보겠습니다.

출처: Tecoble

---

1. React Native: 음성 데이터 준비 및 전송

React Native 클라이언트에서는 음성을 녹음한 후 백엔드로 업로드하기 위해 파일 경로와 데이터를 준비해야 합니다.

아래는 녹음 데이터를 FormData를 사용해 서버로 업로드하는 코드입니다.

const uploadAudio = async () => {
  // FormData 객체 생성
  const formData = new FormData();
  // 오디오 파일 추가
  formData.append('file', {
    uri: filePath, // 녹음 파일 경로
    name: 'test.aac',
    type: 'audio/aac',
  });
  
  // HTTP POST 요청 보내기
  try {
    const response = await fetch('http://<your-server-url>/upload', {
      method: 'POST',
      headers: {
        // 요청 본문이 multipart/form-data로 인코딩되어 있음을 나타냄
        'Content-Type': 'multipart/form-data',
      },
      body: formData,
    });
    
    const result = await response.json();
    console.log('Upload Success:', result);
  } catch (error) {
    cosnole.error('Upload Error:', error);
  }
};

 

주요 포인트

• FormData: 파일 업로드를 위한 객체입니다.
• fetch: HTTP POST 요청을 통해 데이터를 서버에 전달합니다.
• uri: 로컬 파일 경로를 지정합니다.

2. Spring Boot: 백엔드에서 파일 수신

Spring Boot는 클라이언트에서 전송된 음성 파일을 받아 서버 디렉토리에 저장합니다.

아래는 파일을 처리하는 Spring Boot 컨트롤러 코드입니다.

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;

@RestController
@RequestMapping("/upload")
public class AudioUploadController {

	@PostMapping
    public String uploadAudio(@RequestParam("file") MultipartFile file) {
    	String uploadDir = System.getProperty("user.dir") + "/uploads/";
        File directory = new File(uploadDir);
        if (!directory.exists()) {
        	directory.mkdir();
        }
        
        try {
        	File uploadedFile = new File(uploadDir + file.getOriginalFilename());
            file.transferTo(uploadedFile);
            return "File uploaded successfully: " + uploadedFile.getAbsolutePath();
        } catch (IOException e) {
        	e.printStackTrace();
            return "File upload failed: " + e.getMessage();
        }
    }
}

주요 포인트

• MultipartFile: 클라이언트에서 전송된 파일 데이터를 수신
• file.transferTo: 서버 디렉토리에 파일 저장
• uploads/: 저장된 파일의 디렉토리 경로

3. CORS 설정

React Native는 다른 도메인에 요청할 때 CORS 오류가 발생할 수 있습니다.

CORS 오류
  - 웹 브라우저의 보안 정책 중 하나로, 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근하려 할 때 발생하는 오류

이를 방지하기 위해 Spring Boot에서 아래와 같이 글로벌 CORS 설정을 추가합니다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

4. 파일 업로드 결과

업로드 완료 시 Spring Boot 서버는 파일을 uploads/ 디렉토리에 저장하고, 성공 메시지를 반환합니다.

React Native에서는 이를 화면에 출력하거나 추가적인 처리를 할 수 있습니다.

{filePath && <Text>Save at: {filePath}</Text>}

---

React Native와 Spring Boot를 활용해 음성 데이터를 업로드하는 방법을 살펴보았습니다.

모바일 애플리케이션에서 음성 파일을 서버에 저장함으로써 데이터 분석, 스트리밍, 공유 등 다양한 추가 기능을 구현할 수 있습니다.

이 과정에서 FormData, fetch, MultipartFile과 같은 도구를 활용하여 클라이언트와 서버 간의 원활한 통신을 구현할 수 있습니다.