서비스 통합
현재 상황
node.js에서 동작하는 react와 BE Spring에서 동작하는 백엔드 앱이 존재한다
JS fetch API를 통해 데이터 불러와서 CRUD 진행하려고함
FE
리액트의 렌더링
브라우저의 HTML DOM 트리와 별개의 ReactDOM을 갖고있다.
ReactDOM은 컴포넌트의 상태가 변하면 ReactDOM은 이를 감지하고 HTML을 수정한다.
이 ReactDOM이 HTML DOM에 업데이트 되어야 확인 가능
이러한 과정을 Rendering
최초 렌더링 시, ReactDOM트리가 존재하지 않는 상태에서 리액트가 각 컴포넌트의 render()함수를 호출해 DOM트리를 구성하는 과정 => 마운팅(Mounting)
마운팅 => 생성자 + render()로 구성, 마운팅 이후 componentDidMount 함수를 콜한다.
해당 함수에서 백엔드 API를 콜한다.
마운팅 과정에 생성자를 호출하는 부분에서 백엔드 API를 콜해 데이터를 받아오지 않는 이유는 받아온 데이터를 저장할 프로퍼티가 완전히 준비되지 않았기 떄문이다.
해당 url에 GET방식 request 요청 시 저장된 데이터를 반환한다.
BE
해당 예제 진행하게 되면 CORS 에러를 확인하게 된다.
CORS
- Cross Origin Resource Sharing(교차 출처 리소스 공유)
- 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 앱이 다른 출처의 선택한
자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제. - 웹앱은 리소스가 자신의 출처(도메인,프로토콜,포트)와 다를 때 출처 HTTP 요청을 실행.
FE서버 도메인(localhost:3000)에서 fetch()를 통해 BE 도메인(localhost:8080)에 요청을 보낼 경우
브라우저는 2개의 요청을 보낸다.
1. OPTIONS 메서드를 사용하는 요청으로 이 리소스에 대해 어떤 HTTP 메서드를 사용할 수 있는지 확인할 수 있다. 이 때 리소스는 (localhost:8080/todo)
타켓 도메인은 요청의 origin과 비교해 자신과 같은 origin이면 요청을 수행한다. 현재는 거절된다.
2. OPTIONS 요청이 반환되고 CORS 여부 및 메서드 요청 사용 가능 여부를 확인하면 보내려고 했던 원래 요청을 보낸다.
cross origin 요청 종류에는 Simple requests, Preflighted requests, Requests with credentials 등이 있는데 이중 Preflighted requests만 OPTIONS 메소드를 통해 요청을 확인한다.
CORS를 가능하게 하려면 백엔드에서 CORS 방침 설정을 해줘야한다.
다음은 OPTIONS 요청이 성공적으로 반환되는 경우의 응답이다.
`
