비동기 프로그래밍 입문

[학습 목표]
1. 비동기 프로그래밍이 무엇인지 알게돼요.
2. 비동기 프로그래밍의 필수 요소인 Promise 객체의 handling 방법(예외처리 등)을 학습하게 돼요.

1. 비동기 프로그래밍 개요

(1) 개념

비(not) + 동기적 프로그래밍이죠. 그럼 먼저 동기적 프로그래밍이 뭔지부터 살펴봐야 할 것 같아요.

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

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

// (1)
const a = 1;

// (2)
const b = 2;

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

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

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

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

비동기(asynchronous)적 방식이란?
실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
1. setTimeout, addEventListner 등
2. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
3. 대표적으로 서버 통신과 관련된 로직들 포함

(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, '카페라떼');
		}, '카페모카');
	}, '아메리카노');
}, '에스프레소');

콜백지옥?

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

이를 해결하기 위해서 ES6에서 Promise 객체가 소개되었답니다!

2. Promise 객체

(1) 개념

Mdn 공식문서에서는 이렇게 설명하고 있어요.

근데… 이름이 왜 ‘약속’ 일까요?

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

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

위 과정에서 localhost에 있을 때의 모든 제어권은 나에게 있다가, 네이버에 api 요청을 하는 순간 제어권은 네이버에게 넘어가죠, 그 이후 데이터를 전달받는 순간 다시 제어권은 나에게 넘어옵니다.

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

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

1. 대기 : pending, localhost에서 네이버에 요청한 직후. 아직 성공(resolve) 또는 실패(rejected)되지 않은 상태죠. 초초한 그 잡채
2. 이행 : fulfilled, 네이버가 정상적으로 데이터를 localhost한테 전달을 성공적으로 해준 상태에요.
3. 거부 : 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 = await axios.get('http://api.naver.com/weather/today');
		console.log('정상처리 되었습니다 : ' + response);
	} catch (error) {
		console.log('오류가 발생하였습니다 : ' + error);
	}
}