HTML, HTTP API, CSR, SSR
HTML페이지
- WAS는 동적으로 필요한 HTML(타임리프,JSP등) 파일을 생성해서 전달
- 웹브라우저 : HTML 해석
HTTP API
- HTML이 아니라 데이터를 전달 (HTML페이지와는 다르게 DATA만 전달)
- 주로 JSON형식 사용
- 다양한 시스템에서 호출
+ 주로 3가지 상황에서 사용됌
-- 데이터만 주고받음, UI화면이 필요하면, 클라이언트가 별도처리
- 앱, 웹 클라이언트, 서버 TO 서버
요약: HTML을 보여주는 전송을 제외한 서로 데이터를 주고받고, 프로세스 호출할떄에 사용한다.
정리
- 주로 JSON형태로 데이터 통신
-UI 클라이언트 접점
+ 앱클라이언트 (아이폰, 안드로이드,PC앱)
+ 웹브라우저에서 자바스크립트를 통한 HTTP API 호출
+ React, Vue.js 같은 웹 클라이언트
- 서버 to 서버
+ 주문 서버 -> 결제서버
+ 기업간 데이터 통신
- 개발자가 생각할 부분
+ 정적 리소스 어떻게 제공
+ 동적페이지 어떻게 제공
+ http api 어떻게 제공할지
SSR - 서버 사이드 렌더링
- HTML을 만드는 과정을 서버에서 다 끝내는 것
- 주로 정적인 화면에서 사용
- 관련기술 : JSP,타임리프 - >백엔드 개발자
CSR - 클라이언트 사이드 렌더링
- HTML 결과를 자바스크립트를 사용해 웹브라우저에서 동적으로 생성해서 적용
- 주로 동적인 화면에 사용, 웹 환경을 마치 앱처럼 필요한 부분부분 변경할 수 있음
- 구글지도, GMAIL, 구글 캘린더
- 관련기술 React,Vue.js - >웹 프론트 개발자
-참고
- React , Vue.js 를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음
CSR은 처음 서버에 HTML을 요청하지만 내용없이 자바스크립트 링크만 보내준다
그럼 브라우저는 다시 자바스크립트를 요청하는데 이곳엔 HTML 렌더링 코드가 들어있다
그다음 HTTP API로 데이터 요청을 해서 HTML에 뿌려진다
어디까지 알아야 하나요!?
백엔드 개발자 입장에서 UI기술
물론 어디까지라는 것은 없지만~
백엔드 - 서버 사이드 렌더링 기술
- JSP,타임리프
- 화면이 정적이고, 복잡하지 않을 때 사용
- 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수
웹 프론트엔드 - 클라이언트 사이드 렌더링 기술
- React, Vue.js
- 복잡하고 동적인 UI사용
- 웹 프론트엔드 개발자의 전문 분야
선택과 집중
- 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션
- 백엔드 개발자는 서버,DB,인트라 등등 수 많은 백엔드 기술을 공부해야 한다.
- 웹프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요하다.
