개발자
대학생이고... 프로젝트 과목 1학기 과제로 진행하고 있습니다!! 백엔드를 스프링부트 3.0이상 버전으로 프론트를 리액트로 진행중이고 스프링을 EC2 Ubuntu에 넣고 리액트를 S3로 정적 웹호스팅해서 각각 서버는 열리는데 서로 연동을 어떻게 해야할지 모르겠습니다... 아시는분들 도와주실수 있나요...??
답변 1
익명
작성자
2024년 05월 22일
네 맞아요!!
김인후
software engineer • 2024년 05월 22일
사실 연동이라기보단 통신에 가까운 거 같습니다. 따라서 프론트(React)에서 HTTP 통신을 위해 fetch, axios, react query 등등을 사용하여 원하는 데이터를 백엔드에 요청하여 받아와야합니다. 그리고 백엔드에서는 그러면 요청을 받고 데이터를 응답해주기 위해서 API를 설계하고 만드시면 됩니다!
익명
작성자
2024년 05월 22일
아!! 감사합니다!!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 05월 22일
프로젝트를 진행하시면서 어려움을 겪고 계신 것 같아서 마음이 아파요. 말씀해주신 내용에 따르면, 스프링 부트 백엔드가 EC2에서 동작하고 리액트 프론트엔드가 S3에서 호스팅되는 설정을 가지고 계신 것 같습니다. 프론트와 백엔드의 연동은 HTTP API를 통해 이루어집니다. 즉, 리액트 애플리케이션에서 axios나 fetch와 같은 HTTP 클라이언트 라이브러리를 사용하여 백엔드 서버에 요청을 보내고 응답을 받는 형태로 동작합니다. 따라서, 애플리케이션 가운데 연동 부분만 생각하면 사실상 리액트는 스프링 부트가 있는 서버에 요청(request)을 보내고 그 결과(response)를 받는 클라이언트(client) 역할을 하게 됩니다. 하지만 여기서 중요한 점은 CORS(Cross-Origin Resource Sharing)입니다. 리액트 애플리케이션이 localhost 혹은 S3 등의 다른 출처(origin)에서 동작하는 경우, 브라우저의 보안 정책(Same-Origin Policy) 때문에 다른 출처의 스프링 부트 서버에 직접 요청을 보낼 수 없습니다. 따라서 스프링 부트 측에서 CORS를 설정하여 리액트 애플리케이션이 요청하는 출처를 허용해줘야 합니다. Spring Boot에서는 @CrossOrigin 어노테이션을 사용하여 간단하게 CORS를 설정할 수 있으며, 더 세밀한 설정이 필요하다면 WebMvcConfigurer를 구현하거나 확장하는 방법도 있습니다. 이런 식으로 백엔드와 프론트엔드가 연동되어 서로 데이터를 주고받으면 됩니다. 그러니 스프링 부트에서 제공하는 API 엔드포인트에 맞춘 요청을 작성해서 리액트 앱의 해당 로직에 넣어주시면 됩니다. 그리고 한 가지 더, S3에서 정적 웹 호스팅할 때 CloudFront CDN을 통해 HTTPS를 지원받는 것도 고려해보세요. 이렇게 하면 사용자들에게 안전한 연결을 제공함과 동시에 캐싱 등 추가적인 이점을 받을 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!