[JAVASCRIPT] 비동기 처리와 AJAX

동기(Synchronous)와 비동기(Asynchronous)

• 동기 방식 : 하나의 작업이 끝난 뒤 다음 작업을 진행하는 순차적인 처리 방식
• 비동기 방식 : 하나의 작업의 종료까지 기다리지 않고 다음 작업을 진행하는 비순차적인 처리 방식

 

장단점

• 동기방식
  - 장점 : 설계가 매우 간단하고 직관적
  - 단점 : 결과가 주어질때까지 아무것도 못하고 대기해야한다
• 비동기방식
  - 장점 : 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다. 
  - 단점 : 동기보다 복잡

 

비동기 처리 프로그램의 실행 과정

자바스크립트 엔진은 두가지로 구성된다 

• Memory Heap : 메모리 할당이 발생하는 부분
• Call Stack : 함수의 호출을 기록하는 Stack 자료구조

자바스크립트 엔진은 싱글 스레드로 동작하는데 싱글 스레드는 Call Stack을 1개만 가진다는 것으로,

한번에 하나의 작업만을 처리할 수 있다.

자바스크립트 엔진 밖에서도 자바스크립트 실행에 관여를 하는 요소들이 존재한다. 각각 Web API Task Queue Event Loop이다. 이 요소들이 자바스크립트가 비동기적으로 여러 작업들을 처리할 수 있게한다.

 

먼저 Web API는 브라우저에서 제공되는 API이며, AJAX나 setTimeout 등의 비동기 작업을 실행한다.

자바스크립트에서 setTimeout 과 같은 함수를 실행하면, 자바스크립트 엔진은 Web API에 setTimeout 을 요청하고 동시에 setTimeout에 넣어준 Callback 까지 전달한다. Call stack 에서는 Web API 요청 이후 setTimeout 작업이 완료되어 제거된다. 그리고 전달 받은 Callback을 Queue에 넘겨준다.

Queue에 있는 작업들을 Event Loop를 통해 Call Stack으로 옮겨진다. Event Loop가 지속적으로 Call Stack이 비어있는지 확인을 하고, 비어있다면 작업들을 Queue에서 꺼내와 Call Stack에 넣는 역할을 한다.

 

 

Async와 Await

ECMAScript 2017이후에 등장한 새로운 비동기 처리 연산자이다.

Async와 Await을 사용하여 비동기 처리 코드를 간결하게 동기적으로 처리할 수 있다.

 

Async와 Await 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

먼저 함수의 앞에 async 라는 예약어를 붙입니다. 그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. 여기서 주의하셔야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다.

일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수입니다.

 

 

AJAX

• Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
• 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

=>  자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고 받는 기술.

 

 

 

AJAX 사용 이유

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다.

이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

AJAX 동작 원리

1. 클라이언트에서 자바스크립트 함수를 통해 AJAX요청을 한다.

2.XMLHttpRequest 객체의 인스턴스가 생성된다.

3. XMLHttpRequest를 통해 현재 HTML의 상태를 가진 XML 메시지를 구성하여 웹서버로 요청한다.

4. 웹서버에서 처리 후 응답값을 XML 메시지를 보내 XMLHttpRequest 객체가 수신한다.

5. 수신된 XML 메시지를 파싱하여 데이터를 업데이트한다.

 

 

 

AJAX 구성

$.ajax({

        // 요청할 url을 입력합니다.
        url : requestUrl,

        // 통신 타입을 설정합니다. POST 또는 GET을 사용할 수 있습니다.
        type : 'POST',

        // 비동기 호출 전송 설정 값으로 true/false 를 선택하고 기본값은 true입니다.
        async : true,

        // 서버에 요청 시 전송할 파라미터를 기입합니다. (key / value 형식의 객체)
        data : {name : "홍길동"},

        // 응답 받을 데이터의 타입을 선택합니다. (xml / html / json / jsonp / script / text)
        // 선언하지 않으면 default는 서버가 주는 응답의 mimetype을 기본으로 합니다.
        dataType : "json",

        // 요청에 대한 응답 제한 시간으로 단위는 millisecond 입니다.
        timeout : 10000,    

        // 서버에 데이터를 보낼 때 형식을 지정합니다.  기본값은 "application/x-www-form-urlencoded"입니다.
        contentType : "application/json",

        // HTTP 요청 전에 발생하는 이벤트 핸들러 입니다.
        beforeSend : function() {        

        },


        // HTTP 요청 성공 시 이벤트 핸들러 입니다.
        success : function(data) {            

        },


        // HTTP 요청 실패 시 이벤트 핸들러 입니다.
        error : function(request,status,error) {

        },


        // HTTP 요청 완료 시 이벤트 핸들러 입니다.
        complete : function() {

        }


});

 

 

 

 

---

참고

자바스크립트 async와 await

JavaScript의 비동기 처리 과정

 

Ajax 란 무엇이고, jQuery를 이용한 Ajax 사용법

 

AJAX란 무엇인가?

 

[JavaScript] 자바스크립트 비동기 처리와 AJAX, promise(프로미스)

[JavaScript] 자바스크립트 async, await를 통한 비동기 처리 다루기