TIL - 20260512

0512 웹 개발 기초 복습 (4/N): JavaScript 비동기 처리와 서버 통신

---

✅ 1. 동기(Synchronous) vs 비동기(Asynchronous)

• JavaScript 코드의 실행 방식을 이해하는 것은 인터랙티브한 웹 페이지를 만드는 데 매우 중요합니다.

• 동기 (Synchronous):

  • 개념: 작업이 순차적으로, 한 번에 하나씩 실행되는 방식. 이전 작업이 완료될 때까지 다음 작업은 대기(Blocking)합니다.
  • 예시:

    console.log('첫 번째 작업');
    // 이 작업이 끝날 때까지 아래 코드는 실행되지 않음
    alert('이것은 동기 작업입니다.'); 
    console.log('세 번째 작업');

• 비동기 (Asynchronous):

  • 개념: 시간이 오래 걸리는 작업(e.g., 서버에 데이터 요청, 타이머)을 백그라운드에서 실행시킨 후, 결과를 기다리지 않고 즉시 다음 코드를 실행하는 방식. (Non-blocking)
  • 필요성: 만약 서버에서 데이터를 가져오는 데 3초가 걸린다면, 동기 방식으로는 3초 동안 웹 페이지 전체가 멈춰버립니다. 비동기 방식은 이러한 "멈춤" 현상 없이 부드러운 사용자 경험을 제공합니다.

---

✅ 2. 비동기 처리 방식의 발전

➕ 2-1. 콜백 함수 (Callback Function)

• 개념: 비동기 작업이 완료된 후 실행될 함수를 미리 인자로 전달하는 가장 전통적인 방식.
• 문제점 (콜백 지옥, Callback Hell): 비동기 작업이 여러 개 중첩되면, 코드가 계속해서 안으로 파고드는 피라미드 형태가 되어 가독성과 유지보수성이 극도로 나빠집니다.

➕ 2-2. Promise (ES6+)

• 개념: 비동기 작업의 "미래의 결과(성공 또는 실패)"를 나타내는 객체입니다.

• 3가지 상태:

  • pending (대기): 비동기 작업이 아직 끝나지 않은 상태.
  • fulfilled (이행): 비동기 작업이 성공적으로 완료된 상태.
  • rejected (거부): 비동기 작업이 실패한 상태.

• 메서드 체이닝: .then()(성공 시)과 .catch()(실패 시) 메서드를 사용하여 콜백 지옥을 해결하고, 코드의 흐름을 더 명확하게 만듭니다.

  fetch('api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

➕ 2-3. async / await (ES8+)

• 개념: Promise를 기반으로, 비동기 코드를 동기 코드처럼 보이게 작성할 수 있게 해주는 문법 설탕(Syntactic Sugar)입니다. 현재 가장 권장되는 방식입니다.

• 규칙:

  • async 키워드는 반드시 함수 앞에 붙여야 합니다.
  • await 키워드는 async 함수 내에서만 사용할 수 있으며, Promise가 완료될 때까지 코드의 실행을 기다립니다.
  • 에러 처리는 try...catch 구문을 사용합니다.

  async function fetchData() {
    try {
      const response = await fetch('api/data'); // Promise가 완료될 때까지 기다림
      const data = await response.json();      // Promise가 완료될 때까지 기다림
      console.log(data);
    } catch (error) {
      console.error('Error:', error);
    }
  }

---

✅ 3. 서버 통신: AJAX, Fetch API, JSON

• AJAX (Asynchronous JavaScript and XML): 페이지 전체를 새로고침하지 않고도, 백그라운드에서 서버와 데이터를 주고받아 웹 페이지의 일부만 동적으로 업데이트하는 기술의 총칭.

• Fetch API: AJAX를 구현하기 위한 현대적인 브라우저 내장 API. Promise 기반으로 동작합니다.

  • 데이터 조회 (GET): fetch('url')
  • 데이터 전송 (POST): fetch('url', { method: 'POST', headers: {...}, body: ... })

• JSON (JavaScript Object Notation): 서버와 클라이언트 간에 데이터를 교환하기 위해 사용되는 경량의 텍스트 기반 데이터 형식. JavaScript의 객체 문법과 매우 유사하여 다루기 쉽습니다.

  • JSON.stringify(object): JavaScript 객체 → JSON 문자열로 변환. (서버로 보낼 때)
  • JSON.parse(string): JSON 문자열 → JavaScript 객체로 변환. (서버로부터 받을 때)
    • fetch의 response.json() 메서드가 이 과정을 자동으로 처리해줍니다.

---

✅ 4. 종합 실전 예제: async/await로 API 데이터 가져오기

// API로부터 사용자 목록을 가져와 <ul> 태그에 추가하는 함수
async function displayUsers() {
  const userListElement = document.querySelector('#user-list');

  try {
    // 1. API 요청을 보내고 응답을 기다림
    const response = await fetch('https://jsonplaceholder.typicode.com/users');

    // 2. HTTP 에러 처리 (e.g., 404, 500)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 3. 응답 본문을 JSON으로 파싱하고 결과를 기다림
    const users = await response.json();

    // 4. 받아온 데이터로 DOM 조작
    users.forEach(user => {
      const li = document.createElement('li');
      li.textContent = user.name;
      userListElement.appendChild(li);
    });

  } catch (error) {
    // 5. 네트워크 에러나 파싱 에러 처리
    console.error('Failed to fetch users:', error);
  }
}

// 함수 실행
displayUsers();

---

📌 요약

• 비동기 프로그래밍은 시간이 오래 걸리는 작업을 백그라운드에서 처리하여 애플리케이션의 응답성을 높이는 핵심적인 방식입니다.
• 비동기 처리 방식은 콜백 → Promise → async/await 순으로 발전했으며, 현재는 async/await가 가장 가독성 높고 직관적인 방법으로 널리 사용됩니다.
• Fetch API는 Promise 기반으로 동작하는 현대적인 서버 통신 API이며, JSON은 서버와 클라이언트 간의 표준 데이터 교환 형식입니다.
• async/await와 try...catch를 함께 사용하여 비동기 통신과 에러 처리를 명확하고 안정적으로 구현할 수 있습니다.