HTTP Messages
HTTP Messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식
요청(Requests) 과 응답(Responses) 있다.
start line : start line에는 요청이나 응답의 상태를 보여줌
항상 첫 번째 줄에 위치.
응답에서는 status line
HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합
empty line : 헤더와 본문을 구분하는 빈 줄
body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함
요청과 응답의 유형에 따라 선택적으로 사용.
HTTP Requests
Start line
HTTP Requests는 클라이언트가 서버에게 보내는 메시지
1. 수행할 작업(GET, PUT, POST 등)이나 방식(HEAD or OPTIONS)을 설명하는 HTTP method
2. 요청 대상(일반적으로 URL이나 URI) 또는 프로토콜, 포트, 도메인의 절대 경로는 요청 컨텍스트에 작성
3. HTTP 버전에 따라 HTTP message의 구조가 달라집니다. 따라서 start line에 HTTP 버전을 함께 입력
Headers
헤더 이름(대소문자 구분이 없는 문자열), 콜론( : ), 값을 입력
General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더
Request headers : fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더
Representation headers : body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함
Body
요청의 본문은 HTTP messages 구조의 마지막에 위치
HTTP Responses
Status line
HTTP Responses는 서버가 클라이언트에게 보내는 메시지
- 현재 프로토콜의 버전(HTTP/1.1)
- 상태 코드 - 요청의 결과를 나타냅니다. (ex. 200, 302, 404 등)
- 상태 텍스트 - 상태 코드에 대한 설명
ex. HTTP/1.1 404 Not Found
Headers
응답에 들어가는 HTTP headers는 요청 헤더와 동일한 구조
AJAX
Asynchronous JavaScript And XMLHttpRequest의 약자
JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법
웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것
-> SPA
두 가지 핵심 기술
1. Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 합니다. 즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용
2. 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경
SSR (Server Side Rendering)
웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링
SSR 사용
- SEO(Serrch Engine Optimization)가 우선순위인 경우
- 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합합니다.
- 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있습니다.
CSR (Client Side Rendering)
클라이언트에서 페이지를 렌더링
대표적인 클라이언트는 웹 브라우저
CSR 사용
- SEO 가 우선순위가 아닌 경우
- 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다.
- 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있습니다.
--> 요즘은 복합적으로 사용한다 한다.
SSR, CSR차이점
SSR과 CSR의 주요 차이점은 페이지가 렌더링되는 위치
