1. 비동기 프로그래밍이란? 🤔

비동기 프로그래밍이 뭔지 친구에게 설명한다고 생각해볼까? 아주 간단해! 비동기는 '기다리지 않고 다른 일을 하는 것'이라고 생각하면 돼.

1.1 자바스크립트와 싱글 스레드

자바스크립트는 싱글 스레드 언어야. 즉, 한 번에 하나의 작업만 처리할 수 있어. 그런데 어떻게 여러 작업을 동시에 처리하는 것처럼 보일까? 그 비밀은 바로 '이벤트 루프'에 있어!

이벤트 루프는 자바스크립트가 비동기 작업을 처리할 수 있게 해주는 핵심 메커니즘이야. 위 그림에서 볼 수 있듯이, 자바스크립트는 콜 스택에서 코드를 실행하고, 비동기 작업은 Web API로 넘겨. 작업이 완료되면 콜백 큐에 들어가고, 이벤트 루프가 콜 스택이 비었을 때 콜백을 실행해주는 거지! 😊

1.2 동기 vs 비동기 코드 비교

console.log("작업 1 시작");
// 시간이 오래 걸리는 작업
for (let i = 0; i < 1000000000; i++) {
  // 무거운 계산
}
console.log("작업 1 완료");
console.log("작업 2 시작");
        

console.log("작업 1 시작");
// 비동기 작업 (시간이 걸리지만 기다리지 않음)
setTimeout(() => {
  console.log("작업 1 완료");
}, 2000);
console.log("작업 2 시작"); // 작업 1이 끝나기 전에 실행됨!
        

비동기 코드의 장점은 뭘까? 바로 효율성이야! 특히 다음과 같은 상황에서 빛을 발하지:

1. 네트워크 요청 (API 호출, 파일 다운로드)
2. 파일 시스템 작업 (파일 읽기/쓰기)
3. 타이머 및 인터벌 (setTimeout, setInterval)
4. 사용자 입력 처리 (이벤트 리스너)
5. 데이터베이스 쿼리

2. 콜백 함수와 콜백 지옥 😱

자바스크립트에서 비동기 처리의 가장 기본적인 방법은 콜백 함수를 사용하는 거야. 콜백이란 간단히 말해서 '나중에 호출될 함수'를 의미해.

2.1 간단한 콜백 예제

function downloadFile(url, callback) {
  console.log(`${url}에서 파일 다운로드 시작...`);
  
  // 비동기 작업 시뮬레이션 (실제로는 fetch 등을 사용)
  setTimeout(() => {
    const fileName = url.split('/').pop();
    console.log(`${fileName} 다운로드 완료!`);
    callback(fileName); // 다운로드 완료 후 콜백 실행
  }, 2000);
}

downloadFile('https://example.com/photo.jpg', (fileName) => {
  console.log(`다운로드한 ${fileName}을 처리합니다.`);
});

console.log("다운로드 명령 후 즉시 실행되는 코드");
    

위 코드의 실행 순서는 어떻게 될까? 🤔

1. "https://example.com/photo.jpg에서 파일 다운로드 시작..." 출력
2. "다운로드 명령 후 즉시 실행되는 코드" 출력
3. 2초 후 "photo.jpg 다운로드 완료!" 출력
4. "다운로드한 photo.jpg을 처리합니다." 출력

이처럼 비동기 작업은 코드의 실행 순서가 작성된 순서와 다를 수 있어. 이게 바로 비동기의 특징이지!

2.2 콜백 지옥 (Callback Hell)

그런데 비동기 작업이 여러 개 중첩되면 어떻게 될까? 바로 콜백 지옥(Callback Hell)이 펼쳐져! 😱

실제 코드로 보면 이런 모습이야:

// 콜백 지옥의 예시
getUserData(userId, (userData) => {
  getPostsByUser(userData.id, (posts) => {
    getCommentsForLatestPost(posts[0].id, (comments) => {
      getLikesForComments(comments, (likes) => {
        getUsersWhoLiked(likes, (users) => {
          // 여기서 뭔가를 하려면...
          // 들여쓰기가 계속 깊어지고...
          // 코드가 점점 복잡해지고...
          console.log("드디어 원하는 데이터에 접근!", users);
        }, (error) => {
          console.error("좋아요 누른 사용자 정보 가져오기 실패", error);
        });
      }, (error) => {
        console.error("좋아요 정보 가져오기 실패", error);
      });
    }, (error) => {
      console.error("댓글 가져오기 실패", error);
    });
  }, (error) => {
    console.error("포스트 가져오기 실패", error);
  });
}, (error) => {
  console.error("사용자 데이터 가져오기 실패", error);
});
    

이런 코드는 읽기 어렵고, 유지보수하기 어렵고, 에러 처리도 복잡해져. 이런 문제를 해결하기 위해 등장한 것이 바로 Promise야! 🎉

3. Promise 완벽 이해하기 🤝

Promise는 자바스크립트에서 비동기 작업의 최종 완료(또는 실패)와 그 결과값을 나타내는 객체야. 쉽게 말하면, 미래에 완료될 작업의 결과를 약속(promise)하는 객체라고 생각하면 돼!

3.1 Promise의 3가지 상태

Promise는 항상 다음 세 가지 상태 중 하나야:

3.2 Promise 생성하기

Promise 객체는 new Promise() 생성자를 사용해서 만들어. 이 생성자는 executor라는 함수를 인자로 받아.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const success = true; // 작업 성공 여부 (예시)
  
  if (success) {
    // 작업이 성공하면 resolve 호출
    resolve('작업 성공! 여기 결과값이야.');
  } else {
    // 작업이 실패하면 reject 호출
    reject(new Error('작업 실패! 여기 에러 정보야.'));
  }
});
    

실제 예제를 통해 Promise를 만들어볼까?

// 파일 다운로드를 Promise로 구현
function downloadFilePromise(url) {
  return new Promise((resolve, reject) => {
    console.log(`${url}에서 파일 다운로드 시작...`);
    
    // 비동기 작업 시뮬레이션
    setTimeout(() => {
      const random = Math.random();
      
      if (random > 0.3) { // 70% 확률로 성공
        const fileName = url.split('/').pop();
        console.log(`${fileName} 다운로드 완료!`);
        resolve(fileName); // 성공 시 파일명 반환
      } else {
        reject(new Error('네트워크 오류로 다운로드 실패')); // 실패 시 에러 객체 반환
      }
    }, 2000);
  });
}
    

3.3 Promise 사용하기: then, catch, finally

Promise 객체는 then(), catch(), finally() 메서드를 통해 결과를 처리할 수 있어.

downloadFilePromise('https://example.com/photo.jpg')
  .then((fileName) => {
    console.log(`다운로드한 ${fileName}을 처리합니다.`);
    return `처리된_${fileName}`; // 다음 then으로 값을 전달
  })
  .then((processedFile) => {
    console.log(`${processedFile}을 저장합니다.`);
    return `저장된_${processedFile}`; // 체이닝 계속 가능
  })
  .catch((error) => {
    console.error(`오류 발생: ${error.message}`);
  })
  .finally(() => {
    console.log('다운로드 작업 종료 (성공이든 실패든)');
  });

console.log('다운로드 명령 후 즉시 실행되는 코드');
    

3.4 Promise 체이닝

Promise 체이닝은 여러 비동기 작업을 순차적으로 실행할 수 있게 해주는 강력한 기능이야. 콜백 지옥을 평평하게 만들어주지! 😎

// 콜백 지옥을 Promise 체이닝으로 변환
getUserDataPromise(userId)
  .then(userData => {
    return getPostsByUserPromise(userData.id);
  })
  .then(posts => {
    return getCommentsForLatestPostPromise(posts[0].id);
  })
  .then(comments => {
    return getLikesForCommentsPromise(comments);
  })
  .then(likes => {
    return getUsersWhoLikedPromise(likes);
  })
  .then(users => {
    console.log("드디어 원하는 데이터에 접근!", users);
  })
  .catch(error => {
    console.error("어디선가 오류 발생:", error);
  });
    

더 간결하게 화살표 함수의 암시적 반환을 사용하면:

getUserDataPromise(userId)
  .then(userData => getPostsByUserPromise(userData.id))
  .then(posts => getCommentsForLatestPostPromise(posts[0].id))
  .then(comments => getLikesForCommentsPromise(comments))
  .then(likes => getUsersWhoLikedPromise(likes))
  .then(users => console.log("드디어 원하는 데이터에 접근!", users))
  .catch(error => console.error("어디선가 오류 발생:", error));
    

이렇게 하면 코드가 훨씬 더 읽기 쉽고 유지보수하기 쉬워져! 들여쓰기 레벨도 일정하게 유지되고, 에러 처리도 한 곳에서 할 수 있어.

3.5 Promise.all, Promise.race, Promise.allSettled

여러 Promise를 동시에 처리해야 할 때 사용하는 메서드들이야:

// 여러 파일을 동시에 다운로드하는 예제
const fileUrls = [
  'https://example.com/file1.jpg',
  'https://example.com/file2.jpg',
  'https://example.com/file3.jpg'
];

// Promise.all 예제
Promise.all(fileUrls.map(url => downloadFilePromise(url)))
  .then(fileNames => {
    console.log('모든 파일 다운로드 완료:', fileNames);
  })
  .catch(error => {
    console.error('하나 이상의 파일 다운로드 실패:', error);
  });

// Promise.race 예제
Promise.race(fileUrls.map(url => downloadFilePromise(url)))
  .then(fileName => {
    console.log('가장 먼저 다운로드된 파일:', fileName);
  })
  .catch(error => {
    console.error('가장 먼저 실패한 다운로드:', error);
  });

// Promise.allSettled 예제
Promise.allSettled(fileUrls.map(url => downloadFilePromise(url)))
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`${fileUrls[index]} 다운로드 성공:`, result.value);
      } else {
        console.log(`${fileUrls[index]} 다운로드 실패:`, result.reason);
      }
    });
  });
    

이런 메서드들은 여러 비동기 작업을 효율적으로 관리할 수 있게 해줘. 특히 API 호출이나 데이터 처리 같은 작업에서 매우 유용해! 🚀

4. async/await 마스터하기 ⏳

Promise는 콜백 지옥을 해결해줬지만, 여전히 .then() 체인이 길어지면 코드가 복잡해질 수 있어. 그래서 ES2017에서는 async/await라는 더 직관적인 문법이 도입됐어!

4.1 async 함수 기본

async 키워드는 함수를 비동기 함수로 선언해. async 함수는 항상 Promise를 반환해!

// 기본 async 함수
async function greet() {
  return "안녕하세요!";
}

// 위 함수는 다음과 동일해:
// function greet() {
//   return Promise.resolve("안녕하세요!");
// }

greet().then(message => console.log(message)); // "안녕하세요!" 출력
    

4.2 await 키워드 사용하기

await 키워드는 Promise가 처리될 때까지 함수 실행을 일시 중지시켜. 그리고 Promise의 결과값을 반환해. await는 async 함수 내에서만 사용할 수 있어!

async function downloadAndProcessFile(url) {
  try {
    console.log(`${url} 다운로드 시작...`);
    
    // await는 Promise가 완료될 때까지 기다려
    const fileName = await downloadFilePromise(url);
    console.log(`${fileName} 다운로드 완료!`);
    
    // 첫 번째 작업이 완료된 후에 두 번째 작업 시작
    const processedFile = `처리된_${fileName}`;
    console.log(`${fileName}을 처리해서 ${processedFile} 생성`);
    
    // 두 번째 작업이 완료된 후에 세 번째 작업 시작
    const savedFile = `저장된_${processedFile}`;
    console.log(`${processedFile}을 저장해서 ${savedFile} 생성`);
    
    return savedFile;
  } catch (error) {
    // try/catch로 에러 처리
    console.error(`오류 발생: ${error.message}`);
    throw error; // 필요하다면 에러를 다시 던질 수 있어
  } finally {
    console.log('다운로드 작업 종료 (성공이든 실패든)');
  }
}

// async 함수 호출
downloadAndProcessFile('https://example.com/photo.jpg')
  .then(result => console.log('최종 결과:', result))
  .catch(error => console.error('최종 에러 처리:', error));

console.log('다운로드 명령 후 즉시 실행되는 코드');
    

위 코드의 실행 순서는:

1. "https://example.com/photo.jpg 다운로드 시작..." 출력
2. "다운로드 명령 후 즉시 실행되는 코드" 출력
3. 2초 후, 성공 시:
4. "photo.jpg 다운로드 완료!" 출력
5. "photo.jpg을 처리해서 처리된_photo.jpg 생성" 출력
6. "처리된_photo.jpg을 저장해서 저장된_처리된_photo.jpg 생성" 출력
7. "다운로드 작업 종료 (성공이든 실패든)" 출력
8. "최종 결과: 저장된_처리된_photo.jpg" 출력

4.3 Promise 체이닝과 async/await 비교

이전에 봤던 Promise 체이닝 예제를 async/await로 변환해보자:

getUserDataPromise(userId)
  .then(userData => getPostsByUserPromise(userData.id))
  .then(posts => getCommentsForLatestPostPromise(posts[0].id))
  .then(comments => getLikesForCommentsPromise(comments))
  .then(likes => getUsersWhoLikedPromise(likes))
  .then(users => console.log("드디어 원하는 데이터에 접근!", users))
  .catch(error => console.error("어디선가 오류 발생:", error));
        

async function getUsersWhoLikedLatestPost(userId) {
  try {
    const userData = await getUserDataPromise(userId);
    const posts = await getPostsByUserPromise(userData.id);
    const comments = await getCommentsForLatestPostPromise(posts[0].id);
    const likes = await getLikesForCommentsPromise(comments);
    const users = await getUsersWhoLikedPromise(likes);
    
    console.log("드디어 원하는 데이터에 접근!", users);
    return users;
  } catch (error) {
    console.error("어디선가 오류 발생:", error);
    throw error;
  }
}

// 함수 호출
getUsersWhoLikedLatestPost(123);
        

async/await를 사용하면 코드가 더 직관적이고 읽기 쉬워져. 마치 동기 코드를 작성하는 것처럼 순차적으로 작성할 수 있어서 로직을 이해하기 쉽지!

4.4 병렬 처리와 async/await

주의할 점은 await를 사용하면 기본적으로 작업이 순차적으로 실행된다는 거야. 만약 여러 비동기 작업을 병렬로 처리하고 싶다면 Promise.all과 함께 사용하면 돼!

// 순차 처리 (각 다운로드가 완료된 후 다음 다운로드 시작)
async function downloadFilesSequentially(urls) {
  const fileNames = [];
  
  for (const url of urls) {
    const fileName = await downloadFilePromise(url); // 각 다운로드를 기다림
    fileNames.push(fileName);
  }
  
  return fileNames;
}

// 병렬 처리 (모든 다운로드를 동시에 시작)
async function downloadFilesParallel(urls) {
  // Promise.all과 함께 사용하면 모든 Promise를 동시에 실행
  const fileNames = await Promise.all(
    urls.map(url => downloadFilePromise(url))
  );
  
  return fileNames;
}

// 사용 예
const urls = [
  'https://example.com/file1.jpg',
  'https://example.com/file2.jpg',
  'https://example.com/file3.jpg'
];

// 순차 처리 (약 6초 소요)
downloadFilesSequentially(urls)
  .then(files => console.log('순차 다운로드 완료:', files));

// 병렬 처리 (약 2초 소요)
downloadFilesParallel(urls)
  .then(files => console.log('병렬 다운로드 완료:', files));
    

성능이 중요한 경우 병렬 처리를 고려해봐야 해. 하지만 작업 간에 의존성이 있다면 순차 처리가 필요할 수도 있어!

4.5 async/await의 에러 처리

async/await의 큰 장점 중 하나는 try/catch 구문으로 에러를 처리할 수 있다는 거야. 이는 동기 코드와 동일한 방식으로 에러를 처리할 수 있게 해줘!

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP 에러! 상태: ${response.status}`);
    }
    
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error(`사용자 데이터 가져오기 실패: ${error.message}`);
    
    // 에러 종류에 따라 다르게 처리할 수도 있어
    if (error.message.includes('404')) {
      return { error: '사용자를 찾을 수 없습니다.' };
    }
    
    return { error: '서버 오류가 발생했습니다.' };
  }
}
    

이렇게 하면 에러 처리 로직이 더 명확해지고, 특정 에러 유형에 따라 다르게 대응할 수도 있어!

5. 실전 예제로 배우는 비동기 처리 🛠️

이제 실제 웹 개발에서 자주 사용되는 비동기 처리 예제들을 살펴볼게. 이론보다 실전이 더 재밌잖아! 😄

5.1 API 데이터 가져오기

웹 개발에서 가장 흔한 비동기 작업은 API에서 데이터를 가져오는 것이야. fetch API와 async/await를 사용해보자:

// 영화 정보를 가져오는 함수
async function fetchMovies(searchTerm) {
  try {
    const response = await fetch(`https://api.example.com/movies?q=${searchTerm}`);
    
    if (!response.ok) {
      throw new Error(`API 오류! 상태: ${response.status}`);
    }
    
    const data = await response.json();
    return data.movies;
  } catch (error) {
    console.error('영화 데이터 가져오기 실패:', error);
    return [];
  }
}

// 영화 목록을 화면에 표시하는 함수
async function displayMovies(searchTerm) {
  const movies = await fetchMovies(searchTerm);
  
  if (movies.length === 0) {
    console.log('검색 결과가 없습니다.');
    return;
  }
  
  console.log(`'${searchTerm}' 검색 결과:`);
  movies.forEach(movie => {
    console.log(`- ${movie.title} (${movie.year}): ${movie.rating}/10`);
  });
}

// 사용 예
displayMovies('인터스텔라');
    

5.2 이미지 프리로딩

웹사이트의 성능을 향상시키기 위해 이미지를 미리 로드하는 예제를 살펴보자:

// 이미지 프리로딩 함수
function preloadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    
    img.onload = () => {
      console.log(`이미지 로드 완료: ${url}`);
      resolve(img);
    };
    
    img.onerror = () => {
      reject(new Error(`이미지 로드 실패: ${url}`));
    };
    
    img.src = url;
  });
}

// 여러 이미지 프리로딩
async function preloadGalleryImages(urls) {
  try {
    console.log('갤러리 이미지 프리로딩 시작...');
    const images = await Promise.all(urls.map(url => preloadImage(url)));
    console.log(`${images.length}개 이미지 프리로딩 완료!`);
    return images;
  } catch (error) {
    console.error('이미지 프리로딩 중 오류 발생:', error);
    throw error;
  }
}

// 사용 예
const imageUrls = [
  'https://example.com/gallery/image1.jpg',
  'https://example.com/gallery/image2.jpg',
  'https://example.com/gallery/image3.jpg'
];

preloadGalleryImages(imageUrls)
  .then(images => {
    console.log('이제 갤러리를 표시할 수 있습니다!');
    // 여기서 이미지를 DOM에 추가하는 등의 작업 수행
  })
  .catch(error => {
    console.error('갤러리 로딩 실패:', error);
    // 에러 처리 (대체 이미지 표시 등)
  });
    

5.3 타임아웃 설정하기

네트워크 요청이 너무 오래 걸릴 경우를 대비해 타임아웃을 설정하는 것이 좋아:

// Promise에 타임아웃 추가하는 함수
function withTimeout(promise, timeoutMs) {
  // 타임아웃용 Promise 생성
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error(`작업 시간 초과! (${timeoutMs}ms)`));
    }, timeoutMs);
  });
  
  // 둘 중 먼저 완료되는 Promise 반환 (race)
  return Promise.race([promise, timeoutPromise]);
}

// 사용 예: API 요청에 5초 타임아웃 설정
async function fetchUserWithTimeout(userId) {
  try {
    const userPromise = fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json());
    
    // 5초 타임아웃 설정
    const userData = await withTimeout(userPromise, 5000);
    console.log('사용자 데이터:', userData);
    return userData;
  } catch (error) {
    if (error.message.includes('시간 초과')) {
      console.error('서버 응답이 너무 느립니다!');
    } else {
      console.error('데이터 가져오기 실패:', error);
    }
    throw error;
  }
}

// 사용
fetchUserWithTimeout(123)
  .catch(error => {
    // 에러 처리
    console.log('사용자에게 에러 메시지 표시:', error.message);
  });
    

5.4 재시도 메커니즘 구현하기

네트워크 요청이 실패했을 때 자동으로 재시도하는 기능을 구현해보자:

// 재시도 기능이 있는 비동기 함수
async function fetchWithRetry(url, options = {}, maxRetries = 3, delayMs = 1000) {
  let lastError;
  
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      console.log(`시도 ${attempt}/${maxRetries}: ${url} 요청 중...`);
      const response = await fetch(url, options);
      
      if (!response.ok) {
        throw new Error(`HTTP 에러! 상태: ${response.status}`);
      }
      
      return await response.json(); // 성공 시 데이터 반환
    } catch (error) {
      console.warn(`시도 ${attempt} 실패:`, error.message);
      lastError = error;
      
      if (attempt < maxRetries) {
        // 재시도 전 지연 시간 (선형 또는 지수 백오프 적용 가능)
        const delay = delayMs * attempt; // 선형 백오프
        console.log(`${delay}ms 후 재시도...`);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }
  }
  
  // 모든 시도 실패 시
  throw new Error(`${maxRetries}번 시도 후 실패: ${lastError.message}`);
}

// 사용 예
async function getWeatherData(city) {
  try {
    const data = await fetchWithRetry(
      `https://api.weather.example.com/forecast?city=${city}`,
      {}, // 기본 옵션
      3,  // 최대 3번 시도
      500 // 500ms부터 시작하는 백오프
    );
    
    console.log(`${city}의 날씨:`, data.forecast);
    return data;
  } catch (error) {
    console.error('날씨 데이터를 가져올 수 없습니다:', error);
    return { error: '날씨 정보를 불러올 수 없습니다. 나중에 다시 시도해주세요.' };
  }
}

// 사용
getWeatherData('서울');
    

5.5 비동기 데이터 캐싱

자주 사용되는 API 데이터를 캐싱하여 성능을 향상시키는 예제:

// 간단한 메모리 캐시 구현
class AsyncCache {
  constructor(ttlMs = 60000) { // 기본 TTL: 1분
    this.cache = new Map();
    this.ttlMs = ttlMs;
  }
  
  async getOrFetch(key, fetchFn) {
    // 캐시에 유효한 데이터가 있는지 확인
    if (this.cache.has(key)) {
      const cacheEntry = this.cache.get(key);
      
      // 캐시가 아직 유효한지 확인
      if (Date.now() < cacheEntry.expiresAt) {
        console.log(`캐시 히트: ${key}`);
        return cacheEntry.data;
      } else {
        console.log(`캐시 만료: ${key}`);
        this.cache.delete(key);
      }
    }
    
    // 캐시에 없으면 데이터 가져오기
    console.log(`캐시 미스: ${key}, 데이터 가져오는 중...`);
    try {
      const data = await fetchFn();
      
      // 결과를 캐시에 저장
      this.cache.set(key, {
        data,
        expiresAt: Date.now() + this.ttlMs
      });
      
      return data;
    } catch (error) {
      console.error(`데이터 가져오기 실패: ${key}`, error);
      throw error;
    }
  }
  
  invalidate(key) {
    console.log(`캐시 무효화: ${key}`);
    return this.cache.delete(key);
  }
  
  clear() {
    console.log('캐시 전체 삭제');
    this.cache.clear();
  }
}

// 사용 예
const apiCache = new AsyncCache(5 * 60 * 1000); // 5분 TTL

async function getUserProfile(userId) {
  return apiCache.getOrFetch(
    `user_${userId}`,
    async () => {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      if (!response.ok) throw new Error(`API 오류: ${response.status}`);
      return response.json();
    }
  );
}

// 첫 번째 호출: API에서 가져옴
getUserProfile(123).then(profile => console.log('프로필:', profile));

// 잠시 후 다시 호출: 캐시에서 가져옴
setTimeout(() => {
  getUserProfile(123).then(profile => console.log('프로필 (캐시됨):', profile));
}, 2000);

// 사용자 정보가 업데이트되었을 때 캐시 무효화
function updateUserProfile(userId, newData) {
  // API 호출로 프로필 업데이트
  fetch(`https://api.example.com/users/${userId}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newData)
  })
  .then(response => {
    if (response.ok) {
      // 업데이트 성공 시 캐시 무효화
      apiCache.invalidate(`user_${userId}`);
    }
    return response.json();
  })
  .then(data => console.log('프로필 업데이트됨:', data))
  .catch(error => console.error('프로필 업데이트 실패:', error));
}
    

이런 실전 예제들은 재능넷에서 프로그래밍 재능을 공유하거나 구매할 때 정말 유용한 지식이 될 수 있어! 실제 프로젝트에서 자주 사용되는 패턴들이거든. 😊

6. 2025년 최신 비동기 패턴과 트렌드 🔮

2025년 현재, 자바스크립트의 비동기 프로그래밍은 계속 발전하고 있어. 최신 트렌드와 패턴을 알아보자!

6.1 Top-level await

ES2022부터 모듈 최상위 레벨에서 await 사용이 가능해졌어. async 함수 안에 없어도 await를 사용할 수 있다는 뜻이지!

// 과거에는 이렇게 해야 했어:
// import { setupDatabase } from './database.js';
// 
// async function initialize() {
//   const dbConnection = await setupDatabase();
//   // 나머지 코드...
// }
// 
// initialize();

// 2025년에는 이렇게 할 수 있어:
import { setupDatabase } from './database.js';

// 모듈 최상위 레벨에서 바로 await 사용
const dbConnection = await setupDatabase();

// 데이터베이스 연결이 완료된 후에 실행되는 코드
console.log('데이터베이스 연결 완료:', dbConnection.status);

export function getUsers() {
  // dbConnection을 바로 사용할 수 있어
  return dbConnection.query('SELECT * FROM users');
}
    

이 기능은 모듈 초기화 시 비동기 작업을 더 깔끔하게 처리할 수 있게 해줘!

6.2 AbortController로 비동기 작업 취소하기

2025년에는 진행 중인 비동기 작업을 취소하는 것이 더 중요해졌어. AbortController API를 사용하면 fetch 요청 등을 취소할 수 있지:

// 취소 가능한 API 요청 함수
async function fetchWithTimeout(url, timeoutMs = 5000) {
  // AbortController 인스턴스 생성
  const controller = new AbortController();
  const { signal } = controller;
  
  // 타임아웃 설정
  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
  
  try {
    const response = await fetch(url, { signal });
    clearTimeout(timeoutId); // 타임아웃 취소
    
    return await response.json();
  } catch (error) {
    clearTimeout(timeoutId); // 타임아웃 취소
    
    if (error.name === 'AbortError') {
      throw new Error(`요청 시간 초과 (${timeoutMs}ms)`);
    }
    
    throw error;
  }
}

// 사용자 인터랙션으로 요청 취소하기
function searchProducts(query) {
  // 이전 요청이 있으면 취소
  if (window.currentSearchController) {
    window.currentSearchController.abort();
    console.log('이전 검색 요청 취소됨');
  }
  
  // 새 컨트롤러 생성
  const controller = new AbortController();
  window.currentSearchController = controller;
  
  // 요청 시작
  fetch(`https://api.example.com/products?q=${query}`, {
    signal: controller.signal
  })
  .then(response => response.json())
  .then(data => {
    console.log('검색 결과:', data);
    displayResults(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('검색 요청이 취소되었습니다.');
    } else {
      console.error('검색 오류:', error);
    }
  });
}

// 사용 예: 사용자가 검색창에 타이핑할 때마다 이전 요청 취소
document.querySelector('#search-input').addEventListener('input', (e) => {
  searchProducts(e.target.value);
});
    

6.3 비동기 이터레이터와 for-await-of

2025년에는 스트리밍 데이터 처리가 더 중요해졌어. 비동기 이터레이터와 for-await-of 루프를 사용하면 대용량 데이터를 청크 단위로 처리할 수 있지:

// 비동기 이터러블 객체 생성
async function* fetchCommentsStream(postId) {
  let page = 1;
  let hasMore = true;
  
  while (hasMore) {
    console.log(`댓글 페이지 ${page} 가져오는 중...`);
    
    const response = await fetch(
      `https://api.example.com/posts/${postId}/comments?page=${page}`
    );
    const data = await response.json();
    
    // 페이지의 댓글들을 하나씩 yield
    for (const comment of data.comments) {
      yield comment;
    }
    
    // 다음 페이지 확인
    hasMore = data.hasNextPage;
    page++;
    
    // API 부하 방지를 위한 지연
    if (hasMore) {
      await new Promise(resolve => setTimeout(resolve, 300));
    }
  }
}

// for-await-of로 스트림 처리
async function displayComments(postId) {
  const commentStream = fetchCommentsStream(postId);
  let count = 0;
  
  console.log('댓글 스트림 처리 시작...');
  
  // 비동기 이터레이터를 for-await-of로 순회
  for await (const comment of commentStream) {
    console.log(`댓글 #${++count}: ${comment.author} - ${comment.text}`);
    
    // 실제로는 DOM에 댓글 추가 등의 작업 수행
    // 각 댓글이 도착할 때마다 UI 업데이트 가능
    
    // 사용자가 중단 버튼을 눌렀는지 확인 (예시)
    if (window.commentLoadingCancelled) {
      console.log('사용자가 댓글 로딩을 중단했습니다.');
      break;
    }
  }
  
  console.log(`총 ${count}개 댓글 처리 완료!`);
}

// 사용
displayComments(42);
    

6.4 Web Workers를 활용한 병렬 처리

2025년에는 멀티코어 활용이 더 중요해졌어. Web Workers를 사용하면 메인 스레드를 차단하지 않고 무거운 작업을 처리할 수 있지:

// main.js
function processDataInWorker(data) {
  return new Promise((resolve, reject) => {
    // 워커 생성
    const worker = new Worker('data-worker.js');
    
    // 워커로부터 메시지 수신
    worker.onmessage = (event) => {
      console.log('워커로부터 결과 수신');
      resolve(event.data);
      worker.terminate(); // 작업 완료 후 워커 종료
    };
    
    // 워커 오류 처리
    worker.onerror = (error) => {
      console.error('워커 오류:', error);
      reject(new Error('데이터 처리 중 오류 발생'));
      worker.terminate();
    };
    
    // 워커에 데이터 전송
    console.log('워커에 데이터 전송 중...');
    worker.postMessage(data);
  });
}

// 사용 예
async function analyzeUserData() {
  try {
    // 대용량 데이터 가져오기
    const response = await fetch('https://api.example.com/user-analytics');
    const rawData = await response.json();
    
    console.log('대용량 데이터 가져옴, 워커에서 처리 시작...');
    
    // 워커에서 데이터 처리 (메인 스레드 차단 없음)
    const result = await processDataInWorker(rawData);
    
    console.log('분석 완료:', result);
    updateDashboard(result);
  } catch (error) {
    console.error('분석 실패:', error);
  }
}

// data-worker.js (별도 파일)
/*
self.onmessage = function(event) {
  const data = event.data;
  console.log('워커에서 데이터 수신, 처리 중...');
  
  // CPU 집약적인 작업 수행
  const result = performHeavyCalculations(data);
  
  // 결과를 메인 스레드로 반환
  self.postMessage(result);
};

function performHeavyCalculations(data) {
  // 복잡한 데이터 처리 로직...
  return processedData;
}
*/
    

6.5 Reactive Programming과 Observable 패턴

2025년에는 반응형 프로그래밍이 더 인기를 얻고 있어. RxJS 같은 라이브러리를 사용하면 복잡한 비동기 이벤트 스트림을 더 쉽게 처리할 수 있지:

// RxJS 예제 (2025년 버전)
import { fromEvent, debounceTime, switchMap, catchError, EMPTY } from 'rxjs';

// 검색 입력 필드의 이벤트를 Observable로 변환
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');

// 입력 이벤트와 버튼 클릭 이벤트 결합
const searchEvents = fromEvent(searchInput, 'input').pipe(
  debounceTime(300) // 타이핑 멈춘 후 300ms 대기
);

const buttonClicks = fromEvent(searchButton, 'click');

// 두 이벤트 스트림 병합
merge(searchEvents, buttonClicks).pipe(
  // 현재 입력값 가져오기
  map(() => searchInput.value.trim()),
  // 빈 검색어 필터링
  filter(query => query.length > 0),
  // 이전 요청 취소하고 새 요청 시작
  switchMap(query => {
    console.log(`검색 중: ${query}`);
    return fetch(`https://api.example.com/search?q=${query}`)
      .then(response => response.json())
      .catch(error => {
        console.error('검색 오류:', error);
        return []; // 오류 시 빈 배열 반환
      });
  })
).subscribe({
  next: results => {
    console.log('검색 결과:', results);
    displayResults(results);
  },
  error: error => console.error('구독 오류:', error)
});
    

이런 최신 패턴들은 더 복잡한 비동기 시나리오를 더 우아하게 처리할 수 있게 해줘. 재능넷에서 최신 자바스크립트 기술을 배우거나 가르치는 데 아주 유용한 지식이 될 거야! 🚀

7. 성능 최적화 팁 ⚡

비동기 프로그래밍을 마스터했다면, 이제 성능을 최적화하는 방법에 대해 알아보자! 2025년 현재, 웹 애플리케이션의 성능은 그 어느 때보다 중요해졌어.

7.1 비동기 작업 병렬화

독립적인 비동기 작업은 가능한 한 병렬로 실행하는 것이 좋아:

// 순차 실행 (느림)
async function loadDataSequential() {
  console.time('순차 로딩');
  
  const userData = await fetchUserData();
  const productData = await fetchProducts();
  const weatherData = await fetchWeather();
  
  console.timeEnd('순차 로딩');
  return { userData, productData, weatherData };
}

// 병렬 실행 (빠름)
async function loadDataParallel() {
  console.time('병렬 로딩');
  
  // 모든 요청을 동시에 시작
  const userPromise = fetchUserData();
  const productPromise = fetchProducts();
  const weatherPromise = fetchWeather();
  
  // 모든 결과 기다리기
  const [userData, productData, weatherData] = await Promise.all([
    userPromise, productPromise, weatherPromise
  ]);
  
  console.timeEnd('병렬 로딩');
  return { userData, productData, weatherData };
}

// 더 간결한 방법
async function loadDataParallelConcise() {
  console.time('병렬 로딩 (간결)');
  
  const [userData, productData, weatherData] = await Promise.all([
    fetchUserData(),
    fetchProducts(),
    fetchWeather()
  ]);
  
  console.timeEnd('병렬 로딩 (간결)');
  return { userData, productData, weatherData };
}
    

7.2 메모이제이션과 캐싱

동일한 비동기 작업의 결과를 캐싱하면 성능을 크게 향상시킬 수 있어:

// 메모이제이션 함수
function memoizeAsync(fn) {
  const cache = new Map();
  
  return async function(...args) {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      console.log('캐시에서 결과 반환');
      return cache.get(key);
    }
    
    console.log('새로운 결과 계산 중');
    const result = await fn(...args);
    cache.set(key, result);
    return result;
  };
}

// 사용 예
const fetchUserMemoized = memoizeAsync(async (userId) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  return response.json();
});

// 첫 번째 호출: API 요청 발생
fetchUserMemoized(123).then(user => console.log('사용자 1:', user));

// 두 번째 호출: 캐시에서 반환 (API 요청 없음)
setTimeout(() => {
  fetchUserMemoized(123).then(user => console.log('사용자 2 (캐시됨):', user));
}, 2000);
    

7.3 지연 로딩과 프리페칭

필요한 데이터만 먼저 로드하고, 나머지는 필요할 때 또는 미리 예측하여 로드하는 전략:

// 지연 로딩 구현
class DataLoader {
  constructor() {
    this.data = {};
    this.loading = {};
  }
  
  // 데이터 가져오기 (이미 로딩 중이면 기존 Promise 반환)
  async load(key, fetchFn) {
    // 이미 데이터가 있으면 바로 반환
    if (this.data[key]) {
      console.log(`${key} 데이터 이미 로드됨`);
      return this.data[key];
    }
    
    // 이미 로딩 중이면 기존 Promise 반환
    if (this.loading[key]) {
      console.log(`${key} 데이터 로딩 중, 기존 요청에 연결`);
      return this.loading[key];
    }
    
    // 새로 로딩 시작
    console.log(`${key} 데이터 로딩 시작`);
    this.loading[key] = fetchFn().then(result => {
      this.data[key] = result;
      delete this.loading[key];
      return result;
    });
    
    return this.loading[key];
  }
  
  // 미리 데이터 로드 (프리페칭)
  prefetch(key, fetchFn) {
    if (!this.data[key] && !this.loading[key]) {
      console.log(`${key} 데이터 프리페칭`);
      this.load(key, fetchFn).catch(error => {
        console.warn(`프리페칭 실패 (${key}):`, error);
      });
    }
  }
}

// 사용 예
const loader = new DataLoader();

// 필수 데이터 즉시 로드
async function loadInitialData() {
  const userData = await loader.load('user', () => 
    fetch('https://api.example.com/user').then(r => r.json())
  );
  
  // 사용자 데이터 표시
  displayUserInfo(userData);
  
  // 사용자 데이터 로드 후 관련 데이터 미리 로드
  loader.prefetch('notifications', () => 
    fetch('https://api.example.com/notifications').then(r => r.json())
  );
  
  loader.prefetch('recommendations', () => 
    fetch('https://api.example.com/recommendations').then(r => r.json())
  );
}

// 사용자가 알림 탭을 클릭했을 때
async function showNotifications() {
  const notifications = await loader.load('notifications', () => 
    fetch('https://api.example.com/notifications').then(r => r.json())
  );
  
  displayNotifications(notifications);
}
    

7.4 비동기 작업 배치 처리

여러 개의 작은 비동기 작업을 하나의 큰 작업으로 배치 처리하면 네트워크 오버헤드를 줄일 수 있어:

// 배치 처리 유틸리티
class BatchProcessor {
  constructor(processFn, options = {}) {
    this.processFn = processFn;
    this.maxBatchSize = options.maxBatchSize || 100;
    this.maxWaitMs = options.maxWaitMs || 50;
    this.items = [];
    this.pendingPromises = new Map();
    this.timeout = null;
  }
  
  // 아이템 추가 및 Promise 반환
  add(item) {
    const itemId = Math.random().toString(36).substr(2, 9);
    
    // 새 Promise 생성 및 저장
    const promise = new Promise((resolve, reject) => {
      this.pendingPromises.set(itemId, { resolve, reject });
    });
    
    // 아이템을 배치에 추가
    this.items.push({ id: itemId, data: item });
    
    // 타이머 설정 (아직 없는 경우)
    if (!this.timeout) {
      this.timeout = setTimeout(() => this.processItems(), this.maxWaitMs);
    }
    
    // 배치 크기가 최대에 도달하면 즉시 처리
    if (this.items.length >= this.maxBatchSize) {
      clearTimeout(this.timeout);
      this.timeout = null;
      this.processItems();
    }
    
    return promise;
  }
  
  // 배치 처리 실행
  async processItems() {
    const itemsToProcess = [...this.items];
    this.items = [];
    this.timeout = null;
    
    if (itemsToProcess.length === 0) return;
    
    try {
      console.log(`${itemsToProcess.length}개 아이템 배치 처리 중...`);
      
      // 배치 처리 함수 호출
      const results = await this.processFn(itemsToProcess.map(item => item.data));
      
      // 각 Promise 해결
      itemsToProcess.forEach((item, index) => {
        const { resolve } = this.pendingPromises.get(item.id);
        resolve(results[index]);
        this.pendingPromises.delete(item.id);
      });
    } catch (error) {
      console.error('배치 처리 실패:', error);
      
      // 모든 Promise 거부
      itemsToProcess.forEach(item => {
        const { reject } = this.pendingPromises.get(item.id);
        reject(error);
        this.pendingPromises.delete(item.id);
      });
    }
  }
}

// 사용 예: 여러 사용자 정보를 한 번에 가져오기
const userBatchLoader = new BatchProcessor(async (userIds) => {
  // 여러 ID를 한 번에 요청
  const response = await fetch('https://api.example.com/users/batch', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ids: userIds })
  });
  
  const users = await response.json();
  
  // 각 ID에 대한 결과 매핑
  return userIds.map(id => users.find(user => user.id === id) || null);
}, { maxBatchSize: 50, maxWaitMs: 100 });

// 개별 사용자 로드 함수
async function loadUser(userId) {
  return userBatchLoader.add(userId);
}

// 여러 사용자 로드 (내부적으로 배치 처리됨)
loadUser(1).then(user => console.log('사용자 1:', user));
loadUser(2).then(user => console.log('사용자 2:', user));
loadUser(3).then(user => console.log('사용자 3:', user));
// ... 더 많은 요청들 ...
    

7.5 비동기 작업 우선순위 지정

2025년에는 중요한 작업에 우선순위를 부여하는 것이 더 중요해졌어:

// 우선순위 큐 구현
class PriorityQueue {
  constructor() {
    this.highPriority = [];
    this.normalPriority = [];
    this.lowPriority = [];
    this.isProcessing = false;
  }
  
  // 작업 추가
  enqueue(task, priority = 'normal') {
    switch (priority) {
      case 'high':
        this.highPriority.push(task);
        break;
      case 'low':
        this.lowPriority.push(task);
        break;
      default:
        this.normalPriority.push(task);
    }
    
    // 큐 처리 시작
    if (!this.isProcessing) {
      this.processQueue();
    }
  }
  
  // 큐 처리
  async processQueue() {
    if (this.isProcessing) return;
    
    this.isProcessing = true;
    
    while (
      this.highPriority.length > 0 || 
      this.normalPriority.length > 0 || 
      this.lowPriority.length > 0
    ) {
      let task;
      
      // 우선순위에 따라 작업 선택
      if (this.highPriority.length > 0) {
        task = this.highPriority.shift();
      } else if (this.normalPriority.length > 0) {
        task = this.normalPriority.shift();
      } else {
        task = this.lowPriority.shift();
      }
      
      try {
        await task();
      } catch (error) {
        console.error('작업 실행 오류:', error);
      }
      
      // 브라우저가 다른 작업을 처리할 수 있도록 잠시 양보
      await new Promise(resolve => setTimeout(resolve, 0));
    }
    
    this.isProcessing = false;
  }
}

// 사용 예
const taskQueue = new PriorityQueue();

// 중요한 사용자 데이터 로드 (높은 우선순위)
taskQueue.enqueue(async () => {
  console.log('사용자 프로필 로딩 (높은 우선순위)');
  const userData = await fetch('/api/user').then(r => r.json());
  updateUserProfile(userData);
}, 'high');

// 덜 중요한 데이터 로드 (낮은 우선순위)
taskQueue.enqueue(async () => {
  console.log('추천 상품 로딩 (낮은 우선순위)');
  const recommendations = await fetch('/api/recommendations').then(r => r.json());
  updateRecommendations(recommendations);
}, 'low');

// 일반 우선순위 작업
taskQueue.enqueue(async () => {
  console.log('알림 로딩 (일반 우선순위)');
  const notifications = await fetch('/api/notifications').then(r => r.json());
  updateNotifications(notifications);
});
    

이런 성능 최적화 기법들은 사용자 경험을 크게 향상시킬 수 있어. 특히 대규모 웹 애플리케이션에서는 필수적인 기술이지! 재능넷에서 웹 개발 프로젝트를 의뢰하거나 수행할 때 이런 기술을 적용하면 차별화된 결과물을 만들 수 있을 거야. 👍

8. 마무리 및 추가 자료 📚

여기까지 자바스크립트 비동기 프로그래밍의 세계를 함께 탐험해봤어! 콜백부터 Promise, async/await까지, 그리고 2025년의 최신 트렌드와 성능 최적화 기법까지 다양한 내용을 다뤘지. 🎉

비동기 프로그래밍은 현대 웹 개발의 핵심이야. 특히 사용자 경험이 중요한 2025년에는 더욱 그렇지! 재능넷에서 프로그래밍 관련 재능을 공유하거나 구매할 때, 이런 비동기 프로그래밍 지식은 큰 경쟁력이 될 수 있어. 😊

더 공부하면 좋을 주제들

추천 자료

자바스크립트 비동기 프로그래밍은 계속해서 발전하고 있어. 꾸준히 공부하고 실습하면서 최신 트렌드를 따라가는 것이 중요해. 이 글이 너의 자바스크립트 여정에 도움이 되었길 바라! 🚀