열정 실천

[JavaScript] 데이터 처리 방식 (동기와 비동기) 본문

개발 공부/JS

[JavaScript] 데이터 처리 방식 (동기와 비동기)

구운오니 2023. 5. 15. 23:20

동기비동기 

 

📌 개념

 

🟢 동기식(Synchronous) 프로그램 

 

      ◽ 데이터의 요청 후 결과가 나올 때까지 기다리는 방식 (blocking : 답변을 기다리는 상태)

      ◽ 순차적으로 일을 수행한다. 

      ◽ 현재 작업이 수행 중이면 뒤의 작업은 대기한다. 

 

 

🟢 비동기식(Asynchronous) 프로그램   

 

      ◽ 데이터 요청 후 결과를 기다리지 않고 다른 일을 시작한다. (non-blocking : 답변을 기다리지 않음)

      ◽ 병렬적으로 일을 수행한다. 

      ◽ 현재 작업과 무관하게 뒤의 작업이 실행된다. 

 

비동기 방식은 결과를 기다리지 않기 때문에 잘 수행됐는지 결과를 확인할 수가 없다. 

 

 

📌 장단점 

 

동기 방식의 장단점 

😄 설계가 간단하고 직관적이다. 

🤔 결과가 주어질 때까지 다른 일을 못하고 기다려야한다. (작업 중단)

 

비동기 방식의 장단점

😄 동시에 여러가지 일을 수행할 수 있다. 

🤔 설계가 복잡하다. 

 

 

 

📌 자바스크립트에서는??

자바스크립트는 코드를 위에서 부터 순차적으로 처리하는 동기 방식의 코드이다. 

하지만 자바스크립트의 런타임 환경은 동시에 여러 작업이 실행될 수 있게 구성이 되어있어 비동기 작업도 가능하다. 

자바스크립트에서 비동기적 작업을 하기 위해서 콜백함수, Promise, async/await 을 사용한다. 

이 세 가지 방법에 대해서는 더 자세히 공부해보도록 하자!