[JS] 비동기로 데이터 처리(async/await, fetch then)

 

비동기란
→ 코드 실행을 막지 않고, 오래 걸리는 작업을 기다리며 다음 작업을 먼저 실행하는 방식

 

보통 외부 API를 사용할 경우 비동기로 처리한다.

 

외부 API를 사용할 때 비동기를 쓰는 이유

1. 응답을 기다리면 전체 앱이 멈추기 때문

외부 API는 보통 네트워크를 통해 요청을 보낸 후, 응답을 받기까지 시간 걸린다

• 동기 방식일 경우, 응답이 올 때까지 브라우저나 앱이 멈춘다
• 사용자 입장에서는 버벅이거나 멈춘 것처럼 느껴짐

2. 여러 작업 동시 처리 가능

 

비동기 방식일 경우

• API 응답을 기다리는 동안 다른 UI 렌더링, 이벤트 처리 가능
• 네트워크 작업과 사용자 입력을 동시에 처리 가능

 

 

JS의 비동기 처리 방법

AJAX (Asynchronous JavaScript and XML)

• 서버와 비동기적으로 데이터를 주고받기 위한 전통적인 방법
• XMLHttpRequest 객체를 사용한다
• 요즘은 XML보단 JSON이 더 일반적이므로, 주로 사용하지 않는다
• jQuery의 $.ajax() 의 기반

 

 

fetch().then()

• 코드가 짧고 간단한 경우 빠르게 작성 가능
• ES6 이후 대부분 브라우저에서 지원
• 중첩된 비동기가 많을 경우 처리가 힘듦

	// Fetch API
	// HTTP 요청 및 응답을 비동기로 처리하기 위한 표준 방법
	fetch(url)	// 1. fetch : 해당 주소로 요청을 보냄
	.then(response => response.json()) // 2. 응답을 json 형태로 반환
	.then(data => {	// 데이터 가공
		const items = data.response.body.items.item;
		const filtered = items.filter(item => item.category === 'POP');

		filtered.forEach(item => {
			let row = document.createElement("tr");
			
			const timeWithColon = item.fcstTime.slice(0, 2) + ':' + item.fcstTime.slice(2);
			console.log(`날짜: ${item.fcstDate}, 
            시간: ${timeWithColon}, 
            강수확률: ${item.fcstValue}`);
			
			// ...

		});
	}).catch(err => {
    console.log(err)
  })

 

async/await

• 중첩된 비동기 처리시에도 깔끔하게 코드작성 가능
• 함수 선언을 async로 해야 함
• await은 직렬 실행이기 때문에 병렬 처리 시 주의 필요

 

async function fetchAndDisplayWeather(url) {
	try {
		// 1. fetch 요청 보내기
		const response = await fetch(url);
		
		// 2. 응답을 JSON으로 파싱
		const data = await response.json();

		// 3. 데이터 가공
		const items = data.response.body.items.item;
		const filtered = items.filter(item => item.category === 'POP');

		filtered.forEach(item => {
			const timeWithColon = item.fcstTime.slice(0, 2) + ':' + item.fcstTime.slice(2);
			console.log(`날짜: ${item.fcstDate}, 
            시간: ${timeWithColon}, 
            강수확률: ${item.fcstValue}`);
            ...

		});
	} catch (error) {
		console.error("데이터를 가져오는 중 오류 발생:", error);
	}
}

 

🔍 차이점

 

항목	fetch().then()	async/await
문법 스타일	Promise 체이닝 (.then().catch())	동기식처럼 보이는 비동기 코드 (await, try/catch)
코드 가독성	콜백 중첩 가능성 있음	깔끔하고 읽기 쉬움
에러 처리	.catch() 사용	try/catch 사용
디버깅 편의성	스택 추적 어려울 수 있음	동기식 흐름처럼 디버깅 가능
병렬 처리	.then() 체이닝이 직관적일 수 있음	Promise.all() 등을 함께 써야 함