웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐
HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할
HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할
웹 서비스 동작 방식
- 브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달
- 서버는 사용자의 HTTP 응답을 브라우저로 전송
- 브라우저는 HTTP 응답을 사용자에게 적절한 화면으로 노출
백엔드와 프론트엔드
웹서비스 개발에서 백엔드와 프론트엔드라는 단어를 많이 접하게 됨
프론트엔드는 사용자가 직접 사용하게 되는 웹페이지를 주로 담당 = 클라이언트
백엔드는 사용자에게 보이지 않는 데이터 가공 등의 기능을 주로 담당 = 서버
정적 웹
Web 1.0
사용자와 상호작용하지 않는 페이지 - 단방향 통신
Link를 통한 페이지 이동 정도만 가능
일반적으로 변하지 않는 html 파일로 제공
동적 웹
Web 2.0
사용자와 상호작용을 함 - 양방향 통신
구글 맵, 웹 채팅, 등 사용자가 다양한 기능을 수행할 수 있음
프론트엔드와 백엔드가 유기적으로 통신하며 동작
현대적인 웹은 대부분 동적 웹
동적 웹의 두가지 구현 방법
CSR
Client-Side Rendering
프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식
SSR
Server-Side Rendering
백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식
CSR의 특징
사이트가 변하는 부분들을 프론트엔드에서 처리
프론트 엔드 코드에 페이지 리소스들이 미리 정의되어있음
서버와의 통신은 API 통신을 이용
빠른 반응이지만 페이지의 내용은 API 호출이 완료된 후에 보여짐
복잡한 프로젝트 구성, 큰 개발 사이즈
SSR
사이트가 변하는 부분들을 백엔드에서 처리
백엔드에서 HTML 파일을 작성해서 프론트엔드로 전달
CSR에 비해 쉬운 구성, 작은 개발 사이즈
로딩이 완료되면 페이지와 데이터가 한 번에 표시됨
상대적으로 사용자가 보기엔 로딩이 느려 보임
페이지 이동할 때마다 다시 로딩하기 때문에 페이지 깜빡임
웹 서비스 동작 방식 정리
웹서비스는 HTTP 요청과 응답으로 동작함
클라이언트는 서버로 HTTP 요청을, 서버는 클라이언트로 HTTP 응답을 보냄
프론트엔드는 클라이언트를 담당, 백엔드는 서버를 담당
현대적인 많은 웹은 동적 웹으로 구현되어 있음
동적 웹을 클라이언트에서 주로 담당하는 것을 CSR이라고 하며,
서버에서 주로 담당하는 것을 SSR이라고 함
