동기란?
- 현재 작업의 응답이 끝남과 동시에 다음 작업이 요청된다.
- 함수를 호출하는 곳에서 호출되는 함수가 결과를 반환할 때까지 기다린다.
- 작업 완료 여부를 계속해서 확인한다.
장점 : 간단하고 직관적이다.
단점 : 결과가 주어질 때까지 대기해야 한다.
비동기란?
- 작업을 다른 쓰레드에 시키고 기다리지 않고 다음 작업을 실행하는 것(1번 쓰레드가 다른 일처리 시작 할 수 있음)
- 함수를 호출하는 곳에서 결과를 기다리지 않고, callback 함수에서 결과를 처리한다.
- 작업 완료 여부를 확인하지 않는다.
장점 : 결과가 나오기까지 다른 작업을 할 수 있으므로 좀 더 효율적으로 자원을 사용할 수 있다.
단점 : 설계가 복잡하고 결과가 주어지는 시간이 길어진다.
비동기 처리는 왜 필요할까?
주요사례
- dom element의 이벤트 핸들러
- 마우스, 키보드 입력(click, keydown 등)
- 페이지 로딩(DOMContentLoaded 등)
- 타이머
- 타이머 API(setTimeout 등)
- 애니메이션 API(requestAnimationFrame)
- 서버에 자원 요청 및 응답
- fetch API
- AJAX(XHR)
대표적으로 인터넷 통신같은 경우 요청을 하고난후 응답을 받기까지 얼마나 걸릴지 모르기 때문에 사용한다
- 데이터를 서버로부터 받아오는 앱을 만든다고 가정하면
서버로부터 데이터를 받아서 그 데이터를 보내줘야 한다- 제일 먼저 데이터를 받아오는 코드가 실행되어야 할것이다.
- 이 과정을 동기로 처리한다면 데이터를 받아오기까지 기다린 다음에 앱이 실행될 것이고 앱의 실행 속도는 점점 느려질 것이다.
- 이 문제를 비동기로 처리한다면 데이터를 가져오기까지 앱이 대기하는 상태가 없어지게 된다
대책 마련!!
-
순서의 대책을 마련해야되는데
callback 함수로 대책을 세울 수 있다.
그 다음 할 일을 callback함수 안에 넣어준다.
하지만 콜백 지옥이 일어나 가독성을 떨어뜨린다. -
async, await, Promisefmf 사용해서 비동기를 동기적으로 바꿔 줄 수 있다.
Promise 정리
https://velog.io/@gur0601/Promise
async, await 정리
https://velog.io/@gur0601/Async-await
Hi!