게임모드공유웹 <ModHub> 제작기 - 프론트와 백 연동하기

먼저 백단을 수정해야 한다.
임시로 HelloController를 생성했다.
HelloController.java

@RestController
@CrossOrigin(origins = "http://localhost:5173")
public class HelloController {

    @GetMapping("/api/test")
    public String hello() {
        return "테스트입니다.";
    }
}

• @CrossOrigin(origins = "http://localhost:5173"): Vite의 포트를 나타낸다.
• 여기 /api/test 경로로 리턴값을 보내 프론트에서 받는지 확인이 필요하다.

백엔드에서 받아오는 데이터를 파싱하기 위해 React에서 axios를 설치해주자.

Axios란?
브라우저와 Node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리로 프론트엔드 개발에서 백엔드 API와 통신할 때 매우 유용하다. 쉽게 말해 HTTP 요청을 쉽게 보낼 수 있게 해주는 도구

React에서 터미널을 열고

npm install axios --save

이제 프론트엔드 코드를 수정해주자.

디렉토리에 보면 vite.config.js 파일이 있다. Vite 빌드 도구의 설정 파일로 프로젝트의 개발 환경과 빌드 과정을 커스터마이징하는 역할을 한다. 코드를 아래와 같이 수정해준다.

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api')
      }
    }
  }
})

프록시 설정 - 프론트단에서 /api로 시작하는 모든 요청을 감지

• target: 'http://localhost:8080/': Spring Boot 서버 주소
• rewrite: (path) => path.replace(/^\/api/, '/api'): URL 재작성 규칙 삽입

App.jsx

import {useEffect, useState} from "react";
import axios from "axios";

const api = axios.create({
  baseURL: 'http://localhost:8080/'  // Spring Boot 서버 주소
});

function App() {
    const [hello, setHello] = useState('');

    useEffect(() => {
        api.get('/api/test')
            .then((res) => {
                setHello(res.data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }, []);

    return (
        <div className="App">
            백엔드 데이터 : {hello}
        </div>
    );
}

데이터를 받아오는 간단한 예제를 작성했다.
백엔드의 /api/test 엔드포인트에서 반환하는 값을 받아온다.

정상적으로 데이터를 받아오는 것을 확인했다.
연동 완료!