TIL 05-20 JS 中 AJAX (Asynchronous JavaScript and XML)

김덕협·2026년 5월 20일

TIL

목록 보기
12/41

AJAX (Asynchronous JavaScript and XML)

비동기적인 웹 애플리케이션 개발을 위한 핵심 기술

📌 복습 (Remind)

이벤트

무언가 일어났다는 신호 ⇒ 웹 상에서 어떻게 구현할까?

  1. 요소를 가져오기 (querySelector)
  2. 이벤트 핸들러 틀 작성 (콜백 함수, 실제로 이벤트가 발생했을 때 동작할 함수)
  3. addEventListener로 요소와 이벤트 핸들러를 연결
  4. 이벤트 핸들러 내부 작성하기

버블링 (Bubbling)

  • 이벤트가 상위 요소로 전달되는 것
  • event: 콜백함수에 첫 번째 파라미터로 전달됨 (이벤트에 대한 정보가 담겨짐)
  • event.target: 이벤트가 발생한 원본 지점
  • event.currentTarget: 실제로 지금 이벤트가 발생하고 있는 지점

캡처링 (Capturing)

  • 이벤트가 하위 요소로 전달되는 것
  • 사용 X (중간에 권한 탈취 시에만 사용)

preventDefault

  • 현재 이벤트에 대한 기본 동작을 막는다.
    • ctrl + c ⇒ 복사 ⇒ copy 이벤트 ⇒ 복사 안됨
    • form 제출 ⇒ submit ⇒ 새로고침도 막을 수 있다.


1. 비동기 (Asynchronous)

동기 (Synchronous)

프로그램의 실행 흐름이 순차적으로 진행되는 방식
(하나의 작업이 완료된 후 다음 작업이 실행되는 방식)

🏪 동기(Synchronous) 실생활 예시 - 카페 커피 주문

  • [손님 1] 아메리카노 한 잔 주세요.
  • [바리스타] 아메리카노 하나요. 주문이 완료될 때까지 잠시만 기다려주세요.
  • [손님 1] 네, 감사합니다. (커피가 나올 때까지 대기)
  • [바리스타] 아메리카노 나왔습니다. 감사합니다.
  • [손님 2] 카페라떼 두 잔 주세요.
// 동기 예시 코드
console.log('작업 1 시작')

const syncTask = function () {
  for (let i = 0; i < 1000000000; i++) {
    // 반복 실행 동안 잠시 대기
  }
  return '작업 완료'
}

const result = syncTask()
console.log(result)

console.log('작업 2 시작')

비동기 (Asynchronous)

특정 작업의 실행이 완료될 때까지 기다리지 않고 다음 작업을 즉시 실행하는 방식
(한 작업의 완료 여부를 기다리지 않고, 다른 작업을 동시에 수행할 수 있는 방식)

☕ 비동기(Asynchronous) 실생활 예시 - 카페 커피 주문

  • [손님 1] 아메리카노 한 잔 주세요.
  • [바리스타] 아메리카노 하나요. 여기 진동 벨 드리겠습니다.
  • [손님 1] 네, 감사합니다.
  • [바리스타] 안녕하세요. 어떤 거 드릴까요?
  • [손님 2] 카페라떼 두 잔 주세요.

🌐 비동기 실생활 예시 - 브라우저

브라우저는 웹페이지를 먼저 처리되는 요소부터 그려 나가며, 처리가 오래 걸리는 것들은 별도로 처리가 완료 되는 대로 병렬적으로 진행

console.log('작업 1 시작')

const asyncTask = function (callBack) {
  setTimeout(() => {
    callBack('작업 완료')
  }, 3000)
}

asyncTask((result) => {
  console.log(result)
})

console.log('작업 2 시작')

// 출력결과
// 작업 1 시작
// 작업 2 시작
// 작업 완료

동기 vs 비동기 비교

구분Synchronous (동기)Asynchronous (비동기)
작업 처리 방식• 시작 순서대로 처리
• 앞의 작업이 먼저 끝나야만 다음 작업을 시작할 수 있음		• 병렬적 수행
• 당장 처리를 완료할 수 없는 작업들은 백그라운드에서 실행되며 빨리 완료되는 작업부터 처리
장점• 단순하고 예측 가능한 흐름• 시간이 오래 걸리는 작업을 백그라운드에 위임해 효율성 증가
• 프로그램이 멈추지 않아 사용자 경험(UX) 향상
단점• 시간이 오래 걸리는 작업이 실행되면, 해당 작업이 끝날 때까지 프로그램 전체가 멈춤
• 시스템 자원의 낭비		• 작업의 시작 순서와 완료 순서가 다를 수 있어, 복잡한 흐름과 결과값을 처리해야 하므로 코드의 복잡성 증가


2. JavaScript와 비동기

JS는 한 번에 하나의 일만 수행할 수 있는 Single Thread 언어라 동시에 여러 작업 처리가 불가능하다.

그럼 어떻게 비동기 처리를 할까? 🤔

JavaScript Runtime

  • Single Thread가 비동기 처리를 할 수 있도록 도와주는 환경이 필요
  • JavaScript가 동작할 수 있는 환경(Runtime) ⇒ 브라우저, Node.js

📦 [정리] 브라우저 환경에서의 JavaScript 비동기 처리 관련 요소

1️⃣ JavaScript Engine의 Call Stack

  • 코드가 실행되면 함수 호출이 순서대로 쌓이는 작업 공간
  • 기본적인 JavaScript의 Single Thread 작업 처리

2️⃣ Web API

  • 시간이 걸리거나 언제 실행될 지 모르는 비동기 작업들을 처리하는 곳
  • 브라우저에서 제공하는 runtime 환경

3️⃣ Task Queue

  • Web API에서 처리가 완료된 작업들이 순서대로 줄을 서서 기다리는 대기열

4️⃣ Event Loop

  • Call Stack이 비어 있는지 계속해서 확인하면서 비는 순간 Task Queue에서 가장 오래된 작업을 콜 스택으로 보내는 역할


3. Ajax (Asynchronous JavaScript and XML)

비동기적인 웹 애플리케이션 개발을 위한 기술

Ajax는 웹 페이지 전체를 새로고침하지 않고, 백그라운드에서 서버와 데이터를 주고받는 비동기 통신 기술이다.

구글 지도 앱을 움직여도 끊김이 없고, '좋아요'를 눌렀을 때 페이지만 부분적으로 바뀌는 것이 가능하다. 즉, 웹 페이지를 데스크톱 애플리케이션처럼 동적이고 반응적으로 만들어주는 현대 웹의 핵심 기술 중 하나이다.

Ajax 정의

  • XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹 페이지를 구성하는 방식
  • 브라우저와 서버 간의 데이터를 비동기적으로 교환하는 기술
  • Ajax를 사용하면 페이지 전체를 새로고침 하지 않고도 동적으로 데이터를 불러와 화면을 갱신할 수 있음

Ajax의 'X'는 원래 XML을 의미했지만, 현재는 더 가볍고 JavaScript에서 다루기 쉬운 JSON 형식을 주로 사용

Ajax 목적

1. 비동기 통신

  • 웹 페이지 전체를 새로고침하지 않고 서버와 데이터를 주고받을 수 있음

2. 부분 업데이트

  • 전체 페이지가 다시 로드되지 않고 HTML 페이지 일부 DOM만 업데이트
  • 페이지의 일부분만 동적으로 갱신할 수 있어 사용자 경험이 향상

3. 서버 부하 감소

  • 필요한 데이터만 요청하므로 서버의 부하를 줄일 수 있음

XHR 객체 (XMLHttpRequest 객체)

  • JavaScript를 사용하여 서버에 HTTP 요청을 할 수 있는 객체
  • 웹 페이지의 전체 새로고침 없이도 서버로부터 데이터를 가져오거나 보낼 수 있음

이름에 XML이라는 데이터 타입이 들어가긴 하지만 XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있음

기존 기술과의 차이 - Ajax

  1. XHR 객체 생성 및 요청
  2. 서버는 새로운 페이지를 응답으로 만들지 않고 필요한 부분에 대한 데이터만 처리 후 응답 (JSON 및 기타 데이터)

➤ 새로운 페이지를 받는 것이 아닌 필요한 부분의 데이터만 받아 기존 페이지의 일부를 수정 (새로고침 X)
➤ 서버에서 모두 처리되던 데이터 처리의 일부분이 이제는 클라이언트 쪽에서 처리되므로 교환되는 데이터양과 처리량이 줄어듦

Client  ──── XHR 객체 생성 및 요청 ───>  Server
        <───────── JSON ─────────────

💡 이벤트 핸들러는 비동기 프로그래밍의 한 형태

  • 이벤트가 발생할 때마다 호출되는 함수(콜백 함수)를 제공하는 것
  • HTTP 요청은 응답이 올때까지의 시간이 걸릴 수 있는 작업이라 비동기이며, 이벤트 핸들러를 XHR 객체에 연결해 요청의 진행 상태 및 최종 완료에 대한 응답을 받음


4. Axios

Axios 정의 및 특징

  • 클라이언트 및 서버 사이에 HTTP 요청을 만들고 응답을 처리하는 데 사용되는 자바스크립트 라이브러리
  • 서버와의 HTTP 요청과 응답을 간편하게 처리할 수 있도록 도와주는 도구
  • 브라우저를 위한 XHR 객체 생성
  • 간편한 API를 제공하며, Promise 기반의 비동기 요청을 처리

➤ 주로 웹 애플리케이션에서 서버와 통신할 때 사용

Ajax를 활용한 클라이언트 서버 간 동작

XHR 객체 생성 및 요청 → 응답 데이터 생성 → JSON 데이터 응답 → Promise 객체를 활용해 DOM 조작

(웹 페이지의 일부분 만을 다시 로딩)

Axios 설치 및 사용

CDN 방식으로 사용하기 (https://axios-http.com/)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  • axios 객체를 활용해 요청을 보낸 후 응답 데이터 Promise 객체를 받음

예시

axios({
  method: 'get',
  url: 'https://api.thecatapi.com/v1/images/search'
})
  .then((response) => {
    console.log(response)
    console.log(response.data)
  })
  .catch((error) => {
    console.error(error)
  })

"Promise" object

  • 자바스크립트에서 비동기 작업을 처리하기 위한 객체
  • 비동기 작업의 최종 완료(또는 실패)와 그 결과값을 나타냄
const promiseObj = axios({
  method: 'get',
  url: 'https://api.thecatapi.com/v1/images/search'
})

console.log(promiseObj) // Promise object

then() & catch()

  • then() : 작업이 성공적으로 완료되었을 때 실행될 콜백 함수를 지정
  • catch() : 작업이 실패했을 때 실행될 콜백 함수를 지정

💡 콜백 함수: 다른 함수의 인자로 넘겨지는 함수

promiseObj
  .then((response) => {
    console.log(response)       // Response object
    console.log(response.data)  // Response data
  })
  .catch((error) => {
    console.error(error)
  })

Axios 전체 예시 코드

<!-- axios.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 1.
    const promiseObj = axios({
      method: 'get',
      url: 'https://api.thecatapi.com/v1/images/search'
    })

    console.log(promiseObj) // Promise object

    promiseObj
      .then((response) => {
        console.log(response)       // Response object
        console.log(response.data)  // Response data
      })
      .catch((error) => {
        console.error(error)
      })

    // // 2.
    // axios({
    //   method: 'get',
    //   url: 'https://api.thecatapi.com/v1/images/search'
    // })
    //   .then((response) => {
    //     console.log(response)
    //     console.log(response.data)
    //   })
    //   .catch((error) => {
    //     console.error(error)
    //   })
  </script>
</body>
</html>

Axios 기본 구조

✅ 성공 처리

  • 서버로부터 받은 응답 데이터를 처리
  • then 메서드를 사용해서 "성공했을 때 수행할 로직"을 작성
  • then(callback)
    • 요청한 작업이 성공하면 callback 실행
    • callback은 이전 작업의 성공 결과를 인자로 전달 받음

❌ 실패 처리

  • 네트워크 오류나 서버 오류 등의 예외 상황을 처리
  • catch 메서드를 사용해서 "실패했을 때 수행할 로직"을 작성
  • catch(callback)
    • then()이 하나라도 실패하면 callback 실행 (남은 then은 중단)
    • callback은 이전 작업의 실패 객체를 인자로 전달 받음
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
  .then(콜백함수)
  .catch(콜백함수)


5. Ajax와 Axios 비교

AjaxAxios
하나의 특정한 기술을 의미하는 것이 아니라, 비동기적인 웹 애플리케이션 개발에 사용하는 기술들의 집합을 지칭클라이언트 및 서버 사이에 HTTP 요청을 만들고 응답을 처리하는 데 사용되는 자바스크립트 라이브러리
개념이자 접근 방식Promise API를 기반으로 하여 비동기 처리를 더 쉽게 할 수 있음
실현하는 구체적인 도구
XMLHttpRequest를 추상화하여 더 사용하기 쉽게 만든 라이브러리


6. Callback과 Promise ⭐

비동기 처리의 특성

  • 비동기 처리의 핵심은 작업이 시작되는 순서가 아니라 완료되는 순서에 따라 처리된다는 것
  • 개발자 입장에서 코드의 실행 순서가 불명확하다는 단점이 존재하고, 이로 인해 실행 결과를 정확히 예측하며 코드를 작성하기 어려울 수 있음

💡 비동기: 하나의 작업이 끝날 때까지 기다리지 않고, 다른 작업을 실행

비동기 처리 관리 방법

  1. 비동기 콜백
    • 비동기 작업이 완료된 후 실행될 함수를 미리 정의
  2. Promise
    • 비동기 작업의 최종 완료 또는 실패를 나타내는 객체


7. 비동기 콜백 (지금은 안 씀, 고전)

  • 비동기적으로 처리되는 작업이 완료되었을 때 실행되는 함수
  • 연쇄적으로 발생하는 비동기 작업을 순차적으로 동작할 수 있게 함

➤ 작업의 순서와 동작을 제어하거나 결과를 처리하는 데 사용

const asyncTask = function (callBack) {
  setTimeout(function () {
    console.log('비동기 작업 완료')
    callBack()
  }, 2000)
}

asyncTask(function () {
  console.log('작업 완료 후 콜백 실행')
})

// 출력 결과
// 비동기 작업 완료
// 작업 완료 후 콜백 실행

🚨 비동기 콜백의 한계

  • 비동기 콜백 함수는 보통 어떤 기능의 실행 결과를 받아서 다른 기능을 수행하기 위해 많이 사용됨
  • 이 과정을 작성하다 보면 비슷한 패턴이 계속 발생
    • A를 처리해서 결과가 나오면, 첫 번째 callback 함수를 실행하고
    • 첫 번째 callback 함수가 종료되면, 두 번째 callback 함수를 실행하고
    • 두 번째 callback 함수가 종료되면, 세 번째 callback 함수를 실행하고 …

➤ 이로 인해 "콜백 지옥" 발생 😱



8. Promise

  • JavaScript에서 비동기 작업의 결과를 나타내는 객체
  • 비동기 작업이 완료되었을 때 결과 값을 반환하거나, 실패 시 에러를 처리할 수 있는 기능을 제공
  • 콜백 지옥 문제를 해결하기 위해 등장한 비동기 처리를 위한 객체
  • "작업이 끝나면 실행 시켜 줄게" 라는 약속

➤ Promise 기반의 HTTP 클라이언트 라이브러리가 바로 Axios

비동기 콜백 vs Promise

🔴 비동기 콜백

  • 함수를 중첩시켜 코드가 깊어짐
// 비동기 콜백 방식
work1(function () {
  // 첫번째 작업 ...
  work2(result1, function (result2) {
    // 두번째 작업 ...
    work3(result2, function (result3) {
      console.log('최종 결과 :' + result3)
    })
  })
})

🟢 Promise

  • then 메서드를 통해 여러 비동기 작업을 연결하는 체이닝(Chaining) 하여 순차적으로 연결
// promise 방식
work1()
  .then((result1) => {
    // work2
    return result2
  })
  .then((result2) => {
    // work3
    return result3
  })
  .catch((error) => {
    // error handling
  })

then & catch의 chaining

  • axios로 처리한 비동기 로직은 항상 promise 객체를 반환
  • 즉, then과 catch는 모두 항상 promise 객체를 반환

➤ 계속해서 chaining을 할 수 있음

  • then을 계속 이어 나가면서 작성할 수 있게 됨
  • 결과적으로 비동기 작업의 순차적인 처리를 가능하게 함
  • 코드를 보다 직관적이고 가독성 좋게 작성할 수 있게 함

💡 chaining: 함수 반환 값에 꼬리를 물고 다음 함수를 바로 호출하는 것

axios({}).then(...).then(...).catch(...)
axios({}) // Promise 객체 return
  .then(성공하면 수행할 1번 콜백함수)
  .then(1번 콜백함수가 성공하면 수행할 2번 콜백함수)
  .then(2번 콜백함수가 성공하면 수행할 3번 콜백함수)
  ...
  .catch(실패하면 수행할 콜백함수)

then 메서드 chaining 적용

chaining을 활용해 cat api 실습 코드 개선하기

➤ 첫번째 then 콜백함수의 반환 값이 이어지는 then 콜백함수의 인자로 전달

Before

.then((response) => {
  imgUrl = response.data[0].url
  imgElem = document.createElement('img')
  imgElem.setAttribute('src', imgUrl)
  document.body.appendChild(imgElem)
})

After (Chaining 적용)

.then((response) => {
  imgUrl = response.data[0].url
  return imgUrl
})
.then((imgData) => {
  imgElem = document.createElement('img')
  imgElem.setAttribute('src', imgData)
  document.body.appendChild(imgElem)
})

then 메서드 chaining의 장점

1. 가독성

  • 비동기 작업의 순서와 의존 관계를 명확히 표현할 수 있어 코드의 가독성이 향상

2. 에러 처리

  • 각각의 비동기 작업 단계에서 발생하는 에러를 분할에서 처리 가능

3. 유연성

  • 각 단계마다 필요한 데이터를 가공하거나 다른 작업을 수행할 수 있어서 더 복잡한 비동기 흐름을 구성할 수 있음

4. 코드 관리

  • 비동기 작업을 분리하여 구성하면 코드를 관리하기 용이


🎯 핵심 정리

개념설명
동기순차적 처리, 앞 작업이 끝나야 다음 작업 실행
비동기병렬 처리, 작업 완료를 기다리지 않고 다음 작업 실행
Ajax비동기 웹 통신 기술의 집합 (개념)
AxiosPromise 기반 HTTP 클라이언트 라이브러리 (도구)
Callback비동기 작업 완료 후 실행할 함수 (콜백 지옥 발생)
Promise비동기 작업의 최종 결과를 나타내는 객체 (체이닝으로 해결)
then성공 시 실행할 콜백 지정
catch실패 시 실행할 콜백 지정
profile
김덕협
뭘봐
이전 포스트

TIL 05-19 JS Controlling Event - 이벤트 제어하기

다음 포스트

TIL 05-25 DRF 2

0개의 댓글