react + spring boot 연계하기

먼저 react 환경과 spring boot 백엔드 환경을 구축한다.

 

아래 글 2개를 참고한다.

 

https://cgdev.tistory.com/43 

react + typescript 개발환경 세팅하기

https://cgdev.tistory.com/44

spring boot 개발환경

이제 react 환경과 spring boot 환경을 연계한다.

 

이제 늘 그랬듯이 Gemini에 물어본다. (Copilot이 안되서 Gemini에 물어봄)

React with TypeScript와 Spring Boot 환경을 연계하면서 백엔드와 프론트엔드를 분리 개발하고 효율적인 소통을 가능하게 합니다.expand_more

연계 방법은 크게 두 가지로 나눌 수 있습니다.

1. REST API를 통한 연계:

장점:
가장 일반적이고 안정적인 방법입니다.exclamation
다양한 프로그래밍 언어와 프레임워크를 지원합니다.exclamation
문서화가 잘 되어 있어 배우기 쉽습니다.

단점:
오버헤드가 발생할 수 있습니다.
상태 관리가 복잡해질 수 있습니다.expand_more

연계 방법:
1. Spring Boot 백엔드에서 REST API를 구축합니다.
2. React 프론트엔드에서 Axios 또는 Fetch API와 같은 라이브러리를 사용하여 API를 호출합니다.
3. API 응답 데이터를 React 컴포넌트에서 사용합니다.

2. WebSocket을 통한 연계:

장점:
실시간 데이터 갱신에 적합합니다.expand_more
REST API보다 더 적은 오버헤드를 발생시킵니다.expand_more

단점:
REST API만큼 널리 사용되지 않습니다.exclamation
배우기 좀 더 어려울 수 있습니다.

연계 방법:
1. Spring Boot 백엔드에서 WebSocket 서버를 구축합니다.
2. React 프론트엔드에서 SockJS 또는 WebSocket 라이브러리를 사용하여 서버에 연결합니다.
3. 서버와 클라이언트 간에 메시지를 주고받습니다.

참고 자료:
Spring Boot + React 퀵 스타트 with Gradle
[Spring Boot + React] STOMP 로 실시간 채팅 (Java17, TypeScript)]([유효하지 않은 URL 삭제됨])expand_more
React+Spring+DB 연결해서 사용하기

추가적으로 고려할 사항:
프록시 설정: 백엔드와 프론트엔드가 서로 다른 도메인에 있는 경우 프록시 설정이 필요할 수 있습니다.
CORS 설정: 백엔드에서 CORS 헤더를 설정하여 프론트엔드에서 API를 호출할 수 있도록 허용해야 합니다.expand_more
상태 관리: 복잡한 애플리케이션의 경우 Redux 또는 MobX와 같은 상태 관리 라이브러리를 사용하는 것이 도움이 될 수 있습니다.
보안: 사용자 인증 및 인증, 데이터 암호화와 같은 보안 조치를 시행해야 합니다.exclamation
React with TypeScript와 Spring Boot 환경을 연계하면 효율적이고 유지 관리 가능한 웹 애플리케이션을 개발할 수 있습니다. 위에 설명된 방법과 추가 고려 사항을 참고하여 자신에게 맞는 연계 방법을 선택하시기 바랍니다.

 

오 생각보다 괜찮다. 일단 REST API로 연계를 해본다.

 

1. spring boot REST API 생성

위에 링크대로 spring boot 환경을 만들었다면 이미 아래와 같이 /hello 가 있다. 이걸 아래와 같이 JSON을 던지도록 수정한다.

package com.example.demo;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    @ResponseBody
    public ResponseEntity<String> hello() {
        String data = "{\"message\": \"Hello World!\"}";
        return ResponseEntity.ok(data);
    }
}

DemoApplication 을 실행하고 http://localhost:8080/hello 로 접근하면 화면에 " {"message": "Hello World!"} "가 뜬다.

 

2. react with typescript 에서 연계하기

이제 react 환경에서 Fetch API를 활용해서 접근하는 소스를 Gemini에 물어보자

 

다음은 React TypeScript에서 Fetch API를 활용하여 Spring Boot 환경 /hello 데이터를 가져오는 소스 코드입니다.

1. 프로젝트 설정:

React TypeScript 프로젝트를 생성합니다.

2. 코드 작성:

App.tsx:

TypeScript

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

const App: React.FC = () => {
  const [data, setData] = useState<string>('');

  useEffect(() => {
    fetch('/hello')
      .then(response => response.json())
      .then(responseData => {
        setData(responseData);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div className="App">
      <h1>Hello from Spring Boot!</h1>
      <p>{data}</p>
    </div>
  );
};

export default App;

코드를 사용할 때는 주의가 필요합니다.
content_copy

3. 실행:

React 프로젝트를 실행합니다.
브라우저에서 http://localhost:3000 주소로 이동합니다.

설명:

App 컴포넌트는 useState 훅을 사용하여 data 상태 변수를 선언합니다. 이 변수는 /hello 엔드포인트에서 가져온 데이터를 저장합니다.
useEffect 훅은 컴포넌트가 처음 렌더링될 때 한 번 실행됩니다. 이 훅은 fetch API를 사용하여 /hello 엔드포인트에 GET 요청을 보냅니다. 요청이 성공하면 응답 데이터를 JSON 형식으로 파싱하고 data 상태 변수에 저장합니다. 요청이 실패하면 오류 메시지를 콘솔에 출력합니다.
return 구문은 컴포넌트의 JSX 코드를 반환합니다. 이 코드는 "Hello from Spring Boot!"라는 제목과 data 상태 변수에 저장된 데이터를 표시하는 단락을 포함합니다.

참고:

위 코드는 기본적인 예시이며 실제 프로젝트에서는 더 많은 기능을 추가할 수 있습니다.
Spring Boot 백엔드에서 /hello 엔드포인트를 구현해야 합니다. 이 엔드포인트는 "Hello, World!"와 같은 메시지를 반환해야 합니다.

추가적으로 고려할 사항:

에러 처리: 요청이 실패하는 경우 적절한 에러 메시지를 표시해야 합니다.
로딩 상태 표시: 데이터를 가져오는 동안 로딩 상태를 표시할 수 있습니다.
캐싱: 데이터를 캐싱하여 성능을 향상시킬 수 있습니다.

이 코드가 도움이 되었으면 좋겠습니다!

 

기존의 App.tsx를 위에 코드로 대체한다. 

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

const App: React.FC = () => {
  const [data, setData] = useState<string>('');

  useEffect(() => {
    fetch('/hello')
      .then(response => response.json())
      .then(responseData => {
        setData(responseData.message);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div className="App">
      <h1>Hello from Spring Boot!</h1>
      <p>{data}</p>
    </div>
  );
};

export default App;

위에 Gemini가 알려준 코드에서 다른건 setData(responseData.message); 뿐이다.

JSON 형식으로 백엔드가 던져주기 때문에 맞춰주기 위해 수정했다.   

 

package.json 파일에 아래 사항을 추가한다.

 "proxy": "http://localhost:8080",

 

그리고 http://localhost:3000/ 으로 접근하면 아래와 같이 뜬다.

Hello from Spring Boot!
Hello World!

 

결론은 Gemini도 쓸만하다. 앞으로 Copilot과 Gemini를 섞어서 쓸 듯하다.