동기와 비동기 (Synchronous & Asynchronous)

동기(Synchronous) 방식

 

동기 방식은 코드가 작성된 순서대로 작업이 순차대로 진행되는 방식을 의미하며, 이전 작업이 완료되기 전까지 다음 작업을 진행하지 않는 특징이 있다.

 

동기적으로 코드를 작성하면 직관적인 코드를 작성하기 쉽다는 장점이 있다.

 

하지만, 한꺼번에 여러 작업을 수행하는 코드에서는 이전 작업의 완료를 기다리며 전체 프로세스의 성능이 저하될 수 있다는 단점이 있다. 웹에서는 API 혹은 서버와의 통신에서 위와같은 문제가 발생해 성능 저하가 발생할 수 있다. 이러한 문제는 페이지 로딩 속도 저하, 상호작용의 반응 속도 저하 등의 원인이 될 수 있다.

 

 

비동기(Asynchronous) 방식

비동기 방식은 코드가 작성된 순서대로 동작은 하지만 이전 작업의 완료 여부에 따라 기다리지 않고 독립적으로 실행되는 방식을 의미한다. 

 

비동기 방식은 네트워크 요청이나 API 요청과 같이 시간이 오래 걸리는 작업에 적용한다. 비동기 방식을 적용하며 전체 프로세스의 실행 시간을 줄일 수 있다.

 

하지만 단점도 존재한다. 비동기 방식은 동기 방식에 비해 코드의 복잡도가 비교적 높은 편이며, Javascript 환경에서 콜백지옥이나 프로미스 체이닝과 같은 문제을 유발할 수 있다.

 

 

웹에서의 비동기 사용

Javascript를 사용해 웹을 개발할 때 비동기를 사용하게 되는데, 주로 서버와의 통신과 API 사용에서 사용한다.

 

이는 비교적 다른 코드들에 비해 동작 속도가 느린 로직을 구현할 때 사용됨을 알 수 있는데, 예를 들어 홈 화면을 렌더링할 때 광고 베너에 들어가야할 데이터, 컨텐츠에 들어갈 데이터 등 수많은 데이터를 서버로부터 불러오는 페이지에서 동기 방식을 적용해 요청을 하나씩 처리해주면 페이지의 렌더링 시간이 엄청나게 길어질 것이다.

 

이렇게 UX를 저하시킬 수 있는 문제는 비동기 방식을 이용해 완화할 수 있는데, 각각의 요청을 비동기 방식으로 실행시켜 전체 요청 프로세스를 병렬로 요청하며 전체 요청 시간을 줄여 렌더링 속도를 높일 수 있다.

 

또한 비동기 방식은 다른 작업을 기다리지 않고 실행해야 하는 작업을 구현하는 경우에 유용하다.

 

 

마무리

동기와 비동기 방시 모두 프로그래밍에서 중요한 개념으로 이전 작업의 완료 여부를 고려하는지에 따라 다르게 동작한다.

 

동기 방식은 순차적으로 동작하며, 이전 작업이 완료되야 다음 작업이 실행된다.

비동기 방식은 적업들을 병렬로 실행되며 각각 독립적으로 실행되고, 이전 작업의 완료를 기다리지 않는다.

 

콜백 지옥이나 프로미스 체이닝을 유발하지 않고 비동기 방식을 잘 다룬다면 서버 요청 및 동기 방식보다 빠르게 작업을 수행할 수 있게 된다. 사용자 경험을 높이기 위해서라도 비동기 방식을 잘 다뤄야하겠다....