비동기
동기와 비동기
동기(Synchronous) : 동시에 일어난다 -> 요청과 결과가 동시에 일어남!
비동기(Asynchronous) : 동시에 일어나지 않는다 -> 요청과 결과가 동시에 일어나지 않음!
커피숍 비유를 통한 동기와 비동기
동기적 커피숍 : A가 아메리카노 주문 -> 아메리카노를 만들기 시작 -> 아메리카노가 완성되면 A를 불러 아메리카노를 전달한다 -> B가 모카라떼를 주문 -> .... => A의 주문을 완성해서 A에게 전달하기 전에는 B의 주문을 받을 수 없음
비동기적 커피숍 : A가 아메리카노를 주문하고 B가 카페라떼를 주문 -> 아메리카노와 카페라떼를 만들기 시작 -> 먼저 완성되는 음료부터 주문자에게 전달 => 주문을 한번에 받아 완성되는 순서대로 주문자에게 전달 가능
고차함수와 Callback
- 고차함수는 다른 함수를 인자(argument)로 전달받을 수 있음
- 고차함수의 인자로 전달되는 함수를 콜백 함수(Callback function)라고 함 - 고차함수는 다른 함수를 리턴할 수 있음
- 함수를 리턴하는 함수를 커리 함수라고 함 - 함수를 리턴하는 함수와 함수를 인자로 받는 함수 모두 고차함수
- 고차함수는 콜백 함수와 커리 함수의 상위 개념
Promise
Promise?
자바스크립트 비동기처리에 사용되는 객체
Promise는 왜 필요?
Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용
Promise의 3가지 상태
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fullfilled(이행) : 비동기 처리가 완료되어 프로미스 결과 값을 반환해준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
async await
async await?
자바스크립트 비동기 처리 문법으로 async와 await은 꼭 같이 써야함
사용방법?
함수 앞에 async라는 예약어를 붙이고, 비동기 처리 코드 앞에 await을 붙여서 사용 단 주의할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await이 의도한 대로 동작함!
❓아니 비동기 방식은 async await을 제외하고도 2가지나 있는데 왜 생겼지?
콜백과 프로미스의 경우 코드가 중첩에 따른 들여쓰기 문제로 콜백헬이나 프로미스헬이 발생하여 코드 가독성이 떨어지는 문제가 있어 이 문제를 해결하기 위해 등장함
여담 : 처음 프로미스를 접한 나 : 그래서 프로미스가 뭐라고...?ㅋㅋㅋㅋ....ㅜㅜ
.jpeg)