TIL내일배움캠프 13주차 Spring Boot와 React 통합

오늘의 키워드

• Spring Boot와 React 통합
• 분리된 저장소 방식
• 단일 저장소(모노레포) 방식
• Full Stack Application Bundling
• Docker 및 컨테이너화

오늘의 내용

Spring Boot와 React 통합 방법

1. 분리된 저장소 방식

• 구조: 백엔드(Spring Boot)와 프론트엔드(React)를 각각 독립적인 저장소에서 관리한다
• 통합 방법: RESTful API를 통해 통신하고 React에서 Axios 같은 HTTP 클라이언트를 사용하여 Spring Boot 백엔드와 통신한다
• 배포: 각각 독립적으로 Heroku, AWS 등 클라우드 플랫폼에서 배포한다

2. 단일 저장소(모노레포) 방식

• 구조: 백엔드와 프론트엔드 프로젝트가 하나의 저장소에서 관리해 루트 디렉터리에 backend와 frontend 서브디렉터리를 포함한다
• 빌드 및 실행: 백엔드는 Maven 또는 Gradle을 프론트엔드는 npm/yarn을 사용해 두 서버를 동시에 실행할 수 있는 스크립트를 작성한다
• 프록시 설정: 개발 중에는 React 개발 서버가 API 요청을 Spring Boot 서버로 프록시하도록 설정한다

3. Full Stack Application Bundling

• 빌드 시 프론트엔드 포함: React 앱을 빌드하여 정적 파일로 만들고 이를 Spring Boot의 src/main/resources/static 디렉토리에 복사한다
• 단일 서버: Spring Boot 서버가 정적 파일(React 앱)을 제공하고 API 요청을 처리한다
• 배포: Spring Boot 애플리케이션으로 통합 배포한다

4. Docker 및 컨테이너화

• 컨테이너화: Docker를 사용하여 백엔드와 프론트엔드를 각각 컨테이너화 시킨다
• Docker Compose: docker-compose를 사용하여 여러 컨테이너를 한 번에 관리하고 실행한다
• 배포: 전체 애플리케이션을 하나의 Docker Compose 파일로 관리하여 배포를 단순화한다

오늘의 회고

오늘은 Spring Boot와 React를 통합하는 여러 가지 방법에 대해 했다. 각 방법의 장단점과 사용 사례를 통해 어떤 방식이 프로젝트에 가장 적합한지 알 수 있었고 특히, Docker를 사용한 컨테이너화 방식은 확장성과 이식성을 제공하여 매우 유용할 것으로 생각되지만 실제 프로젝트에 적용을 할 수 있을지는 의문이다 😂