- 데이터를 주고받기 위해서 브라우저에서 데이터를 요청할 때
- 동기 -> 기다림(한 작업이 끝나야 다음작업이 진행됨)
- 비동기 -> 기다리지 않음(한 작업이 완료되길 기다리지않고 다음작업 진행)
동기(synchronous)
- 장점
- 코드가 아주 간단
-> 코드의 실행흐름 읽기쉬움(작업이 순차적으로 진행되므로)
- 단점
- 작업이 끝나기를 기다리는 동안 다른 작업을 수행할 수 없음
-> 느림
비동기(asynchronous)
- 장점
- 여러 작업을 동시에 수행할 수 있음
-> 성능 향상
- 단점
- 코드가 복잡
-> 작업이 완료될 때까지 결과를 기다리지 않기 때문에 코드의 실행 흐름을 이해하기 어려움(동기보다 오류처리가 어려움)
aysnc/await
- 비동기작업 수행하는 함수에서 사용됨
- aysnc -> 비동기함수임을 나타냄
- await -> 작업이 완료될 때까지 대기
-> 콜백지옥을 방지할 수 있음
(콜백함수를 사용하지 않고도 비동기 작업을 보다 간결하고 가독성 높은 코드로 처리할 수 있음)
콜백지옥에 대한 사전지식
- 비동기 작업이 많아지면 발생하는 문제
-> 콜백 함수를 계속 중첩해서 사용하면
-> 코드의 가독성이 떨어지고 유지보수 어려움
-> Promise나 aysnc/await를 사용해서 해결함
콜백함수에 대한 사전지식
- 함수의 인자로 들어가는 함수
(다른 함수에게 전달되서, 나중에 그 함수 안에서 실행되는 함수)
function aaa(qqq) {
...함수 로직
}
aaa( function( ){ } )
aaa( ( ) => { } )