js 비동기 프로그래밍, Ajax와 HTTP

동기처리와 비동기처리

자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글스레드 방식으로 동작한다. (단 하나의 실행 컨택스트 스택을 갖는다.)
현재 실행중인 태스크가 종료할때까지, 다음 태스크가 대기하는 방식을 동기처리라고 한다.
싱글 스레드로 동작하는 것은 브라우저가 아니라 내장된 자바스크립트 엔진이다. 브라우저는 멀티스레드로 동작한다.
따라서 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)이 발생하는데, 태스크를 블로킹(작업중단)하지 않는 것을 비동기처리 라고 한다.

 

[일반함수가 호출되었을때의 콜스택 플로우]
함수 호출 > 실행 컨텍스트 생성 > 콜스택에 푸시 > 실행 컨텍스트 실행 > 함수 종료 > 콜스택에서 팝

동기처리는 실행순서를 보장하지만, 비동기처리는 순서를 보장하지 않는다.
setTimeout, setInterval, HTTP 요청, 이벤트 핸들러 등은 비동기 처리 방식으로 동작한다.

브라우저는 Web API를 제공한다. DOM API와 타이머 함수, HTTP요청(Ajax)가 그 예이다.
자바스크립트 엔진과 브라우저가 협력하여 비동기함수인 setTimeout 함수를 실행한다.

 

콜 스택과 힙

구글의 V8 자바스크립트 엔진을 비롯한 대부분의 JS엔진은 크게 2가지로 구분할 수 잇는데, 콜 스택과 힙 이다.

콜 스택 : 실행 컨텍스트가 추가되고 제거되는 스택
힙 : 객체가 저장되는 메모리 공간. 콜스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다. 객체는 원시값과 달리 크기가 정해져있지 않으므로, 할당해야 할 메모리 공간의 크기를 런타임에 결정한다. 따라서 힙은 구조화 되어있지 않다.

 

이벤트루프와 태스크 큐

브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다.
자바스크립트의 동시성(concurrency)를 지원하는것이 이벤트 루프다. 브라우저에 내장되어있는 기능 중 하나다.

태스크 큐 : 비동기 함수의 콜백, 또는 이벤트 핸들러가 일시적으로 보관되는 영역 (별도로 프로미스 후속처리 메서드의 콜백함수가 일시적으로 보관되는 마이크로태스크 큐도 존재한다)
비동기 함수는 콜백함수가 호출되는것을 기다리지않고 즉시 종료되어 콜스택에서 제거된다. 이후 콜백함수는 태스크 큐로 푸시된다.

이벤트 루프 : 계속 루프를 돌면서... 콜스택에서 현재 실행중인 컨텍스트가 있는지, 태스크 큐에 대기중인 함수(콜백, 이벤트핸들러)가 있는지 반복해서 확인한다. 콜스택이 비어있고 태스크 큐에 대기중인 함수가 있다면, 순차적으로 태스크큐에 대기중인 함수를 콜스택으로 이동시킨다.

 

Ajax

Asynchronous JavaScript and XML란 서버와 통신하기위해 XMLHttpRequest 객체를 사용하는 프로그래밍 방식이다.
XMLHttpRequest는 비동기 통신을 위한 메서드와 프로퍼티를 제공한다.

 

!! Ajax가 나오기 전, 화면 전체를 렌더링하는 것과 비교했을때의 장점 !! 

1. 변경할 부분을 갱신하는데 필요한 데이터만 서버로부터 받기 때문에 불필요한 데이터통신이 발생하지 않는다.
2. 화면이 깜빡이는 현상이 발생하지 않는다.
3. 비동기 처리방식으로 동작하기때문에 블로킹이 발생하지 않는다.

JSON(JavaScript Object Notation - 자바스크립트 객체 표기법)은 HTTP통신을 위한 텍스트 데이터 포맷이다.
JSON.stringify 메서드는 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야하는데, 이를 직렬화(serializing)라 한다. JSON 포맷의 문자열을 객체화 할때는 JSON.parse 메서드를 사용하며, 이를 역직렬화(deserializing)라고 한다

 

HTTP 요청 전송 순서

1. XMLHttpRequest.prototype.open 메서드로 HTTP요청을 초기화한다.
2. 필요에 따라 XMLHttpRequest.prototype.setRequestHeader 메서드로 특정 HTTP 요청의 헤더값을 설정한다.
3. XMLHttpRequest.prototype.send 메서드로 HTTP 요청을 전송한다.

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성

xhr.open('POST', '/users'); // HTTP 요청 초기화

xhr.setRequestHeader('content-type', 'application/json'); // HTTP 요청 헤더 설정, MIME 타입 json으로 지정

xhr.send(JSON.stringify({id:1, content:'HELLO'})); // HTTP 요청 전송

 

HTTP 요청 메서드

클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)를 알리는 방법이다.
주로 5가지 요청 메서드 (GET, POST, PUT, PATCH, DELETE)를 사용하여 CRUD를 구현한다.

GET 요청 메서드는 데이터를 URL의 일부인 query string으로 서버에 전송한다.
**요청 메서드가 GET인경우, 페이로드로 전달한 인수는 무시되고, request body는 null로 설정된다.

POST 요청 메서드는 데이터(페이로드 payload)를 request body에 담아 전송한다. (우편보낼때 내용물 안보이니까 숨겨서)
** 페이로드가 객체인 경우 직렬화(stringify) 한다음 전달해야한다. axios는 이걸 알아서 해주고, fetch는 직접 해줘야한다.

 

REST API

REST(REpresentational State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful" 이라고 표현한다.

설계 원칙

1. URI는 리소스를 표현하는데 집중한다. ex) GET /productDetail/1  
2. 행위에 대한 정의는 HTTP 요청 메서드를 통해 한다. ex) DELETE /productDetail/2

요청 메서드 GET/POST/PUT/PATCH/DELETE 에서 payload의 MIME type을 지정해줘야하는 메서드는 POST,PUT,PATCH이다.