HTTP 통신 원리 및 기본지식 1

성장을 즐기는 개발자, 최호경·2023년 5월 6일

Cache GET Latency POST Proxy Throttling XMLHTTPRequest client clock http server xhr

XMLHttpRequest(XHR)

ajax가 백그라운드에서 계속해서 서버와 통신할 때 XMLHttpRequest 객체를 사용합니다. 대부분의 웹 브라우저들은 XMLHttpRequest 객체를 내장하고 있습니다.

요청 방식 - GET & POST

생성된 XMLHttpRequest 객체는 open()과 send() 메소드를 사용하여 요청을 보내게 됩니다. open은 서버로 보낼 ajax 요청의 형식을 설정하고, send는 작성된 요청을 서버로 전달합니다.

get 방식은 요청을 보내는 URL에 데이터를 추가하여 전달하는 방식입니다. get 방식의 HTTP 요청은 브라우저에 의해 cached 되어 저장됩니다. 그리고 추가된 데이터는 URL에 query string으로 포함되어 전송되므로 데이터 길이의 제한이 있습니다. 또한 해당 URL이 사용자 화면에서 그대로 노출되기 때문에 보안 취약점이 있습니다. 따라서 민감한 데이터는 POST 방식으로 요청을 보내야 합니다.

// GET 방식으로 요청을 보내면서 데이터를 동시에 전달합니다.

httpRequest.open("GET", "/examples/media/request_ajax.php?city=Seoul&zipcode=06141", true);

httpRequest.send();

POST 방식은 브라우저에 의해 캐시되지 않기 때문에 브라우저 히스토리에 남지 않습니다. 또한 요청과 함께 보내는 데이터도 별도로 첨부되기 때문에 데이터 길이에 대한 제한이 없고, 보안에 좀 더 효과적입니다. 서버로 전달하고자 하는 데이터는 http 헤더에 포함되어 전송됩니다.

// POST 방식의 요청은 데이터를 Http 헤더에 포함시켜 전송합니다.

httpRequest.open("POST", "/examples/media/request_ajax.php", true);

httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

httpRequest.send("city=Seoul&zipcode=06141");

Cache(캐시)

캐시는 이미 가져온 데이터 또는 리소스의 복사본을 저장하고 있다가, 동일한 요청이 있을 때 그것을 제공하는 기술입니다. 웹 캐시가 자신의 저장소 내에 요청된 리소스를 가지고 있다면, 요청을 가로채 리소스의 복사본을 반환해주는 것이죠. 덕분에 서버로부터 리소스를 재다운로드 할 필요가 없습니다.

이로 인해 서버의 부하를 완화할 수 있고 서버보다 클라이언트에 가까운 캐시에서 리소스를 가져왔기 때문에, 웹 성능이 향상될 수 있죠.

private cache & shared cache

사설 캐시는 한 명의 사용자만 사용하는 캐시이며, 공유 캐시는 한 명 이상의 사용자가 재사용할 수 있도록 응답을 저장하는 캐시입니다.

브라우저 캐시는 사설 캐시이며, 사용자에 의해서 http를 통해 다운로드된 모든 문서들을 가지고 있습니다. 이 캐시 덕분에 서버에 대한 추가적인 요청 없이 브라우저에서 '뒤로 가기, 앞으로 가기, 소스 보기' 등의 기능으로 방문했던 문서들을 사용할 수 있습니다.

프록시(Proxy)

프록시는 '대신'이라는 의미로, 보안 상의 문제로 직접 통신할 수 없을 때, 클라이언트와 서버 사이에 프록시 서버를 두어서 중계해주도록 하는 개념입니다. 프록시 서버는 요청된 내용을 캐시를 이용해서 저장해두고, 동일한 요청이 들어왔을 때 캐시에 저장된 내용을 그대로 출력해줍니다.

대기시간(Latency)

대기시간은 일반적으로 사용자가 요청을 한 시점부터, 사용자에게 요청에 대한 응답을 받기까지 걸리는 시간을 말합니다. 대기 시간이 길다는 것은 네트워크나 인터넷 연결에 대한 지연이 많다는 것을 의미하죠. 단순한 웹 페이지에서의 대기 시간은 사소해 보이지만, 일반적인 실제 웹 사이트에서는 수많은 css, script, 미디어 파일에 대한 요청을 포함하고 있습니다. 따라서 대기 시간은 사용자 경험에 직접적인 영향을 미치고 있습니다.

스로틀링(Throttling)

전자기기 내부의 CPU, GPU 등의 장치들이 지나치게 과열되어 기기가 손상되는 것을 예방하기 위해, 클럭과 전압을 강제적으로 낮추거나 종료시켜서 발열을 줄이고 성능을 낮추는 기능입니다. 기기의 수명과 배터리 성능의 보호하기 위한 목적을 가진 필수 기능이라고 할 수 있습니다.