[WEB] React + Spring Boot

✅ 아하! 모먼트

node.js 는 리액트에서 자바스크립트를 사용하기 위해 사용하는 것이다.

정적 데이터 HTML 파일 렌더링은 브라우저이다.

 

✅ Spring 개발 방법

SSR

1. 정적 컨텐츠

2. MVC와 템플릿 엔진

CSR

3. API

 

✅

브라우저 - Chrome

웹서버 - 정적인 데이터(HTML 파일) 처리 : React

웹애플리케이션 - 동적인 데이터(DB에서 가져옴) 처리 : Spring Boot

DB - Oracle, MySQL

 

✅ Nginx( 웹서버의 한 종류 )

리버스 프록시: 라우팅을 통해 웹서버, WAS, DB 전부 다 하나의 서버로 사용가능하다. 비용 절약 가능. 전기세 느낌(시간당). 트래픽 많다고 비용 

하나의 서버에서 사용할 수 있음.

https://narup.tistory.com/238

[Nginx] 리버스 프록시(Reverse Proxy) 개념 및 사용법

 

Q. 서버란 무엇인가? 컴퓨터 한대라고 생각. 꾸준히 상호작용이 일어나야 함. 리액트 ≠ 서버. 리액트는 클라이언트의 호출에 자바스크립트를 전달하기만 함.

Q. 클라우드란 서버란? AWS EC2

 - ELB: 로드 밸런스 해줌. scale-up, scale-out.

 

---

 

✅ CSR 동작 과정

출처: 재서님이 밤 새우며 그린 그림 ^^

 

1. Client가 React로 요청을 보냄.

2. 자바스크립트를 전달받아 브라우저가 실행시킨다. (API 제외)

3. 필요한 API 정보를 Spring Boot(WAS)에 요청한다.

4. DB에 데이터를 요청한다.

5. DB로부터 데이터를 전달받는다.

6. API 정보를 전달해준다.

 

✅ SSR 동작 과정

 

⁕ 백엔드로부터 HTML을 완성하여 클라이언트에 전달해준다.