AJAX란?

[ParkYK]

자바스크립트의 비동기 (Asynchronous) 방식이란?

자바스크립트는 기본적으로 싱글 스레드(Single-thread) 기반의 비동기(Asynchronous) 방식 (event loop 처리)을 사용하여 I/O 작업(파일 읽기, API 요청, DB 조회 등)을 효율적으로 처리한다. 

* 동기(Synchronous) 방식

• 코드가 순차적으로 실행됨.
• 이전 코드가 실행 완료될 때까지 다음 코드가 대기함.
• 실행 순서가 예측 가능하지만, 시간이 오래 걸리는 작업이 있으면 전체 코드 실행이 멈출 수 있음(Blocking).

예) console.log("1"); console.log("2"); console.log("3"); // 실행 결과: 1 → 2 → 3 (순차적 실행)

* 비동기(Asynchronous) 방식

• 특정 코드가 실행되는 동안 다른 작업을 동시에 진행할 수 있음.
• 시간이 오래 걸리는 작업(API 요청, 파일 읽기 등)을 백그라운드에서 실행하고, 완료되면 콜백함수(Callback) 또는 Promise, async/await을 이용해 처리.

예) console.log("1"); setTimeout(() => { console.log("2"); // 2초 후 실행됨 }, 2000); console.log("3");

     // 실행 결과: 1 → 3 → (2초 후) 2       ➡ setTimeout()이 비동기 함수라서 2초 동안 기다리는 동안 3이 먼저 출력됨.

* 자바스크립트의 비동기 처리 방식

① 콜백 함수(Callback)

• 특정 함수가 실행된 후 호출되는 함수.
• 하지만, 콜백이 여러 개 중첩되면 **콜백 지옥(Callback Hell)**이 발생하여 코드 가독성이 떨어짐.

function fetchData(callback) {

       setTimeout(() => {

             console.log("데이터 가져오기 완료");

             callback(); },

      2000);

}

fetchData(() => { console.log("다음 작업 실행"); });

위 방법의 단점: 콜백 함수가 계속 중첩되면 복잡해지고 유지보수가 어려워짐.

② Promise (ES6)

• resolve() 또는 reject()를 사용하여 비동기 작업이 성공했는지, 실패했는지를 반환함.
• .then()과 .catch()로 결과를 처리.

function fetchData() {

     return new Promise((resolve, reject) => {

            setTimeout(() => {

                  resolve("데이터 가져오기 성공");

            }, 2000);

      });

}

fetchData() .then(data => console.log(data)) // 성공 시 실행 .catch(error => console.log(error));  // 실패 시 실행

위 방법의 장점: 콜백 지옥을 해결하고, 가독성이 좋아짐.

③ async / await (ES8)

• async 키워드를 사용하여 비동기 함수를 정의하고, await를 사용하면 Promise의 결과를 기다린 후 실행할 수 있음.
• 코드가 동기 방식처럼 순차적으로 실행되는 것처럼 보이게 함.

function fetchData() {

     return new Promise((resolve, reject) => {

         setTimeout(() => {

                resolve("데이터 가져오기 성공");

         }, 2000);

      });

}

async function getData() {

        console.log("데이터 요청 중...");

        const result = await fetchData(); // fetchData() 실행 후 결과를 기다림

        console.log(result);

        console.log("작업 완료");

}

getData();

위 방법의  장점: async/await을 사용하면 Promise보다 가독성이 좋아지고, 동기 코드처럼 쉽게 이해할 수 있음.

👍 비동기 처리 방식 비교
방  식	설    명	장   점	단  점
콜백(Callback)	함수의 매개변수로 다른 함수를 전달하여 실행	간단한 비동기 처리	콜백 지옥 발생 가능
Promise	비동기 작업의 결과를 then()과 catch()로 처리	가독성이 좋음, 콜백 지옥 해결	then().then().then() 구조가 길어질 수 있음
async / await	Promise를 동기 코드처럼 작성 가능	가장 가독성이 좋음, 유지보수 용이	try-catch를 사용해야 에러 처리 가능

비동기 처리의 가장 흔한 사례 중 하나는 AJAX 다. 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고(순차적으로 코드가 실행되지 않음) 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

(●'◡'●) AJAX - 동기식 vs 비동기식 (●'◡'●)

AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 새로고침하지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있도록 하는 기술입니다. 일반적으로 XMLHttpRequest 객체나 최신 브라우저에서는 Fetch API, axios를 주로 사용하여 구현된다.

* AJAX의 주요 특징

• 비동기 처리: 페이지 전체를 새로고침하지 않고 필요한 데이터만 받아와 갱신할 수 있음.
• 빠른 사용자 경험: 서버 요청 후 페이지가 리로드되지 않으므로 더 부드러운 UX 제공.
• JSON 데이터 교환: XML보다는 JSON을 더 많이 사용하여 서버와 데이터를 주고받음.

AJAX를 통해 비동기적으로 수행하면, JSON/XML/TXT 등의 형태로 필요한 데이터만 받아 화면을 갱신하기 때문에 페이지 전체가 갱신되지 않게되니 당연히 불필요한 리소스를 절약할 수 있다. 또한, 브라우저 사용자 입장에서도 훨씬 쾌적한 이용을 할 수 있을 것이다.

* AJAX 예제 (XMLHttpRequest 방식) -------------
let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/comments", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText)); // 서버에서 받은 데이터 출력
    }
};
xhr.send();

* Fetch API를 이용한 AJAX 요청 (추천) -------------
fetch("/api/comments")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));
fetch()는 더 간결하고 Promise 기반이므로 웹 개발에 효과적.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
다른 비동기 처리 사례로는 setTimeout()이 있다. setTimeout()은 Web API의 한 종류인데, 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다. 아래 예를 보자.

// 예제 코드
console.log('Hello');

setTimeout(function() {
console.log('Bye');
}, 3000);

console.log('Hello Again');

실행을 해보면 결과 값이 아래와 같이 나온다.
  ‘Hello’ 출력
  ‘Hello Again’ 출력
  3초 후에 ‘Bye’ 출력
setTimeout() 역시 비동기 방식으로 실행되기 때문에, 3초를 머문 후에 다음 코드를 수행하는 것이 아니라, 일단 setTimeout()을 실행하고 나서 (내부적으로 시간은 흐름) 바로 다음 코드인 console.log('Hello Again');으로 넘어갔다. 
따라서, ‘Hello’, ‘Hello Again’를 먼저 출력하고 3초가 지나면 ‘Bye’가 출력된다.

✔ 콜백 함수로 비동기 처리 방식의 문제점? 해결하기
자바스크립트 비동기 처리 방식에 의해 발생할 수 있는 문제가 있을 수 있다. 이런 문제는 어떻게 해결할 수 있을까? 이 때 콜백(callback) 함수를 이용할 수 있다. AJAX 통신 코드를 콜백 함수로 적어 보겠다.

function getData(callbackFunc) {
$.get('https://domain.com/member/1', function(response) {
    callbackFunc(response);  // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
});
}

getData(function(datas) {
    console.log(datas);   // $.get()의 response 값이 datas에 전달됨
});

이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다.
콜백 함수의 동작 방식은 예를 들어 일종의 '식당 자리 예약'과 같다. 맛집을 가면 대개의 경우에 사람이 많아 자리가 없다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 기다린다. 만약 식당에서 자리가 생기면 자리가 났다고 알려준다. 그 메세지를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같다. 손님 입장에서는 자리가 날 때까지 무작정 식당에서 기다리지 않고 다른 일을 할 수도 있고 아니면 다른 식당 자리를 알아볼 수도 있다. 자리가 났을 때만 연락이 오기 때문에 미리 가서 기다릴 필요도 없고, 직접 식당 안에 들어가서 자리가 비어 있는지 확인할 필요도 없다. 자리가 준비된 시점, 즉 데이터가 준비된 시점에서만 우리가 원하는 동작(자리에 앉는다, 특정 값을 출력한다 등)을 수행할 수 있다.

 

//

기존 기술과의 차이점

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버에 전달 된다. 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 HTML 코드를 다시 한번 전송 받게 되므로써 많은 대역폭을 낭비하게 된다. 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.

반면에 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 SOAP이나 XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 쓴다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

장점

• 페이지 이동없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 량을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

단점

• Http클라이언트의 기능이 한정되어 있다.
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 Debugging이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음.

✔ Ajax의 보급
이것은 이미 존재하던 기술이었지만, 2005년 초에 있었던 몇 가지 사례 이후로 인기를 끌기 시작했다. 먼저 구글이 구글 그룹스를 포함한 훌륭한 대화형 애플리케이션의 기반을 위해 비동기식 통신을 이용한 것이다. 두 번째로는 Ajax라는 용어가 AJAX: A new approach for a new application 기사에서 등장한 것으로, 이후 빠르게 대중화되어 이 기법의 보급에 도움이 되었다.
현재 대화형 웹 페이지를 위한 도구로서 Ajax를 이용하는 애플리케이션들이 급격히 늘어나고 있으며, 이는 부분적으로 이용할 수 있는 애플리케이션 툴킷(예: Ruby on Rails, DWR)이 늘어나 프로그래머들이 구현하기가 쉬워진 때문이다.
대한민국에서도 네이버와 다음등을 비롯한 포털 업체에서 이 기술을 도입하고 있다.

✔ Ajax에 대한 비판
Ajax의 용어에 대해서 비판이 있어 왔는데, 어댑티브 패스(Adaptive Path)의 컨설턴트는 이 조어를 만든 사람이 이미 있는 기법을 마케팅 수단으로써 사용하고 있다고 주장했다. Ajax 기술이 이전에는 일반적인 이름이 없었기 때문에 이 용어 자체가 발전이 될 수 있다. 그러나 이 기술을 이용해 가장 특출한 애플리케이션들을 만든 사람 중 하나인 한 구글 엔지니어가 그들이 사용한 기술이 '자바스크립트'라고 간주한다는 얘기도 있다.
Ajax는 소프트웨어 개발에 대한 새로운 접근방식이 아니다. 보다 높은 관점에서 Ajax는 MVC 패턴의 뷰와 컨트롤러에 해당하는 기술이며, 이런 방식은 이전의 프로그래밍 환경인 델파이, MFC, MP3, 비주얼 베이직, 오라클 ADF, 윈도우즈 Forms 등에서 이미 많이 사용하고 있던 것이다. 예를 들어 WebDAV를 사용하는 마이크로소프트 아웃룩 웹 액세스와 브라우저에서 직접 웹 서비스를 이용하는 웹 기반의 ERP 시스템 P2plus 같은 것들이 해당한다. 그러나 이전에는 표준적인 통신 모델이 없었기 때문에, 이들은 모두 독자적인 확장을 이용한다.
Ajax의 새로운 양상은 마이크로소프트의 인터넷 익스플로러만을 고려하면 되었을 예전의 기술과는 달리 이 같은 애플리케이션을 이용할 수 있는 브라우저가 다양해 졌다는 점이다.

✔ Ajax와 접근성
Ajax 사용에 있어서, Ajax 기술을 지원하지 않는 브라우저를 위한 대체물 만드는 것은 거의 힘들다. 이 같은 한계는 WAI 접근성 지침에 거스르는 측면이 있다.
한편, 웹 개발자들은 때때로 Ajax를 단순히 웹 페이지의 일부분을 대체하기 위해 사용한다. 비 AJAX 사용자가 전체 페이지를 불러오는 것에 비해 Ajax 사용자는 페이지의 일부분만을 불러올 수가 있다. 이것으로 개발자들이 비 AJAX 환경에 있는 사용자의 접근성을 포함한 경험을 보호할 수 있으며, 적절한 브라우저를 이용하는 경우에 전체 페이지를 불러오는 일 없이 응답성을 향상시킬 수 있다.