동기&비동기 데이터 처리 방식
JavaScript에서 데이터를 처리하는 방식에는 크게 동기, 비동기 처리 방식이 있다.
오늘은 비동기 처리방식에 대해 자세히 정리하기 전, 동기(synchronous) 비동기(Asynchronous)에 대해 정리해보려고 한다.
1. 동기(synchronous)
동기식 처리방식은 요청한 작업이 완료된 후에 다음 코드가 실행되는 방식이다. 즉, 요청한 데이터를 리턴 받기 전까지 다른 작업을 하지 않고 기다린다.
설계가 간단하고 직관적이기는 하지만, 결과를 리턴받기 전까지 대기해야 한다.
[동기식 처리방식]
consloe.log('1st')
consloe.log('2nd')
consloe.log('3rd')
// 1st
// 2nd
// 3rd
2. 비동기(Asynchronous)
비동기식 처리방식은 요청한 작업이 완료되지 않더라도 다음 코드를 실행하는 방법이다.
[비동기 처리방식]
consloe.log('1st')
setTimeout(()=> { console.log('2nd'); }, 0);
consloe.log('3rd')
// 1st
// 3rd
// 2nd비동기 Web API인 setTimeout() 메서드를 사용하게 된다면 결과가 달라지게 된다. 지연시간을 0초로 설정했더라도 비동기 함수이기 때문에 바로 실행되지 않으며 테스크 큐에 전달되어 콜스택에 바로 쌓이는 다른 작업들(동기적 처리) 보다 늦게 호출된다.
즉, setTimeout()이 끝나는 것을 기다리지 않고 "3rd"가 먼저 실행됬다
[비동기 처리 방식의 필요성]
API통신을 통해 원하는 데이터를 서버로부터 받아와야 하는 경우, 시간이 얼마나 걸릴지 예측할 수 없다.
이 때, 동기적 처리를 해야한다면 전체 페이지의 로딩 시간이 지연될 것이다.
이와 같은 상황을 방지하기 위해 비동기 데이터 처리가 필요하다.
