React와 Spring Boot 연동: 로컬 개발 환경 구축 및 API 통신 실전 가이드

튜토리얼

React와 Spring Boot 연동: 로컬 개발 환경 구축 및 API 통신 실전 가이드

강코의 코딩 일기 2026. 5. 18. 08:29

React와 Spring Boot를 연동하여 로컬 개발 환경을 구축하고, 실제 API 통신을 구현하는 실전 가이드입니다. 프론트엔드-백엔드 통합 개발의 핵심 노하우를 얻어가세요.

📑 목차

왜 React와 Spring Boot를 함께 사용해야 할까요? 풀스택 개발의 시작
개발 환경 사전 준비: 필수 도구 설치
1. Java Development Kit (JDK) 설치
2. Node.js 및 npm/yarn 설치
3. 개발 IDE (IntelliJ IDEA, VS Code 등)
Spring Boot 프로젝트 설정 및 간단한 API 개발
1. Spring Boot 프로젝트 생성
2. 간단한 REST API 구현
3. Spring Boot 애플리케이션 실행
React 프로젝트 설정 및 API 연동 준비
1. React 프로젝트 생성
2. 프록시 설정으로 CORS 문제 우회 (로컬 개발 환경)
React와 Spring Boot API 통신 구현
1. API 데이터 가져오기
2. 애플리케이션 실행 및 테스트
CORS 문제 해결 및 효율적인 개발 팁
1. 배포 환경에서의 CORS 처리
2. 로컬 개발 프록시 vs 백엔드 CORS 설정 비교
3. 환경 변수 활용 (API URL 관리)
마무리: 견고한 풀스택 애플리케이션의 시작

React와 Spring Boot 연동을 위한 로컬 개발 환경 구축 및 API 통신 실전 가이드 - computer, laptop, tech, blue computer, blue laptop, blue tech, computer, laptop, tech, tech, tech, tech, tech

Image by yeiferr on Pixabay

왜 React와 Spring Boot를 함께 사용해야 할까요? 풀스택 개발의 시작

웹 애플리케이션 개발에서 프론트엔드와 백엔드를 분리하는 것은 이제 일반적인 개발 방식이 되었습니다. 사용자 경험에 집중하는 React와 안정적이고 강력한 백엔드 처리를 담당하는 Spring Boot는 이 분리된 아키텍처에서 가장 인기 있는 조합 중 하나입니다. 하지만 이 둘을 처음 연동하려는 개발자들은 종종 막막함을 느끼곤 합니다.

특히 로컬 개발 환경에서 React 애플리케이션과 Spring Boot API 서버가 원활하게 통신하도록 설정하는 것은 생각보다 많은 시행착오를 필요로 합니다. 대표적으로 CORS(Cross-Origin Resource Sharing) 문제는 많은 개발자를 좌절시키는 주범이죠. 이 글은 이런 문제들을 해결하고, React와 Spring Boot 기반의 풀스택 애플리케이션을 로컬에서 성공적으로 개발할 수 있도록 돕는 실질적인 가이드가 될 것입니다.

우리는 단순히 코드를 나열하는 것을 넘어, 각 단계에서 어떤 문제가 발생할 수 있으며 어떻게 해결해야 하는지에 초점을 맞춰 설명할 예정입니다. 이 가이드를 통해 여러분은 견고한 개발 환경을 구축하고, 효율적인 API 통신 전략을 익힐 수 있을 것입니다.

개발 환경 사전 준비: 필수 도구 설치

React와 Spring Boot 프로젝트를 시작하기 전에, 필요한 개발 도구들을 미리 설치하고 설정해야 합니다. 이 과정이 제대로 이루어지지 않으면 이후 단계에서 예기치 않은 오류가 발생할 수 있습니다.

1. Java Development Kit (JDK) 설치

Spring Boot는 Java 기반 프레임워크이므로, JDK가 필수적입니다. 최소 11 버전 이상을 권장하며, LTS(Long Term Support) 버전을 사용하는 것이 좋습니다. OpenJDK나 Oracle JDK 중 하나를 선택하여 설치합니다.

설치 방법: 운영체제에 맞는 설치 파일을 다운로드하여 실행하거나, SDKMAN!과 같은 도구를 사용하여 설치할 수 있습니다.
환경 변수 설정: 설치 후 JAVA_HOME 환경 변수가 JDK 설치 경로를 가리키고, Path 환경 변수에 %JAVA_HOME%\bin이 추가되었는지 확인합니다.
확인: 터미널/명령 프롬프트에서 java -version 명령어를 실행하여 올바르게 설치되었는지 확인합니다.

2. Node.js 및 npm/yarn 설치

React 개발을 위해서는 Node.js 런타임 환경과 패키지 관리 도구인 npm 또는 yarn이 필요합니다. React 프로젝트 생성 및 의존성 관리에 사용됩니다.

설치 방법: Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치합니다. npm은 Node.js 설치 시 자동으로 포함됩니다.
yarn 설치 (선택 사항): npm이 설치된 후, npm install -g yarn 명령어로 yarn을 전역 설치할 수 있습니다.
확인: 터미널에서 node -v, npm -v, yarn -v (yarn 사용 시) 명령어를 실행하여 설치를 확인합니다.

3. 개발 IDE (IntelliJ IDEA, VS Code 등)

코드 작성 및 프로젝트 관리를 위한 IDE(Integrated Development Environment)는 필수입니다. Spring Boot 개발에는 IntelliJ IDEA Ultimate (유료) 또는 Community Edition (무료, 제한적), VS Code에 Java 확장팩을 설치하는 것을 추천합니다. React 개발에는 VS Code가 널리 사용됩니다.

IntelliJ IDEA: Spring Boot 프로젝트 생성 및 관리에 매우 유용하며, 강력한 디버깅 및 코드 자동 완성 기능을 제공합니다.
VS Code: 가볍고 빠르며, 다양한 확장팩을 통해 Java, JavaScript/TypeScript 개발 모두에 최적화될 수 있습니다.

Spring Boot 프로젝트 설정 및 간단한 API 개발

이제 백엔드를 담당할 Spring Boot 프로젝트를 설정하고, React 애플리케이션과 통신할 간단한 REST API를 구현해 보겠습니다.

1. Spring Boot 프로젝트 생성

Spring Initializr는 Spring Boot 프로젝트를 빠르고 쉽게 생성할 수 있도록 돕는 웹 서비스입니다. https://start.spring.io/ 에 접속하여 다음과 같이 설정합니다.

Project: Maven Project 또는 Gradle Project (여기서는 Maven 사용)
Language: Java
Spring Boot: 최신 안정 버전 (SNAPSHOT/M 버전 제외)
Group: com.example
Artifact: react-spring-boot-example (원하는 이름으로 지정)
Packaging: Jar
Java: 11 또는 17 (설치된 JDK 버전에 맞게)
Dependencies:
- Spring Web: RESTful API 개발에 필요한 의존성
- Lombok (선택 사항): 코드 간결화를 위해 유용

설정 후 "GENERATE" 버튼을 클릭하여 프로젝트를 다운로드하고, 압축을 해제한 뒤 선호하는 IDE로 임포트합니다.

2. 간단한 REST API 구현

프로젝트가 준비되었다면, src/main/java/com/example/reactspringbootexample 경로에 Controller 클래스를 생성하여 간단한 API 엔드포인트를 만들어 보겠습니다.

HelloController.java


package com.example.reactspringbootexample;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Arrays;
import java.util.List;

@RestController
@RequestMapping("/api") // 모든 API 엔드포인트에 /api 프리픽스 적용
public class HelloController {

    // 간단한 DTO (Data Transfer Object) 클래스
    @Data // Lombok: Getter, Setter, toString, equals, hashCode 자동 생성
    @NoArgsConstructor // Lombok: 기본 생성자
    @AllArgsConstructor // Lombok: 모든 필드를 인자로 받는 생성자
    public static class Message {
        private String id;
        private String content;
    }

    @GetMapping("/hello")
    public String hello() {
        return "안녕하세요, React와 Spring Boot 연동입니다!";
    }

    @GetMapping("/messages")
    public List<Message> getMessages() {
        return Arrays.asList(
                new Message("1", "첫 번째 메시지입니다."),
                new Message("2", "두 번째 메시지입니다."),
                new Message("3", "세 번째 메시지입니다.")
        );
    }
}

위 코드에서 @RestController는 해당 클래스가 REST API를 처리하는 컨트롤러임을 나타내며, @RequestMapping("/api")는 이 컨트롤러의 모든 메서드에 /api 경로를 기본으로 적용합니다. @GetMapping을 사용하여 HTTP GET 요청을 처리하는 엔드포인트를 정의했습니다.

Message라는 내부 클래스를 정의하여 간단한 데이터 객체를 만들었고, /messages 엔드포인트에서는 이 객체들의 리스트를 반환하도록 했습니다. Lombok의 @Data, @NoArgsConstructor, @AllArgsConstructor 어노테이션을 사용하면 Getter, Setter 및 생성자를 자동으로 생성하여 코드를 간결하게 유지할 수 있습니다.

3. Spring Boot 애플리케이션 실행

IDE에서 ReactSpringBootExampleApplication.java 파일을 찾아 메인 메서드를 실행하거나, 터미널에서 프로젝트 루트 경로로 이동하여 다음 명령어를 실행합니다.


./mvnw spring-boot:run

애플리케이션이 성공적으로 실행되면, 일반적으로 8080 포트에서 구동됩니다. 웹 브라우저에서 http://localhost:8080/api/hello 또는 http://localhost:8080/api/messages에 접속하여 API가 정상적으로 동작하는지 확인할 수 있습니다.

React와 Spring Boot 연동을 위한 로컬 개발 환경 구축 및 API 통신 실전 가이드 - wordpress, php, code, programming, development, wordpress theme, theme, wordpress, wordpress, wordpress, wordpress, wordpress, php, php

Image by doki7 on Pixabay

React 프로젝트 설정 및 API 연동 준비

이제 프론트엔드를 담당할 React 프로젝트를 설정하고, Spring Boot 백엔드와 통신할 준비를 해보겠습니다.

1. React 프로젝트 생성

터미널을 열고 프로젝트를 생성할 상위 디렉토리로 이동한 후, 다음 명령어를 실행하여 새로운 React 프로젝트를 생성합니다. 여기서는 Vite를 사용하여 더 빠르고 가벼운 개발 환경을 구축하는 것을 추천합니다.


# Vite 사용 (권장)
npm create vite@latest frontend -- --template react-ts
cd frontend
npm install

또는 Create React App (CRA)를 사용할 수도 있습니다.


# Create React App 사용
npx create-react-app frontend
cd frontend
npm start

프로젝트가 생성되면 frontend 디렉토리로 이동하여 필요한 의존성을 설치하고, 개발 서버를 시작해봅니다.


cd frontend
npm install
npm run dev # Vite의 경우
# 또는 npm start # CRA의 경우

성공적으로 실행되면, 일반적으로 Vite는 5173 포트, CRA는 3000 포트에서 React 애플리케이션이 구동되는 것을 확인할 수 있습니다.

2. 프록시 설정으로 CORS 문제 우회 (로컬 개발 환경)

React 애플리케이션(예: http://localhost:5173)에서 Spring Boot 애플리케이션(http://localhost:8080)으로 API 요청을 보내면, 기본적으로 CORS(Cross-Origin Resource Sharing) 정책 위반으로 인해 통신에 실패합니다. 이는 브라우저의 보안 정책 때문입니다.

로컬 개발 환경에서 이 문제를 가장 쉽게 해결하는 방법은 React 개발 서버의 프록시 기능을 활용하는 것입니다. React 개발 서버는 특정 경로로 들어오는 요청을 백엔드 서버로 대신 전달해주는 역할을 합니다.

Vite 프로젝트의 경우 (`vite.config.ts`)

frontend 디렉토리의 vite.config.ts 파일을 열어 다음과 같이 수정합니다.


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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': { // '/api'로 시작하는 모든 요청을 프록시합니다.
        target: 'http://localhost:8080', // Spring Boot 서버 주소
        changeOrigin: true, // 대상 서버의 호스트 헤더를 변경합니다.
        rewrite: (path) => path.replace(/^\/api/, '/api'), // 요청 경로를 재작성 (옵션)
        // secure: false, // HTTPS를 사용하지 않는 경우 (개발 시)
      },
    },
  },
})

이제 React 애플리케이션에서 /api/hello와 같이 /api로 시작하는 요청을 보내면, Vite 개발 서버가 이를 http://localhost:8080/api/hello로 포워딩해줍니다. 브라우저 입장에서는 여전히 React 개발 서버(동일 출처)에 요청하는 것으로 보이므로 CORS 문제가 발생하지 않습니다.

Create React App 프로젝트의 경우 (`package.json`)

CRA 프로젝트의 경우 frontend 디렉토리의 package.json 파일에 간단하게 "proxy" 속성을 추가합니다.


{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    // ... 기존 의존성 ...
  },
  "scripts": {
    // ... 기존 스크립트 ...
  },
  "eslintConfig": {
    // ...
  },
  "browserslist": {
    // ...
  },
  "proxy": "http://localhost:8080" // 이 한 줄을 추가합니다.
}

CRA는 proxy 설정을 통해 /api와 같이 알 수 없는 경로로 들어오는 모든 요청을 지정된 주소로 프록시합니다. Vite와 마찬가지로 브라우저의 CORS 제한을 우회할 수 있습니다.

이러한 프록시 설정은 로컬 개발 환경에서만 유효하며, 실제 배포 환경에서는 백엔드 서버에서 CORS 헤더를 직접 설정하거나, 동일 도메인으로 배포하여 문제를 해결해야 합니다.

React와 Spring Boot API 통신 구현

프록시 설정까지 마쳤으니, 이제 React 컴포넌트에서 Spring Boot API를 호출하고 응답을 화면에 표시하는 코드를 작성해 보겠습니다.

1. API 데이터 가져오기

frontend/src/App.tsx 파일을 다음과 같이 수정하여 Spring Boot에서 제공하는 /api/messages 엔드포인트에서 데이터를 가져와 표시하는 기능을 구현합니다.


import React, { useEffect, useState } from 'react';
import './App.css';

interface Message {
  id: string;
  content: string;
}

function App() {
  const [helloMessage, setHelloMessage] = useState<string>('');
  const [messages, setMessages] = useState<Message[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchApiData = async () => {
      try {
        // 1. /api/hello 엔드포인트 호출
        const helloResponse = await fetch('/api/hello');
        if (!helloResponse.ok) {
          throw new Error(`HTTP error! status: ${helloResponse.status}`);
        }
        const helloData = await helloResponse.text(); // 텍스트 응답
        setHelloMessage(helloData);

        // 2. /api/messages 엔드포인트 호출
        const messagesResponse = await fetch('/api/messages');
        if (!messagesResponse.ok) {
          throw new Error(`HTTP error! status: ${messagesResponse.status}`);
        }
        const messagesData: Message[] = await messagesResponse.json(); // JSON 응답
        setMessages(messagesData);

      } catch (e: any) {
        console.error("API 호출 중 에러 발생:", e);
        setError(`데이터를 불러오는데 실패했습니다: ${e.message}`);
      } finally {
        setLoading(false);
      }
    };

    fetchApiData();
  }, []); // 컴포넌트가 처음 마운트될 때 한 번만 실행

  if (loading) {
    return <div className="App"><h1>데이터 로딩 중...</h1></div>;
  }

  if (error) {
    return <div className="App"><h1 style={{ color: 'red' }}>{error}</h1></div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>React와 Spring Boot 연동 예제</h1>
        <p>백엔드 메시지: <b>{helloMessage}</b></p>

        <h2>Spring Boot에서 가져온 메시지 목록</h2>
        {messages.length > 0 ? (
          <ul>
            {messages.map((message) => (
              <li key={message.id}>
                ID: {message.id}, 내용: {message.content}
              </li>
            ))}
          </ul>
        ) : (
          <p>표시할 메시지가 없습니다.</p>
        )}
      </header>
    </div>
  );
}

export default App;

위 코드에서는 React의 useState 훅을 사용하여 API 응답 데이터를 저장하고, useEffect 훅을 사용하여 컴포넌트가 마운트될 때 API를 호출합니다.

fetch('/api/hello')와 같이 상대 경로로 API를 호출합니다. 이 요청은 앞서 설정한 프록시에 의해 http://localhost:8080/api/hello로 전달됩니다.
fetch API는 비동기 함수이므로 async/await 문법을 사용하여 깔끔하게 처리했습니다.
응답의 .ok 속성을 통해 HTTP 상태 코드가 200번대인지 확인하고, 에러 발생 시 setError를 통해 사용자에게 알립니다.
/api/hello는 일반 텍스트를 반환하므로 response.text()를 사용하고, /api/messages는 JSON 배열을 반환하므로 response.json()을 사용합니다.
데이터 로딩 중에는 "데이터 로딩 중..." 메시지를, 에러 발생 시에는 에러 메시지를 표시하여 사용자 경험을 개선했습니다.

2. 애플리케이션 실행 및 테스트

이제 Spring Boot 애플리케이션과 React 개발 서버를 모두 실행합니다.

Spring Boot 실행: IDE에서 실행하거나, 터미널에서 ./mvnw spring-boot:run
React 실행: frontend 디렉토리에서 npm run dev (Vite) 또는 npm start (CRA)

두 서버가 모두 정상적으로 실행되면, React 애플리케이션이 구동되는 브라우저 탭(예: http://localhost:5173 또는 http://localhost:3000)에서 Spring Boot에서 가져온 메시지가 정상적으로 표시되는 것을 확인할 수 있습니다.

개발자 도구(F12)의 네트워크 탭을 확인하면, React 애플리케이션이 /api/hello, /api/messages 경로로 요청을 보냈고, 이 요청이 프록시를 통해 Spring Boot 서버로 전달되어 성공적인 응답을 받았음을 확인할 수 있습니다. 이때 요청 URL은 React 개발 서버의 URL로 표시되며, 실제 백엔드 호출은 프록시를 통해 이루어집니다.

React와 Spring Boot 연동을 위한 로컬 개발 환경 구축 및 API 통신 실전 가이드 - man, computer, screen, desktop, imac, apple products, desktop computer, workspace, workplace, working, technology, indoors, desk, office, information, display, monitor, programmer, developer, computer, computer, desktop, information, monitor, programmer, programmer, programmer, developer, developer, developer, developer, developer

Image by Pexels on Pixabay

CORS 문제 해결 및 효율적인 개발 팁

로컬 개발 환경에서는 프록시 설정으로 CORS 문제를 쉽게 해결했지만, 배포 환경에서는 다른 접근 방식이 필요합니다. 또한, 개발 효율성을 높이기 위한 몇 가지 팁을 알아보겠습니다.

1. 배포 환경에서의 CORS 처리

실제 서비스 배포 시에는 React 애플리케이션과 Spring Boot API 서버가 다른 도메인이나 포트에서 서비스될 수 있습니다. 이때는 백엔드인 Spring Boot에서 명시적으로 CORS 헤더를 설정해줘야 합니다.

Spring Boot에서는 @CrossOrigin 어노테이션을 사용하거나, 전역 WebMvcConfigurer를 구현하여 CORS 정책을 설정할 수 있습니다.

@CrossOrigin 어노테이션 사용 (컨트롤러/메서드 레벨)

HelloController.java에 @CrossOrigin 어노테이션을 추가합니다.


package com.example.reactspringbootexample;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

// ... Message DTO ...

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173") // React 개발 서버의 Origin 허용
// 또는 @CrossOrigin(origins = {"http://localhost:5173", "https://your-production-domain.com"})
public class HelloController {
    // ... 기존 코드 ...
}

@CrossOrigin 어노테이션은 특정 출처(Origin)からの 요청만 허용하도록 설정합니다. origins = "*"는 모든 출처를 허용하지만, 보안상 권장되지 않습니다. 필요한 출처만 명시적으로 지정하는 것이 좋습니다.

전역 CORS 설정 (`WebMvcConfigurer` 구현)

여러 컨트롤러에 동일한 CORS 정책을 적용해야 한다면, 전역 설정을 사용하는 것이 효율적입니다. src/main/java/com/example/reactspringbootexample 경로에 WebConfig.java 파일을 생성합니다.


package com.example.reactspringbootexample;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // /api/로 시작하는 모든 경로에 대해
                .allowedOrigins("http://localhost:5173", "http://localhost:3000") // 허용할 Origin
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 허용할 HTTP 메서드
                .allowedHeaders("*") // 모든 헤더 허용
                .allowCredentials(true) // 자격 증명(쿠키, HTTP 인증) 허용
                .maxAge(3600); // Pre-flight 요청 캐싱 시간 (초 단위)
    }
}

이 설정은 /api/** 경로로 들어오는 모든 요청에 대해 지정된 출처와 메서드를 허용합니다. 이렇게 하면 각 컨트롤러마다 @CrossOrigin을 붙일 필요 없이 일관된 CORS 정책을 적용할 수 있습니다.

2. 로컬 개발 프록시 vs 백엔드 CORS 설정 비교

로컬 개발 환경에서 프록시를 사용하는 것과 백엔드에서 CORS를 설정하는 것에는 명확한 차이와 장단점이 있습니다.

특징	React 개발 서버 프록시 (Vite/CRA)	Spring Boot CORS 설정
목적	로컬 개발 중 CORS 문제 회피	다중 출처 환경에서 CORS 정책 준수
설정 위치	React 프로젝트 (`vite.config.ts` 또는 `package.json`)	Spring Boot 프로젝트 (`@CrossOrigin` 또는 `WebMvcConfigurer`)
작동 방식	프론트엔드 개발 서버가 백엔드 서버로 요청을 대리 전달	백엔드 서버가 HTTP 응답 헤더에 CORS 관련 정보 추가
장점	백엔드 코드 수정 없이 즉시 적용 가능, 개발 편의성 높음	실제 배포 환경에서 필수적, 보안 정책을 백엔드에서 중앙 관리
단점	배포 환경에서는 작동하지 않음, 개발 환경에만 국한	백엔드 코드 수정 및 재배포 필요, 개발 초기 설정 시 번거로울 수 있음
권장 사항	로컬 개발 시 강력히 권장	테스트 및 배포 환경 시 필수적으로 적용

3. 환경 변수 활용 (API URL 관리)

개발 환경과 배포 환경에서 API 엔드포인트 URL이 달라지는 경우가 많습니다. 이를 하드코딩하면 유지보수가 어려워지므로, 환경 변수를 활용하는 것이 좋습니다.

Vite 프로젝트의 경우

Vite는 .env 파일을 통해 환경 변수를 관리합니다. frontend 디렉토리의 루트에 .env.development 파일을 생성합니다.


VITE_API_BASE_URL=/api

배포 환경을 위한 .env.production 파일에는 실제 배포된 API 서버의 URL을 적을 수 있습니다.


VITE_API_BASE_URL=https://your-production-api.com/api

React 코드에서는 import.meta.env.VITE_API_BASE_URL로 접근할 수 있습니다.


// App.tsx
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

// ... fetch 코드
const helloResponse = await fetch(`${API_BASE_URL}/hello`);

Create React App 프로젝트의 경우

CRA는 .env 파일을 사용하며, 변수 이름은 REACT_APP_으로 시작해야 합니다. frontend 디렉토리 루트에 .env.development 파일을 생성합니다.


REACT_APP_API_BASE_URL=/api

React 코드에서는 process.env.REACT_APP_API_BASE_URL로 접근합니다.


// App.tsx
const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;

// ... fetch 코드
const helloResponse = await fetch(`${API_BASE_URL}/hello`);

이렇게 환경 변수를 사용하면 개발/배포 환경에 따라 API 호출 URL을 유연하게 변경할 수 있어 효율적입니다.

마무리: 견고한 풀스택 애플리케이션의 시작

이 가이드를 통해 여러분은 React와 Spring Boot를 연동하여 로컬 개발 환경을 구축하고, API 통신을 성공적으로 구현하는 방법을 익혔을 것입니다. 우리는 다음 핵심 단계들을 살펴보았습니다.

필수 개발 도구 설치 및 환경 설정
Spring Boot 프로젝트 생성 및 간단한 REST API 구현
React 프로젝트 생성 및 로컬 개발 환경에서 CORS 문제를 해결하기 위한 프록시 설정
React 컴포넌트에서 Spring Boot API를 호출하고 데이터를 화면에 표시하는 실전 코드 작성
배포 환경에서의 CORS 처리 방법과 효율적인 API URL 관리를 위한 환경 변수 활용 팁

이 지식은 React와 Spring Boot 기반의 풀스택 웹 애플리케이션 개발을 위한 견고한 기반이 될 것입니다. 이제 여러분은 데이터를 가져와 시각화하고, 사용자 인터랙션을 백엔드에 전달하는 등 더욱 복잡하고 기능적인 애플리케이션을 구현할 준비가 되었습니다.

로컬 개발 환경에서 원활한 연동은 전체 개발 프로세스의 속도를 결정하는 중요한 요소입니다. 이 가이드가 여러분의 개발 여정에 큰 도움이 되기를 바랍니다. 궁금한 점이나 추가적으로 다루었으면 하는 내용이 있다면 댓글로 알려주세요. 함께 성장하는 개발 커뮤니티를 만들어가요!

📌 함께 읽으면 좋은 글

[커리어 취업] 개발자 연봉 협상 성공 전략: 시장 가치 파악부터 설득까지
[튜토리얼] Prometheus와 Grafana를 활용한 애플리케이션 성능 모니터링 시스템 구축 실전 가이드
[튜토리얼] VS Code Dev Containers 완벽 가이드: 개발 환경 컨테이너화로 생산성 극대화

이 글이 도움이 되셨다면 공감(♥)과 댓글로 응원해 주세요!
궁금한 점이나 다루었으면 하는 주제가 있다면 댓글로 남겨주세요.

'튜토리얼' 카테고리의 다른 글

GitHub Actions를 활용한 웹 애플리케이션 자동 배포 CI/CD 파이프라인 구축 실전 가이드 (0)	2026.05.18
Prometheus와 Grafana를 활용한 애플리케이션 성능 모니터링 시스템 구축 실전 가이드 (0)	2026.05.18
VS Code Dev Containers 완벽 가이드: 개발 환경 컨테이너화로 생산성 극대화 (0)	2026.05.17
Docker Compose 활용: 로컬 다중 서비스 개발 환경 완벽 구축 가이드 (0)	2026.05.16
Docker 컨테이너 원격 디버깅 완벽 가이드: 효율적인 개발 환경 구축 (0)	2026.05.15

현재글React와 Spring Boot 연동: 로컬 개발 환경 구축 및 API 통신 실전 가이드

강코의 코딩 일기

[ Git ] https://github.com/Grren99 기억 해야 하는 것들이 너무 많다.

개발자, 개발 도구, ci/cd, 개발도구, 프론트엔드, DevOps, 개발 생산성, 워크플로우, 생산성, 클린코드, RAG, llm, 머신러닝, cli, 백엔드, 개발생산성, 컨테이너, Ai, 자동화, 웹개발,

Today :
Yesterday :

강코의 코딩 일기