21.10.15 동기vs비동기 예제 / Callback Hell 체험

동기 비동기 실행과 콜백

기본적인 자바스크립트의 함수 실행

callback.js

index.html와 결과

Synchronous callback

synchronous

Asynchronous callback

화살표 있는 게 비동기, 없는 게 동기

-> 이렇게 하면 Callback으로만 함수를 짜게 된 것. (함수를 부르고 그 안에서 또 부르고..)

Callback Hell 예제

UserStorage라는 클래스를 정의 다음과 같은 작업을 수행

1. id, password를 받아옴. 꾸진 백엔드라고 가정하고 login과 role를 받아올 때 각 2초,1초가 걸린다고 set
2. login
3. role

Callback Hell

id 와 password

등록된 사람 성공

잘못된 id,password일 경우

 

Callback pattern :

• 비동기 처리 후 실행될 코드를 Callback function으로 보내는 것.
• Callback Hell)등이 단점으로 부각됨.
• 따라서 Promise라는 것을 활용해 비동기 처리의 순서 조작, 에러 핸들링, 여러 비동기 요청 처리 등을 쉽게 처리한다.