8. 비동기(콜백함수, 프로미스, await/async, fetch)

알잘딱깔센 JavaScript 비동기 프로그래밍 - 비동기 너 내 동기가 돼라

1. 동기와 비동기

// 동기 - 순차적
// 호준 : 로봇 청소기 돌리고(10시)
// 호준 : 빨래하고(11시)
// 호준 : 설거지하고(12시)
// 호준 : 요리한다(1시)

// 비동기 - 비순차적
// 호준 : 로봇 청소기 돌리면서(10시)
// 호준 : 빨래도 돌리고(10시)
// 호준 : 설거지하고(10시)
// 호준 : 요리할려고 물도 끓이고(10시)
const one = '1';
const two = '2';
const three = '3';

console.log(one);
setTimeout(() => {
    console.log(two);
}, 1000);
console.log(three);

// 아래 코드는 왜 그럴까요?
const one = '1';
const two = '2';
const three = '3';

console.log(one);
setTimeout(() => {
    console.log(two);
}, 0);
console.log(three);

// 싱글쓰레드
// 일할 수 있는 녀석이 1명 -> JS

// 멀티쓰레드
// 일할 수 있는 녀석이 여러명 -> 다른언어 대부분이 지원합니다.
// * JS는 싱글쓰레드이지만 웹 브라우저는 멀티쓰레드가 가능합니다. 이에 대해서는 이 챕터의 마지막 목차인 호출스택에서 자세하게 알아봅니다.

// 우리가 이런 비동기 프로그래밍을 왜 알아야 하고, JavaScript의 실행 구조는 왜 알아야 하는가?

one() // 페이지 로드하고
two() // 서버에서 이미지와 상세 데이터를 받아오고(예 - <http://test.api.weniv.co.kr/mall>) - 1분
three() // 읽어온 데이터를 뿌려준다
four() // 페이지에 정적 데이터 로드

2. callback 함수와 callback 지옥

• 콜백 함수는 아래처럼 나중에 실행할 함수!

const 버튼 = document.querySelector('.button');
버튼.addEventListener('click', function(){});

// 버튼.addEventListener('click', '다른 곳에서 짠 함수이름'); // ex('click', helloworld100)
// function helloworld100() {
//    console.log('hello world');
//    console.log('hello world');
// }
// 버튼.addEventListener('click', ()=>{});

function 함수하나(출력){
    console.log('hello');
    출력('world');
}

함수하나(console.log);

• 위에 코드가 작성이 되는 이유는 함수나 메서드는 결국 어떤 기능을 가리키고 있는 식별자이기 때문

let hojun = console.log;
hojun('hello world');

• 함수 하나가 로그인 기능이었고, 이 로그인 기능 이후에 계좌 연동, 이미지 로드 등의 기능이 실행되어야 한다면 아래와 같이 여러 함수들의 중첩이 일어남

user.login(
    id, 
    pw, 
    로그인성공, 
    로그인실패, 
    이미지로드, 
    계좌연동...)

• 여기서는 콜백지옥(callback hell)이 잘 감이 안오지만 아래처럼 실제 코드로 짜보면 감이옴.

userData.login(
    id, 
    pw, 
    (user) => {
        userData.getData(
            user,
            (userData) => {
                ..콜백에 콜백..
            },
            (fail) => {
                ..콜백에 콜백..
            }
        );
    },
    (fail) => {
        ..콜백에 콜백..
    },
    (user) => { //이미지 로드
        ..콜백에 콜백..
    },
    (user) => { // 계좌 연동
        ..콜백에 콜백..
    },
);

• 콜백 지옥 코드 체험(모던자바스크립트 예제)