Front, Back 연동하기 위한 기본 지식 정리
## 프론트엔드(React) 배포 방법 ##
React 같은 경우 SPA(Single Page Application), CSR(Client side rendering)으로 build하면 정적 파일이 생기는데 배포하는 방법에 대해서 정리해보고자 한다.
Case 1 : Spring + react 묶어서 배포
react를 빌드하면 /build 정적 리소스 파일을 spring의 src/main/resources/main/static에 넣어 배포
장점
○ 한 번에 묶어 배포할 수 있음
○ 간편함
○ 서버 한대로 띄울 수 있음
단점
○ FE/BE 결과, 서버 구분이 되어 있지 않음
○ BE만 확장하기 어려움
Case 2 : nginx + react 배포
react 빌드 결과의 정적 리소스 파일을 nginx와 같은 웹서버와 연결하여 배포
장점
○ FE/BE 서버 분리하여 배포 가능 (독립적인 운영 가능)
○ FE만 서버 확장 가능
단점
○ BE에서 CORS 문제 해결해야 함
(Spring 사용시 Spring Security쪽에서 CORS 관련 설정해줘야 함)
Case 3 : AWS의 S3 + CloudFront 사용하여 배포
react 빌드 결과의 정적 리소스 파일을 S3에 올림. 정적 리소스 파일이기에 S3에서 index.html만 연결시켜주면 필요한 리소스를 s3링크로 요청해 받음. FE를 서버 없이 배포할 수 있음(serverless 배포).
CloudFront 기능을 추가하면 더 좋음.
CloudFront 관련 내용
*참고 : https://earth-95.tistory.com/128
## 프론트엔드와 백엔드를 분리하는 이유 ##
Frontend(클라이언트) : 서비스를 편하게 이용할 수 있는 사용자 인터페이스를 담당
Backend(서버) : 사용자들이 원하는 정보 또는 데이터를 관리, 제공
1. 확장성
코드가 분리되어 있기 때문에 코드 최적화에 용이
2. 자원 최적화
렌더링 과정 없이 프론트엔드에 JSON을 전송하고 끝남. 백엔드가 일을 덜 하기에 서버 자원 최적화가 원활하게 이루어짐
3. 기술 전환이 상대적으로 쉬움
프론트, 백이 별도로 유지가 되기에 서로에게 영향없이 쉽게 기술 전환 가능
4. 프론트엔드, 백엔드 서버 구조 예시
## CORS 및 쿠키 문제 ##
백엔드 서버와 프론트엔드 서버가 서로 다른 도메인을 가지는 경우, 다음과 같은 두 가지 문제점이 발생한다. 첫째, 기본적인 CORS 정책은 다른 오리진의 자원에 접근하는 것을 막는다는 문제이다. 따라서 백엔드 서버에게 API 요청을 보내면 CORS 정책에 의해 요청이 거부당할 것이다. 이를 해결하려면 백엔드 서버 쪽에서 CORS를 허용하기 위한 별도의 설정을 해줘야 한다(SpringBoot 사용시 Spring Security 쪽에서 설정). 다음으로, 다른 오리진에 대한 요청 시에는 쿠키를 전송 혹은 수신할 수 없다는 문제이다. 즉 백엔드 서버에게 API 요청을 보내더라도 쿠키가 설정되지 않기 때문에 로그인 등의 기능을 구현하는 것이 어려워진다. 이를 해결하려면 백엔드 서버에게 API 요청을 보낼 때 JavaScript 단에서 특정 설정(XMLHttpRequest.withCredentials 옵션을 true로 설정하거나, fetch API라면 credentials 옵션을 include로 설정)을 해줘야 하며, 백 엔드 서버 쪽에도 응답의 헤더에서 Access-Control-Allow-Credentials 옵션을 true로 설정해줘야 한다.
※ 오리진 (Origin)
프로토콜, 도메인, 포트를 합친 부분이다. 예를 들어, URL이 https://www.naver.com:8000/users/123이면 오리진은 https://www.naver.com:8000이다. 참고로, 서브 도메인이 있는 오리진과 없는 오리진은 다른 오리진으로 취급된다.