비동기 프로그래밍 입문

코딩/React

비동기 프로그래밍 입문

junhub 2023. 4. 20. 02:09

# 비동기 프로그래밍 개요

1. 개념

비(not) + 동기적 프로그래밍이다. 그럼 먼저 동기적 프로그래밍이 뭔지부터 살펴보자.

o 동기(synchronous)적 방식이란? 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식

일반적인 프로그래밍 세계에서는 코드는 모드 동기적으로 실행된다. 즉, 앞선 코드가 끝나야만 그 다음 코드가 수행이 된다.

// (1)
const a = 1;

// (2)
const b = 2;

// (3)
console.log(`a의 값은 ${a}입니다.`);

// (4)
alert(`hello ${b}!`);

// 항상 코드는 (1) -> (4)의 순서대로 실행이 됩니다.

이러한 방식을 동기적 방식이라 하고, 비동기는 그에 반한 방식이다.

비동기(asynchronous)적 방식이란?

실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식

setTimeout, addEventListner 등
별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
대표적으로 서버 통신과 관련된 로직들 포함

2. 콜백지옥

비동기적 프로그래밍을 하다 보면, 콜백 지옥과 같은 예기치 못한 상황에 마주하곤 한다.

//0.5초 주기마다 커피 목록을 수집하고 출력
//각 콜백은 커피 이름을 전달하고 목록에 이름을 추가
//문제점 : 들여쓰기 ㄷㄷ, 값 전달의 순서가 아래 -> 위

setTimeout(function (name) {
	var coffeeList = name;
	console.log(coffeeList);

	setTimeout(function (name) {
		coffeeList += ', ' + name;
		console.log(coffeeList);

		setTimeout(function (name) {
			coffeeList += ', ' + name;
			console.log(coffeeList);

			setTimeout(function (name) {
				coffeeList += ', ' + name;
				console.log(coffeeList);
			}, 500, '카페라떼');
		}, '카페모카');
	}, '아메리카노');
}, '에스프레소');

콜백지옥?

콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우
주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생
뭐가문제? 가독성, 수정도 어려움

이를 해결하기 위해서 ES6에서 Promise 객체가 소개됐다.

비동기 프로그래밍을 다룬다는 것은 곧 Promise 객체를 다룬다는 의미와 일치한다고 봐도 무방하다.

# Promise 객체

1. 개념

Mdn 공식문서 설명은 아래와 같다.

이름이 왜 ‘약속’ 일까?

비동기 작업이라는 것은, 수행의 제어권을 제 3자에게 넘겨준 후 작업이 완료되면 안내를 받아 제어권을 이양받는 식의 일 처리 방법을 의미한다. 마치 이것과 같다.

localhost:3000 에서 잘 놀고 있다가, 버튼을 클릭해서 네이버 서버에 날씨 정보를 달라고 API 문서에 적혀있는대로 요청
그럼 그 API 문서에 적혀있는 약속대로 약 0.3sec가 지나고 나니 데이터가 들어왔음

위 과정에서 localhost에 있을 때의 모든 제어권은 나에게 있다가, 네이버에 api 요청을 하는 순간 제어권은 네이버에게 넘어가고,

그 이후 데이터를 전달받는 순간 다시 제어권은 나에게 넘어온다.

비동기처리는 이처럼 약속에 의해 움직인다. 그 약속에 관련된 사항들이 모두 Promise 객체에 담기는 것이다.

2. promise 객체에 담기는 주요한 상태정보

대기 : pending, localhost에서 네이버에 요청한 직후. 아직 성공(resolve) 또는 실패(rejected)되지 않은 상태. 초조함 그 잡채..!
이행 : fulfilled, 네이버가 정상적으로 데이터를 localhost한테 전달을 성공적으로 해준 상태.
거부 : rejected, 어떠한 이유인지는 모르겠지만 네이버가 localhost에게 데이터를 전달을 못해준 경우이다. 데이터센터 화재…?

3. Promise 객체 핸들링 방법

promise 객체가 갖는 주요한 상태정보 3가지에 따라, 적절한 처리를 해줘야 한다.

# then ~ catch

// http://api.naver.com/weather/today 로 요청을 한다고 가정합시다.

axios.get('http://api.naver.com/weather/today')
.then(response => {
	console.log('정상처리 되었습니다 : ' + response);
})
.catch(error => {
	console.log('오류가 발생하였습니다 : ' + error);
})
.finally(()=>{
	console.log('항상 실행되는 부분입니다!');
});

# async / await

const getWeather = async () => {
	try {
		const response = axios.get('http://api.naver.com/weather/today');
		console.log('정상처리 되었습니다 : ' + response);
	} catch (error) {
		console.log('오류가 발생하였습니다 : ' + error);
	}
}