HTTP request, response, CSR, SSR, FETCH API

1. 의미 : Hypertext Transfer Protocol

Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것. 

클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상이다. 

 

2. naver.com으로 요청이 보내지는 과정 

요청은 먼저 가장 가까운 cdn서버로 요청이 되고 

cdn서버는 네이버가 어디 위치에있는지 알아내서 아이피주소로 요청을 리다이렉트 하고

요청은 코어네트워크를 타고 쭉쭉 네이버 서버로 가서 네이버 서버에 도달을 한다. 

그 서버도 게이트웨이 서버 프록시 서버 여러가지가 있고

이 모든것을 거친 후에야 네이버 비즈니스 서버로 도달한다. 

HTTP는 이런 존재들 사이의 통신 방법을 규정한 것이다. 

HTTP는 OSI 7계층이 속하는 통신방법중의 하나이다. 

클라이언트와 server가 HTTP로 통신을 하고 그 사이에는 Proxy, Tunnel, DNS, Core Network가 있다. 

 

HTTP Message

HTTP메세지에는요청메시지, 응답메시지 모양이 다르다. HTTP통신 규약에서 정한 메세지 형태임. 

HTTP/1.1메시지는 사람이 읽을 수 있다. 

 

HTTP메시지의 헤더에는 콘텐츠 관련정보, 인증관련정보, 쿠키정보, 캐시관련정보등 서버와 클라이언트 간 통신 시 필요한 정보를 담는다. 

 

HTTP Request예시

어떤 사용자가 어떤 데이터를 필요로 하는지 내용을 담고있다 

 

HTTP 응답 예시

사용자가 요청한 데이터와 어떤 데이터가 전송되었는지 내용을 담고있다

express에의해 만들어졌고 text파일이다. 만들어진 날짜는 10/25이다~ 이런 내용임. 

 

Fetch API

기존 XMLHTTPRequest를 대체하는 HTTP요청 API.

ES6에 추가된 Promise를 리턴하도록 정의된다. 

 

웹은 두가지가 있다. 

- 정적웹 : 사용자와 상호작용하지 않는 페이지(단방향통신). Link를 통한 페이지 이동정도만 가능. 

- 동적웹  : 사용자와 상호작용을 하는 양방향 통신. 프론트엔드와 백엔드가 유기적으로 통신하며 동작하는 것. 

   동적웹은 두가지가 있다. CSR과 SSR이 있다. 

   1) CSR(Client-Side-Rendering) : 프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식. 프론트엔드 코드에 페이지 리소스들이 미리 정의가 되어있다. 서버와의 통신은 API통신을 이용한다. 빠른 반응이지만 페이지의 내용은 API호출이 완료된 후에 보여진다. 페이지의 내용이 화면보다 늦게 표시된다. 

   2) SSR(Server-Side-Rendering) :  백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식. 로딩이 완료되면 페이지와 데이터가 한번에 표시된다. 상대적으로 사용자가 보기에 로딩이 느려보이는 단점이 있고 페이지가 이동될 때마다 다시 로딩되기 때문에 페이지가 깜빡인다.