안녕하세요, 오늘은 스프링부트 리액트 프로젝트 구조에 대해 알아보았습니다.
React + Spring boot 프로젝트 구조
※ 데이터 통신이 일어나는 순서
(1) 'Web Browser'에서 React 어플리케이션의 URL로 접속
(2) 'Web Browser'에서 요청한 URL에 따라 'React-Router'에서 해당 URL에 해당하는 페이지의 내용을 렌더링하는 최상위 'Component'를 불러온다.
(3) 'Component'가 렌더링 될때 'Service'에 미리 정의해둔 함수를 사용해서 데이터를 가져온다.
(4) 'Service'에서는 axios 패키지의 기능을 사용해서 'Spring boot Api'와 http 통신을 주고 받는다.
(5) React쪽의 'Service'에서 요청한 http request를 'Rest Controller'에서 수신한다.
(6) 'Rest Controller'에서 'Service'를 호출하여 "React쪽의 'Service'에서 요청한 것"에 해당하는 기능을 수행한다.
(7) 'Service'에서는 'Repository'를 호출하여 데이터 crud작업을 처리한다.
(8) 'Repository'에서 'DB'를 호출하여 데이터 crud작업을 처리한다.
유저가 웹 브라우져에서 특정페이지에 접속해서 페이지의 내용을 볼 때 대략 위에 기재한 '데이터 통신이 일어나는 순서' 대로 동작한다
※ 프론트나 백엔드 어느쪽을 먼저 구현하든 순서는 상관없다고 생각한다. 흐름을 보는게 가장 중요.
새로운 시작~!