비동기 프로그래밍 입문

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 공식문서

  promis 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

비동기 작업이라는 것은, 수행의 제어권을 제 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가지에 따라, 우리는 적절한 처리를 해줘야 해요.

  이번 시간에는 개념 정보만 익히구요, 심화 과정에서 비동기 처리에 대한 자세한 부분을 배우게 될거에요 🙂

  ex) 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('항상 실행되는 부분입니다!');
});

#### ex) async/await

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

출처: 스파르타코딩클럽 강의자료 2023년