강의 chap1-4
HTML, HTTP API, CSR, SSR
1. html
- 정적 리소스
- 동적 리소스
-> WAS가 동적으로 html을 생성한다.(JSP, 타임리프 등을 통해서)
-> html을 웹 브라우저로 보내고 웹 브라우저는 html을 해석한다.
2. http API
- HTML이 아니라 데이터를 전달하는 것이다.
- 주로 JSON 형식을 사용한다.
- HTML을 랜더링할 때 사용하는 것이 아닌 데이터만 보여준다.
- 다양한 시스템에서 호출해서 사용한다.
- 주로 3가지 상황에서 사용된다.
- 데이터만 주고 받고 ui 화면이 필요하면 클라이언트가 별도로 처리한다.(앱 클라이언트)
- 자바스크립트의 ajax, fetch 등을 통해서 서버에 있는 api를 호출한다.(웹 클라이언트)
- 서버 to 서버 : JSON 데이터만 필요하므로 데이터만 주고 받는다.
- 서버 to 서버 : JSON 데이터만 필요하므로 데이터만 주고 받는다.
3. 백엔드 개발자가 고민해야 할 3가지
- 정적 리소스를 어떻게 제공할건지
- 동적으로 제공하는 html 페이지를 어떻게 제공할건지
- HTTP API를 어떻게 제공할건지
4. 서버사이드 렌더링(SSR)
- 웹 브라우저에서 요청이 들어오면 서버는 DB를 조회해서 html을 동적으로 생성을 한다.
- 최종적으로 서버에서 html을 다 만드는 것이다.
- 코드를 다 실어서 웹 브라우저로 http 응답을 보낸다.
- 웹 브라우저는 완전히 다 만들어진 것을 보여주기만 한다.
- 동적으로 생성된 html을 서버에서 다 만든다.
5. 클라이언트 사이드 렌더링(CSR)
- HTML 결과를 처음부터 바로 얻는 것이 아닌 자바스크립트를 사용해서 웹 브라우저에서 동적으로 생성해서 사용하는 것이다.
- 주로 동적인 화면에서 사용한다.
- 웹 환경을 마치 앱처럼 필요한 부분을 변경할 수 있다.(ex. 구글맵..)
- 관련기술 : React, Vue.js -> 웹 프론트엔드 개발자
- HTML 요청(/orders.html)을 한다.(SSR과 동일)
- 서버는 내용이 없는(비어 있는) HTML 응답을 보낸다. 대신 애플리케이션을 구동하는 자바스크립트 링크 하나를 내려준다.
- 웹 브라우저는 자바스크립트를 서버에 요청한다. 이 자바스크립트 안에는 클라이언트 로직, 자바스크립트를 어떻게 HTML로 랜더링할지에 관한 것들이 들어있다.
- 웹 브라우저는 애플리케이션 로직을 바탕으로 서버에 HTTP API를 요청한다. 서버는 DB를 조회해서 JSON 데이터를 준다.
- 웹 브라우저는 애플리케이션 로직과 데이터를 바탕으로 동적으로 HTML 랜더링을 한다.
6. SSR, CSR 정리
- 각각은 장단점이 있어 둘 다 활용하는 경우가 많다.
7. 백엔드 개발자 입장에서 UI 기술 학습 범위
- SSR
- JSP, 타임리프 등을 많이 쓴다.
- 화면이 정적이고 복잡하지 않을 때 사용된다.
- 백엔드 개발자는 서버 사이드 렌더링 기술 학습이 필수적이다.
-> 간단한 화면이 필요한 경우 거기에 복잡한 웹 프론트엔드 기술을 쓸 필요는 없다. 타임리프를 이용한 학습은 필수적이다. - 선택과 집중을 해야 한다.(백엔드 개발자는 DB, 서버, 인프라, JPA 등 수 많은 백엔드 기술을 공부해야 한다.)
출처
인프런 강의 - 김영한
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1/dashboard
안녕하세요