[개인 프로젝트 VSCode] React, SpringBoot, mysql 개발 환경 연동 2

https://siyoonn.tistory.com/155 [React, SpringBoot, mysql 개발 환경 연동 1]

[개인 프로젝트 VSCode] React, SpringBoot, mysql 개발 환경 연동 1

---

블로그에 적지 않았지만 해놓은 부분
☞ 리액트 쪽 js에 비동기 처리 코드 작성 완료
☞Java 쪽 MVC 패턴으로 폴더와 파일을 만들고 컨트롤러에 비동기 요청을 받을 test 메서드를 구현 완료
☞ application.properties 파일에 DB연결 정보 작성 완료

 

이번글에서는 프론트와 백엔드 포트를 연결해 풀스택 환경을 설정하는 과정을 정리해 보았다. 

---

1. 리액트와 자바 기본 port

• 리액트 port: 3000
• 자바(Spring Boot) port: 8084

2. package.json 파일 수정

• "homepage"
  이 설정을 추가하면 리액트가 빌드될 때 기본 경로를 내가 지정한 경로로 할 수 있다.
  설정 후 yarn start를 하면 http://localhost:3000/내가 원하는 경로로 접근할 수 있다.
• "proxy"
  proxy 설정을 통해 리액트 개발 서버가 자동으로 해당 경로를 자바 백엔드로 proxy 해서 API 요청을 처리할 수 있도록 한다.
  이렇게 하면 클라이언트와 서버 간의 통신이 원활해지고, 개발 중에 CORS 에러를 피할 수 있다.
• "start": "PORT=3000 react-scripts start"
  리액트 앱이 3000 포트에서 실행되도록 지정한다.
  기본적으로 리액트는 3000 포트를 사용해서 이 설정은 명시적이지 않지만, 다른 포트를 원할 경우 변경할 수 있다.

// 다음과 같이 세 가지 항목을 추가해주었다.
{
  "homepage": "/내가원하는경로",
  "proxy": "http://localhost:8084/내가원하는경로",
  "scripts": {
    "start": "PORT=3000 react-scripts start"
  }
}

3. application.properties 파일 수정

• server.servlet.context-path=/내가 원하는 경로
  자바 애플리케이션의 기본 경로를 설정해 주었다.
  모든 API 요청은 지정한 경로로 시작해야 하고, 이는 클라이언트에서 API 호출 시 경로를 올바르게 지정하는 데 필요하다.
• server.port=8084 
  자바 백엔드 서버가 8084 포트에서 실행되도록 지정했다.

# context-path
server.servlet.context-path=/내가원하는경로
server.port = 8084

# 정적 리소스의 위치를 지정 (리액트 빌드 폴더)
spring.web.resources.static-locations=classpath:/static/

4. CORS 설정

CORS(Cross-Origin Resource Sharing) 설정을 통해 리액트(http://localhost:3000)에서 백엔드에 요청할 수 있도록 허용해 주었다.
이 설정은 다른 도메인(포트)에서 API에 접근할 때 필요하다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 경로에 대해 CORS 설정
        .allowedOrigins("http://localhost:3000") // React 앱의 URL
        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
        .allowedHeaders("*");
    }
}

5. 비동기 처리 테스트 코드 작성

import React, { useEffect } from "react";
import apiClient from "../../Common/ApiClient";

const MainHome = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await apiClient.get("/test"); // /test 경로로 GET 요청
        console.log("API 호출 성공:", response.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return <div>main home</div>;
};

export default MainHome;

6. 베이스 URL 설정 (.env  환경 변수 설정)

업무 할 때는 .properties 파일로 관리를 했었는데 개인 프로젝트니까 한 번도 사용 안 해본. env로 베이스 url을 설정해 보았다.
properties 파일은 주로 Java 기반 프로젝트에서 많이 사용되고,. env 파일은 JavaScript 기반 프로젝트에서 널리 사용되는 방식이라고 한다.
※ 만약 개인프로젝트 시 디비 연결 정보도 .env 파일로 관리하려 한다면, 프론트엔드와 백엔드는 다른 환경 이므로 각각 별도의 .env 파일을 사용해야 한다. 
☞ 프론트엔드: .env 파일에 API URL이나 공개 API 키 등 브라우저에서 사용해도(노출되어도) 괜찮은 정보만 저장.
☞ 백엔드: .env 또는 application.properties 파일에 DB 연결 정보 같은 민감한 데이터를 저장하여 서버에서만 접근 가능하게 관리.
* 백엔드의 .env 파일은 .gitignore 파일로 관리해서 민감한 정보가 git에 올라가지 않도록 해준다.

• 리액트 프로젝트의 루트 디렉터리에. env 파일을 생성해 주었다. (package.json 파일이 있는 동일한 위치에 두어야 함)
•  . env는 "environment"의 약자로 환경 변수 파일이다. 애플리케이션에서 사용되는 중요한 설정 정보를 보관하는 데 사용된다.
• 이 파일은 개발 환경에서 관리되며, 민감한 정보를 노출하지 않기 위해 소스 코드에 포함시키지 않는 것이 좋다.

├── package.json
├── .env          <-- 파일 위치
├── src
│   ├── App.js
│   ├── Common
│   │   └── ApiClient.js
│   ├── views
│   │   └── Home
│   │       └── MainHome.js
│   └── index.js
└── ...

//.env 파일 안에 코드
REACT_APP_API_BASE_URL=http://localhost:8084/내가정한경로

7. API 클라이언트 설정 

다른 곳에서 반복적으로 베이스 URL을 작성하지 않도록 Axios를 이용해 API 호출을 관리하는 클라이언트를 생성했다.

import axios from "axios";

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

export default apiClient;

8. App.js 및 index.js 설정

App.js에서 라우팅 설정을 하고, index.js에서는 React Router의 basename을 설정하여 기본 경로를 원하는 경로로 설정했다.

// App.js
import { Route, Routes } from "react-router-dom";
import MainHome from "./views/Home/MainHome";

function App() {
  return (
    <Routes>
      <Route path="/" element={<MainHome />} />
    </Routes>
  );
}

export default App;

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <BrowserRouter basename="/내가원하는경로">
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

---

※ 결과
yarn start를 하면 "http://localhost:3000/내가 설정한 경로" URL로 리액트 앱이 정상적으로 로드되고,
화면에 "main home"이라는 텍스트가 표시되며, API 요청 성공 콘솔도 잘 나온다.

결과

결과