동기와 비동기
- 동기(Syncronous): 태스크가 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기
- 비동기(Asynchronous): 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 작업을 실행
비동기 처리
- 자바스크립트는 단일 스레드 프로그래밍 언어로 단힐 호출 스택이 있기에 한번에 하나의 일을 처리 ➡️ 동기 방식으로 진행됨
- 하나의 호출 스택만 있기 때문에 하나의 함수를 처리하는데 매우 오랜 시간이 걸릴 경우, 다음에 실행해야할 함수에 지장을 줄 수 있는 문제 발생
👏🏻 위의 문제를 해결하기 위해서 아래와 같은 비동기 구현 패턴이 등장
- callback 함수 사용
- ES6 Promise
- ES8 async/await
callback
1. 정의
콜백 함수는 다른 함수의 인자로 이용되는 함수이며 어떤 이벤트에 의해 호출되는 함수
2. 문제점
2-1. 콜백 지옥
- 반복적인 콜백 함수 호출로 인한 콜백 지옥 발생
- 유지 보수나 가독성에 좋지 않음
2-2. 어려운 에러 핸들링
- catch()로 에러를 catch 할 수 없음
Promise
1. 정의
- 위의 callback 단점을 보완하기 위해 ES6에서 등장
- resolve(비동기 처리 성공)와 reject(비동기 처리 실패) 함수를 인자로 전달 받음
2. 3가지 상태
- 대기(pending): 비동기 처리가 아직 수행되지 않은 상태
- 이행(fulfilled): 비동기 처리가 성공한 상태
- 실패(rejected): 비동기 처리가 실패한 상태
3. then, catch
- Promise 객체의 후속 처리 메소드(then, catch)를 통해 비동기 처리 결과 또는 에러 메세지를 전달받아 처리
- then
- 두개의 콜백 함수를 인자로 받음
- 첫번째 콜백 함수는 fulfilled시 호출되고, 두번째 콜백 함수는 rejected시 호출됨 - catch
- 비동기 처리에서 발생한 에러와 then 메소드에서 에러 발생시 호출됨
callback과 Promise 차이점
- callback을 사용하면 비동기 로직의 결과값을 처리하는 것은 callback 안에서만 가능하고, 콜백 밖에서는 결과값을 알 수가 없음
- promise를 사용하면 비동기 로직의 결과값이 promise 객체에 저장되기 때문에 코드 작성이 용이해짐
참고 블로그
