[JS 비동기] HTTP, Ajax, 동기/비동기 통신

HTTP (Hyper Text Transfer Protocol)

브라우저와 서버 간에 데이터를 주고 받기 위한 방식이다.

프로토콜은 '나는 이렇게 줄 테니 넌 이렇게 받고, 난 너가 준거 그렇게 받을게'라는 일종의 약속이다.

HTTP는 각각의 데이터 요청이 서로 독립적으로 관리된다는 것이 특징이며, 이를 stateless하다고 한다.

 

HTTP는 TCP/IP 통신 위에서 동작한다. (기본 포트 80번)

TCP/IP

- TCP와 IP를 합쳐서 부르는 말

- TCP/IP를 사용한다 = IP 주소 체계를 따르고, IP Routing을 이용하며, TCP의 특성을 활용하겠다.

- IP 주소 사용하여 데이터를 전달

- 데이터가 제대로 갔는지, 속도는 적당한지, 제대로 받았다는 연락이 오는지 체크

 

TCP

- 전송 제어 프로토콜 (Transmission Control Protocol)

- 근거리 통신망이나 인트라넷, 인터넷에 연결된 컴퓨터에서 실행되는 프로그램 간에 일련의 옥텟을 안정적으로, 순서대로, 에러 없이 교환할 수 있게 함

- 전송 계층

- 네트워크의 정보 전달을 통제하는 프로토콜이자 인터넷을 이루는 핵심 프로토콜의 하나

- 웹 브라우저들이 월드 와이드 웹에서 서버에 연결할 때 사용되며, 이메일 전송이나 파일 전송에도 사용됨

클라이언트가 서버에 요청(request)을 보내면, 이에 대해 서버가 응답(response)을 반환한다.

이 때 클라이언트는 요청을 보내는 쪽 (브라우저), 서버는 요청을 받는 쪽(데이터를 보내주는 원격지의 컴퓨터)이다.

HTTP 요청 메시지 : 요청 행, 요청 헤더, 메시지 본문
HTTP 응답 메시지 : 응답 행, 응답 헤더, 메시지 본문

---

Ajax (Asynchronous JavaScript + XML)

XMLHttpRequest라는 자바스크립트 객체를 활용해 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그램 기법이다. 즉, 웹 페이지가 로딩된 후 일부 데이터를 서버로부터 요청할 수 있도록 한다.

 

Ajax를 위해서는 XMLHttpRequest 객체를 만들어야 하지만, 편의상 fetch API와 axios 라이브러리를 사용해 데이터를 송수신한다.

 

웹에서의 비동기 처리

클라이언트와 서버 사이의 통신을 통해 JSON, XML, HTML 등 다양한 포맷을 주고 받을 수 있다.

페이지 전체를 새로고침하지 않고서도 수행되는 '비동기성'이 특징이다.

사용자의 event가 있으면 페이지의 일부만을 업데이트 할 수 있게 해준다.

- 페이지 새로고침 없이 서버에 요청

- 서버로부터 데이터를 받고 작업을 수행

 

XML

- eXtensible Markup Language

- 마크업 언어 : 태그 등을 이용해 문서나 데이터 구조를 작성

- ajax에서 사용하는 데이터 형식을 뜻하는 단어였으나, 최근에는 JSON과 텍스트 데이터를 더 많이 사용한다.

---

동기(Synchronous) / 비동기(Asynchronous)

동기

- 요청을 보내면 얼마나 시간이 걸리든 그 자리에서 응답을 받는다.

    = 두 서버 사이의 transaction을 맞춘다.

    = 요청을 보낸 thread는 응답이 도착하기 전까지 아무것도 하지 못하는 block 상태가 된다.

- 처리 결과에 의해 처리하여 서비스의 질을 높일 수 있다.

 

장점

- 요청과 응답의 순서가 보장된다.

- 보낸 요청에 대한 처리 결과 값을 보장 받을 수 있다.

단점

- 응답이 지연되면, 요청을 보낸 thread는 해당 응답을 무작정 기다리는 상태가 된다. (성능적 이슈 발생)

 

비동기

- 요청을 보내더라도 응답을 언제 받아도 상관이 없다. 즉, 요청을 보내고 응답을 상관하지 않는 상태이다.

- 처리결과에 의존하지 않고 성능적으로 빠른 처리가 가능하다.

 

장점

- non block 상태 : 응답을 기다리지 않고 있으니 요청을 보낸 thread는 다른 일을 할 수 있다.

- 요청과 응답의 순서가 보장되지 않는다.

- 필수 데이터로만 통신하기 때문에 처리 속도가 빠르고 서버 부하와 통신 트래픽 부하가 적다.

- 비동기로 통신하기 때문에 각 영역에서 다른 작업을 처리할 수 있다.

- 페이지를 전환하는 것이 아닌 페이지 일부만을 변경하기 때문에 빠른 렌더링이 가능하다.

 

단점

- 응답에 대한 처리 결과를 보장받고 처리해야 되는 서비스에는 적합하지 않다.