[JS] 비동기1 | 콜백 | 콜백 지옥

이 3가지를 알면 네트워크 통신 편하게 할 수 있다.

 

1. callback

2. promise

3. async, await 

 

Synchronous 

자바스크립트는 동기적 언어이다.

이 말은 hoisting이 된 이 후부터 순서대로 코드가 실행된다는 말이다.

장점은 앞 코드 작업이 다 끝나야 다음 코드가 실행되기 때문에 코드의 흐름을 빨리 파악할 수 있다. 

하지만 앞 코드 실행이 오래 걸리면 뒤에 있는 코드는 실행되기까지 한참을 기다려야 한다. 

 

Asynchronous 

코드 순서와 상관없이 자신의 시간표 대로 움직인다. 

멀티태스킹으로 실행되기에 코드 흐름 파악은 좀 걸려도 시간이 적게 걸린다. 

언제 끝날지 모르는 명령이나 메인 흐름이 되는 작업이 아닐 때 비동기 처리 많이 한다.

서버와 웹브라우저가 서로 통신할 때, 이 통신이 언제 끝날지 예측하기 어려우니 비동기로 처리하는 것이 좋다. 

 

hoisting

var, function declaration이 맨 위로 올라가서 먼저 실행되는 것을 말한다.

 

callback 함수

나중에 내 함수를 불러줘, Call Back -> callback 함수

다른 함수 파라미터로 사용되는 함수이다. 

변수에 할당 가능하다. 

다른 언어에서는 subroutine, lambda, function pointer 등 여러 이름으로 사용되고 있다.

 

callback 종류

콜백도 synchronous와 asynchronuous 둘 로 나눌 수 있다. 

 

1.synchronous callback

즉각 실행

 

콜백을 파라미터로 받아 즉각 실행하게 하였다. 

콘솔

콜백함수가 print라는 이름으로 들어가서 

print()로 바로 함수 출력을 시켰다. 

 

 

2. asynchronuous 

콘솔

콜백함수가 print로 들어가고 setTimeout을 주어 

바로 실행되지 않고, 조금 있다가 실행되었다. 

 

 

---

 

 

콜백 지옥 체험

 

예시 1 ) 한 페이스북 유저가 로그인 후 친구 포스트에 가서 커멘트 남기기 

페이스북 유저인 Jane의 정보를 가져오도록 코드를 수도코드로 작성하였다. 

 

콜백 함수를 넣어 성공시 user 정보를 가져오고 실패시 error가 뜨게 했다. 

 

user를 불러오면 해당 유저의 아이디를 저장한다. 

 

이제는 해당 아이디의 친구들을 불러온다. 

콜백 사용해서 성공시 친구들을 불러오고, 실패시 예외처리한다.

 

에러가 없으면 친구 목록에서 John을 찾아 

John의 posts를 찾아 본다. 이 때도 콜백으로 예외처리한다.

 

에러가 없으면 john의 최근 포스트를 찾아내고 

그 최근 포스트에 커먼트를 단다.

이 때도 콜백으로 예외처리 한다.

 

앞 단계가 수행되어야 그 안의 코드를 살펴볼 수 있기에 

너무 많은 nested 콜백이 너무 많다.

이 것을 '콜백 지옥'이라고 한다. 

더 간단히 코드를 쓰는 법은 없을까?

Promise를 사용하면 된다. 

 

 

자바스크립트는 기본적으로 동기식으로 코드가 실행된다.

이 말은 위에서부터 아래로 코드가 실행된다는 말이다. 

 

하지만 위의 코드 같은 경우

상위 코드가 먼저 실행되어야 그 다음 Nested된 코드가 실행되기에 

비동기적로 동작한다. 

 

 

예시 2) 유저 정보 받아 관리자인지 확인 

 

 

원래는 사용자가 로그인하면 관련 정보를 한 번에 받아오지만

지금은 연습으로 따로 받아 보자

 

 

안의 내용 채우기 

 

 

사용자에게 id, pw 받기

loginUser: 이름이 Jane / coder로 로그인이 되면 

getRoles: 이름 받아 name과 role 출력 하기 

 

 

이렇게 코드를 작성하면 

가독성도 떨어져 한 눈에 알아보기 어렵고

나중에 디버깅이 어렵다. 

 

 

promise, async, await을 써서 좀 더 간단한 코드로 나타내보자. 

 

 

-- 출처  --

https://youtu.be/s1vpVCrT8f4