인프런 커뮤니티 질문&답변

안녕하세요 정보근입니다:)

리액트, 뷰 등을 사용할 경우에는 두 개의 서버를 실행해야 합니다.

하나는 리액트로 만든 자바스크립트 소스를 전달할 웹 서버,

다른 하나는 스프링이 실행되는 웹 애플리케이션 서버(이하 WAS)입니다.

사용자가 접속하는 서버는 웹 서버고,

웹 서버는 리액트로 만든 자바스크립트 파일과 빈 HTML 파일 등을 클라이언트에 응답합니다.

그럼 클라이언트에서는 리액트를 실행할 수 있을 것이고요.

제가 리액트 경험은 없지만 뷰 경험에 비춰 말씀드려보자면,

각 화면을 구성할 때 특정 URL을 호출해서 데이터를 받아온 뒤

그 데이터를 이용해 화면을 그릴 수 있도록 되어 있을 거에요.

이 때 호출하는 URL이 WAS의 각 API가 되어야 합니다.

화면이나 컴포넌트 단위로 필요한 데이터를 조회하기 위해 API를 호출하면,

스프링에서 데이터를 조회한 뒤 데이터만 내려줄 것이고요.

그럼 클라이언트의 리액트는 데이터를 이용해 화면을 갱신합니다.

CSR은 기본적으로 이런 구조라 할 수 있어요.

정리하자면 클라이언트는 웹 서버에서 자바스크립트 애플리케이션을 받아오고,

이후 각 화면을 조회할 때는 자바스크립트 애플리케이션에서 WAS의 API를 호출해 데이터를 받아오고,

받아온 데이터를 이용해 새로 화면을 그립니다.

반면 SSR 방식은 URL을 호출하면,

데이터를 조회한 뒤 HTML 템플릿과 결합해 최종적인 HTML 파일을 내려준다는 차이가 있습니다.

CSR, SSR, Single Page Application이란 키워드로 더 검색해보셔도 도움이 될 겁니다.

참고로 강의의 데모 프로젝트는 SSR 방식을 사용해 동작하지만,

이후 리액트, 뷰 등을 사용해보고 싶은 분들을 위해 API 개발도 포함되어 있습니다.

감사합니다.

안녕하세요, 인프런 AI 인턴입니다. tamizy님.

프론트엔드(React)와 백엔드(Spring Boot)를 결합하는 것은 모던 웹 개발에서 중요한 기술입니다. 초기 단계에서는 개념을 간단하게 이해하고 시작하는 것이 중요합니다.

1. 프론트엔드와 백엔드의 역할

   • 프론트엔드(React): 사용자 인터페이스(UI)를 담당하며, 사용자와의 상호작용을 처리합니다. 브라우저에서 실행됩니다.
     
   • 백엔드(Spring Boot): 서버에서 실행되어 데이터베이스와의 통신 및 비즈니스 로직을 처리합니다. 주요 데이터를 저장하고, 프론트엔드에서 요청한 데이터를 전달합니다.
     

2. 연결 방식

   • 주로 HTTP 프로토콜을 사용해 프론트엔드와 백엔드 간에 데이터 교환이 이루어집니다.
     
   • 프론트엔드에서 API 요청(주로 RESTful API)을 보내면, 백엔드에서 이 요청을 처리하여 필요 데이터를 응답합니다.
     

3. 간단한 연결 과정

   • 백엔드(Spring Boot): RESTful API 엔드포인트를 설정합니다. 이는 /api/data 형태로 URL이 세팅되며, 특정 데이터 요청에 대한 응답을 반환합니다.
     
   • 프론트엔드(React): fetch 혹은 axios와 같은 라이브러리를 사용하여 백엔드 API에 요청을 보내고 데이터를 받아옵니다.
     
   • CORS 설정: 서로 다른 도메인 간 요청이 가능하도록 백엔드에서 CORS(Cross-Origin Resource Sharing)를 설정해야 합니다.
     

4. 참고할 자료

   • Spring Boot API와 리액트 연동이 궁금합니다, 이 링크를 통해 비슷한 프로젝트 연결에 대한 상세한 정보와 방법을 확인하실 수 있습니다.
     

도움이 되셨길 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.