검색결과 리스트
CSR에 해당되는 글 1건
- 2021.08.19 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 2
글
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 2
인프런 강의 20일차.
- 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 1 (김영한 강사님)
* HTML, HTTP API, CSR, SSR
1. 정적 리소스
- 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공
- 주로 웹 브라우저
- 웹 브라우저가 Web Server에 요청하면 이미 생성된 리소스 파일을 웹 브라우저에게 응답
2. HTML 페이지
- 동적으로 필요한 HTML 파일을 생성해서 전달
- 웹 브라우저 : HTML 해석
- 웹 브라우저가 WAS에 요청하면 DB 정보 조회 후 동적으로 HTML 생성(jsp나 타임리프 등을 사용)해서 웹 브라우저에게 응답
3. HTTP API
- HTML이 아니라 데이터를 전달
- 주로 JSON 형식 사용
- 다양한 시스템에서 호출
- 웹 브라우저가 WAS에 요청하면 DB 정보 조회 후 json data를 웹 브라우저에게 응답
- 데이터만 주고 받음, UI 화면이 필요하면 클라이언트가 별도 처리
- UI 클라이언트 접점
> 앱 클라이언트(아이폰, 안드로이드, PC 앱)
> 웹 브라우저에서 자바스크립트를 통한 HTTP API 호출
> React, Vue,js 같은 웹 클라이언트
- 서버 to 서버
> 주문 서버 -> 결제 서버
> 기업간 데이터 통신
4. 서버사이드 렌더링(SSR)
- 서버에서 최종 HTML을 생성해서 클라이언트에 전달
- 주로 정적인 화면에 사용
- 관련 기술 : JSP, 타임 리프 -> 백엔드 개발자
- SSR을 사용하더라도 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능
5. 클라이언트사이드 렌더링(CSR)
- HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
- 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있음
- 관련 기술 : React, Vue.js -> 웹 프론트엔드 개발자
- React, View.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음
- 호출 순서
> 1)HTML 요청 : 웹 브라우저가 서버에 HTML 요청하면 내용이 없는 HTML(자바스크립트 링크만 존재)를 응답받음
> 2)자바스크립트 요청 : 전달받은 자바스크립트 링크를 통해 다시 서버에 자바스크립트 요청하면 클라이언트 로직과 HTML 렌더링 코드를 응답받음
> 3)HTTP API - 데이터 요청 : 서버에 HTTP API를 요청하여 JSON 데이터를 응답받음
> 4)자바스크립트로 HTML 결과 렌더링 : 최종적으로 응답받은 JSON 데이터를 자바스크립트로 HTML 결과 렌더링.
6. 백엔드 개발자 입장에서 UI 기술
- JSP, 타임리프
- 화면이 정적이고 복잡하지 않을 때 사용
- 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필요
- 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션
- 서버, DB, 인프라 등등 수많은 백엔드 기술을 공부해야한다.
- 웹 프론트엔드도 깊이있게 잘 하려면 오랜 시간이 필요하다..
7. 자바 웹 기술 역사
- 서블릿(1997)
> HTML 생성이 어려움(자바 코드로 짜야하기 때문)
- JSP(1999)
> HTML 생성은 편리하지만 비즈니스 로직까지 너무 많은 역할을 담당
- 서블릿, JSP 조합 MVC 패턴 사용
> 모델, 뷰, 컨트롤러로 역할을 나누어 개발
- MVC 프레임워크 춘추전국시대(2000년 초 ~ 2010년 초)
> MVC 패턴 자동화, 복잡한 웹 기술을 편리하게 사용할 수 있는 다양한 기능 지원
> 스트럿츠, 웹워크, 스프링 MVC(과거 버전)
- 애노테이션 기반의 스프링 MVC 등장
> @Controller
> MVC 프레임워크의 춘추 전국 시대 마무리
- 스프링 부트의 등장
> 스프링을 편리하게 사용할 수 있도록 도와주는 껍데기(?)
> 스프링 부트는 서버를 내장
> 과거에는 서버에 WAS를 직접 설치하고 소스는 War 파일을 만들어서 설치한 WAS에 배포
> 스프링 부트는 빌드 결과(Jar)에 WAS 서버 포함하기 때문에 빌드 배포를 단순화한다.
- 최신 기술 (스프링 웹 기술의 분화)
> Web Sevlet - Spring MVC
> Web Reactive - Spring WebFlux(가장 최신)
8. 스프링 웹 플럭스(WebFlux)
- 특징
> 비동기 논 블록킹 처리
> 최소 쓰레드로 최대 성능 - 쓰레드 컨텍스트 스위칭 비용 효율화
> 함수형 스타일로 개발 - 동시처리 코드 효율화
> 서블릿 기술 사용 X
- 단점
> 웹 플럭스는 기술적 난이도가 매우 높음
> 아직은 RDB 지원이 부족함
> 일반 MVC의 쓰레드 모델도 충분히 빠르다.
> 실무에서 아직 많이 사용하지는 않음
9. 자바 뷰 템플릿 역사(HTML을 편리하게 생성하는 뷰 기능)
- JSP
> 속도 느림, 기능 부족
- 프리마커(Freemarker), 벨로시티(Velocity)
> 속도 문제 해결, 다양한 기능(다만 기능 업데이트가 안됨)
- 타임리프(Themeleaf)
> 내추럴 템플릿 : HTML의 모양을 유지하면서 뷰 템플릿 적용 가능
> 스프링 MVC와 강력한 기능 통합(타임리프를 사용하는 주 목적)
> 최선의 선택, 단 성능은 프리마커와 벨로시티가 더 빠름
'Spring 정리' 카테고리의 다른 글
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 4 (0) | 2021.08.30 |
---|---|
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 3 (0) | 2021.08.25 |
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 1 (0) | 2021.08.18 |
스프링 입문 맛보기 10 (0) | 2021.08.11 |
스프링 입문 맛보기 9 (0) | 2021.08.05 |