정적 리소스
- 고정된 HTML 파일, CSS, JS, 이미지, 동영상 등을 제공합니다.
- 주로 웹 브라우저
HTML 페이지
- 필요한 HTML 파일을 동적으로 생성하고 제공합니다.
- 웹 브라우저: HTML 해석
HTTP API
- HTML이 아닌 데이터를 전달합니다.
- 주로 JSON 형식을 사용
- 다른 시스템에서 전화를 겁니다.
- 다른 시스템에서 호출
- UI 화면이 필요할 때만 데이터 송수신, 클라이언트에서 별도로 처리
- 앱, 웹 클라이언트, 서버 대 서버
- 데이터를 웹이나 앱으로 직접 보내는 것을 HTTP API라고 합니다. (JSON 방식)
다른 시스템과의 협력
- 주로 JSON 형식의 데이터 통신
- UI 클라이언트의 터치 포인트
- 앱 클라이언트(iPhone, Android, PC 앱)
- 웹 브라우저에서 JavaScript를 통한 HTTP API 호출
- React 및 Vue.js와 같은 웹 클라이언트
- 서버 대 서버
- 주문 서버 -> 결제 서버
- B2B 데이터 통신
서버측 렌더링, 클라이언트측 렌더링
SSR – 서버 측 렌더링
서버에서 최종 HTML을 생성하고 클라이언트에 전달
HTML 생성 과정은 서버에서 완료되고 최종 결과는 웹 브라우저에 표시됩니다.
- 최종 HTML 결과는 서버에서 생성되어 웹 브라우저로 전달됩니다.
- 정적 화면에 주로 사용
- 관련 기술: JSP, 타임워프 -> 백엔드 개발자
CSR – 클라이언트측 렌더링
- HTML 결과는 JavaScript를 사용하여 웹 브라우저에서 동적으로 생성되고 적용됩니다.
- 웹 환경은 동적 화면 위주로 사용되며 앱처럼 필요에 따라 변경 가능
- 예) 구글 지도, 지메일, 구글 캘린더
- 관련 기술: React, Vue.js -> 웹 프론트엔드 개발자
참조
- CSR + SSR과 동시에 React와 Vue.js를 지원하는 웹 프레임워크도 있습니다.
- SSR을 사용하는 경우에도 JavaScript를 사용하여 화면의 일부를 동적으로 변경할 수 있습니다.
백엔드 개발자가 알아야 할 강사 추천 UI 기술
- 백엔드 – 서버 사이드 렌더링 기술
- JSP, 타임스킵
- 화면이 정적이고 복잡하지 않을 때 사용
- 백엔드 개발자는 서버 측 렌더링 기술을 배워야 합니다.
- Web Frontend – 클라이언트 측 렌더링 기술
- 반응, Vue.js
- 복잡하고 동적인 사용자 인터페이스 사용
- 웹 프런트 엔드 개발자 전문화
- 선택과 집중
- 백엔드 개발자로부터 웹 프론트엔드 기술을 배우는 것은 옵션입니다.
- 백엔드 개발자는 서버, DB, 인프라 등 수많은 백엔드 기술을 공부해야 합니다.
- 웹 프론트엔드를 깊이 있게 익히려면 오랜 시간이 걸립니다.
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1/dashboard
Spring MVC Part 1 – 백엔드 웹 개발의 핵심 기술 – 인프라 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 처음부터 이해하고 완성할 수 있습니다. Spring MVC의 기본 원리와 구조를 이해하고 보다 박식한 백엔드 개발자가 되십시오.
www.inflearn.com