[JavaScript] 자바스크립트와 동기, 비동기 처리

mori·2024년 7월 1일

알면 알수록 알 수 없는 자바스크립트 세상~
튼튼한 기본기를 위해 기초부터 다시한번 제대로 이해해보자고! 아자아자아자! 😀😀😀

INTRO

🟨 1. 동기, 비동기...자바스크립트 엔진?

개발을 접하면서 동기, 비동기처리에 대한 이야기를 정말 많이 들어보았다. 하지만 누군가 나에게 동기랑 비동기가 모에오? 라고 물어본다면 제대로 답변을 할 수 없었고 자바스크립트는 싱글 스레드 언어인데 이게...뭐지? 싶었다.
💁‍♀️ 자바스크립트와 동기, 비동기 처리가 어떻게 연관이 되어있는지 살펴보러 가보자구

동기와 비동기

🟨 2. 동기, 비동기

동기와 비동기는 사진으로 보았을 때 차이점을 더 확실하게 느낄 수 있다. 이미지로 보면 확연한 차이를 느낄 수 있는 것처럼 둘은 작업 수행 방식과 결과 반환 시점에 차이가 있다.

🟨 2-1. Sync(Synchronous) 동기 : 동시에 일어나는

요청 작업에 대해 완료 여부를 따져 순차대로 처리한다. 작업 실행 후 해당 작업을 완료할 때까지 대기하며 해당 작업 완료 전까지는 다른 작업을 수행하지 않는다.

😸장점 : 설계가 간단, 직관적, 요청&응답 순서 보장
😿단점 : 작업이 많아지면 자원, 시간 낭비 및 속도 저하, 병렬적 여러 작업 수행 불가능
🗨️예시 : 메일 작성 후 보내기 버튼 클릭 (전체 페이지 업데이트)

🟨 2-2. Async(Asynchronous) 비동기 : 동시에 일어나지 않는

요청 작업에 대해 완료 여부를 따지지 않고 다음 작업을 그대로 수행한다. 작업 실행 중 다른 작업 수행이 가능하며 결과는 작업이 완료될 때 반환한다. 비동기 함수는 호출 즉시 반환되며, 작업이 완료되면 콜백 함수나 promise 등을 통해 결과를 처리한다.

😸장점 : 속도, 성능 향상, 병렬적 여러 작업 수행 가능, 사용자 경험 개선 가능
😿단점 : 설계 복잡, 요청&응답 순서 보장 불가
🗨️예시 : 블로그 및 카페 댓글 작성 후 작성 버튼 클릭 (댓글 영역만 업데이트)

💁‍♀️ 그러면 자바스크립트가 싱글 스레드 언어인데 어떻게 비동기 처리를 하는걸까?

자바스크립트

🟨 3. 자바스크립트는 싱글 스레드 언어

자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만 가능하다.
마치 건물을 짓는 인부가 한명이라고 생각하면 이해가 더 쉬워진다! 자바스크립트에는 인부가 한명인 것이다!

인부가 한 번에 하나의 동작(시멘트를 바르고 벽돌 쌓기)만 할 수 있는 것처럼 자바스크립트도 동시 작업이 불가하고 한 번에 하나의 작업만 가능하다. 하나의 함수가 실행되고 끝나야 그 다음 함수 실행이 가능하다는 이야기이다.
함수가 실행되고 끝나고 실행되고 => 이것은 위에서 이야기한 '동기' 처리 방식이다.
그래서! 자바스크립트는 동기 방식으로 실행이 되는 것이다!