동기와 비동기의 차이점
동기(Synchronous)
- 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있다
- 설계가 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야함
비동기(Asynchronous)
- 요청을 보낸 후 응답관계 없이 다음 동작을 실행할 수 있다
- 설계가 복잡하고, 결과가 나오기 전에 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다.
비동기처리가 필요한 이유
- 화면에서 서버로 데이터를 요청했을때 서버가 언제 그 요청에대한 응답을 줄지 모르는데 마냥 기다릴순 없기 때문
비동기적으로 처리해야할 작업들
- 파일 읽기
주로 서버쪽에서 데이터를 받아와야 할 때는, 요청을 하고 서버에서 응답을 할 때까지 대기를 해야하기 때문
- Ajax 통신작업 (ajax web API 요청)
서버쪽에서 데이터를 받아와야 할 때는, 요청을 하고 서버에서 응답을 할 때까지 대기를 해야 되기 때문
- 암호화/복호화
바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문
- DOM의 이벤트 처리작업(작업예약)
단순히 어떤 작업을 몇초 후에 스케쥴링 해야하는 상황에는 setTimeout을 사용
- 일정 시간 뒤에 동작해야 하는 작업
- 데이터를 수신하는 코드와 페이지를 표시하는것
비동기 함수를 동기 함수로 만드는 방법
- 콜백함수로 비동기 처리방식 문제 해결
- Promise 객체를 사용하여 문제 해결