-
동기 및 비동기 처리CS 2023. 12. 3. 14:50
JavaScript에서 동기 및 비동기 처리는 코드 실행과 흐름 제어가 어떻게 관리되는지에 대한 다른 방식을 나타낸다.
동기(synchronous) 처리
동기 처리에서는 코드가 순차적으로 실행되며 한 번에 하나의 문이 실행된다. 각 작업은 다음 작업이 시작되기 전에 완료돼야 한다.
동기 처리 예시를 실생활 서비스로 들어보자면, 오븐이 하나만 존재하는 빵집에서 하나의 빵을 구우면, 해당 빵이 모두 구워지기 전까지 다른 빵은 구울 수 없는 과정을 생각하면 이해하기 쉽다.
말 그대로 동시에 일어난다는 뜻으로, 요청과 결과가 동시에 일어난다는 것이다. 즉, 바로 요청하면 요청 시간에 관계없이 먼저 요청을 했던 것에 대한 결과가 주어져야 다음 요청을 수행할 수 있다는 것이다.
동기 처리의 실행 흐름
프로그램은 각 코드 라인이 순서대로 실행되는 차단 또는 동기적 실행 모델을 따르며 각 작업이 완료될 때까지 기다린다.
동기 코드 예시
비동기(Asynchronous) 처리
코드가 비순차적으로 실행되며, 각 작업이 완료되지 않아도 다음 요청을 받아서 처리할 수 있다.
비동기 처리 예시를 실생활에서 찾아보자면, 여러 오븐이 존재해서 하나의 빵을 굽기 시작했을 때, 다른 빵도 추가로 더 구울 수 있는 것을 예시로 들 수 있다.
이처럼 비동기 처리는 동기와 반대라고 생각하면 쉽다. 요청과 결과가 동시에 일어나지 않는 것을 나타낸다.
비동기 처리는 주로 API 요청, 파일 읽기, 암호화, 복호화 등에서 자주 사용된다.
비동기 처리의 실행 흐름
비동기 작업은 작업을 시작하고 작업이 완료될 때까지 기다리지 않고 프로그램을 계속 진행시킨다. 콜백, 프로미스, async/await 등을 자주 사용한다.
callback을 사용한 예시 위 예시 같은 경우에는 setTimeout 함수가 완료되기를 기다리지 않고 코드가 계속 진행되어서 결과가 "시작" - "끝"-"비동기 함수 내부"-"콜백" 순으로 진행됨을 알 수 있다.
Promise 사용한 예시 async/await 사용한 예시 이처럼 3가지 방식을 사용하여 비동기 코드를 구현할 수 있다.
동기와 비동기의 차이 정리
동기 비동기 요청과 결과 동시에 일어남 요청한 자리에서 결과가 주어지지 않음 각 노드 사이의 트랜잭션을 동시에 맞춤 노드 사이의 트랜잭션을 동시에 맞추지 않아도 됨 트랜잭션(transaction)이란, 작업 처리 단위를 말한다
동기와 비동기의 장단점
동기 비동 장점 직관적인 코드
디버깅 용이비동기가 작업 처리
응답성 향상단점 차단 현상
성능 저하코드의 복잡성
디버깅 어려움
순서 관리 어려움동기 처리는 코드가 순차적으로 실행되므로 프로그램의 동작이 직관적이며 이해하기 쉽고, 이러한 순차적인 실행 흐름은 디버깅을 간편하게 만든다. 에러 발생 시 어떤 부분에서 문제가 발생했는지 추적하기 용이하다. 하지만 다음 요청을 하기 위해선 이전 작업이 모두 끝날 때까지 기다려야 하므로 차단 현상이 발생하게 되는데 입출력 작업이 많은 경우 전체 프로그램이 지연될 수 있다. 이렇게 한 요청이 처리 되기까지의 대기 시간이 긴 작업이 발생하는 경우 프로그램이 일시 중단되어 성능이 저하될 수 있다.
비동기 처리는 동기 처리와 반대로 여러 작업을 동시에 처리할 수 있어서 입출력 작업과 네트워크 요청 등에서 성능이 향상된다. 한 작업이 끝나지 않아도 새로운 요청을 할 수 있기 때문에 전반적으로 응답성이 향상된다. 하지만 이러한 비동키 코드는 콜백 함수나 프로미스, async/await와 같은 추가적 개념을 사용하여 코드가 복잡해질 수 있고, 코드가 비순차적으로 실행되므로 작업 간의 순서 관리가 다소 어려우며, 에러 추적이 동기 코드보다 어려울 수 있다. 특히 콜백 지옥이 발생할 가능성이 있다.
요약하면 동기 처리는 차단 실행 모델에 따르며, 비동기 처리는 전체 프로그램을 멈추지 않고 입출력 작업, 타이머 및 네트워크 요청과 같은 작업을 더 잘 처리할 수 있다.
이러한 동기 처리와 비동기 처리를 적절하게 조합하여 사용해야 프로그램의 성능과 응답성을 균형 있게 유지할 수 있다.
'CS' 카테고리의 다른 글
JS(JavaScript) 문법 (0) 2023.12.03 서버와 클라이언트 (1) 2023.12.03 GitHub workflow (3) 2023.11.26 Git과 Github? (0) 2023.11.26 JSON, XML, YAML? (1) 2023.11.26