js 동기 처리,비동기 처리

Posted by negabaro kim on Friday, March 1, 2019 Tags: programing   2 minute read

javascript만의 얘기는 아니지만 이 포스트에서는 동기처리와 비동기처리에 알아보자.

동기(synchronous)처리란?

위에서 아래부터 차례대로 실행됨 호출된 순서대로 실행됨

껌을 씹으면서 횡단보도를 걸어간다. « 동기처리에서는 이런게 불가능

껌을 씹는다 -> 껌을 씹는것을 멈춘다 -> 횡단보도를 걷는다 -> 횡단보드를 걷는것을 멈춘다 -> 껌을 씹는다. 이런느낌

장점:

위에서 아래부터 차례대로 실행되서 인간이 알기 쉬움.

단점:

껌을 씹으면서 횡단보드를 걸을 수 없음. 동시에 작업을 할 수 없어서 시간적으로 비효율 유식한 말로 블록킹(blocking) 현상이라고 함.

동기(synchronous)처리 조금 길게 설명

javascript는 싱글쓰레드 기반이므로 한가지 작업밖에 실행을 못함.(멀티 쓰레드인 경우 복수 작업이 가능) 실제로 껌을 씹는다 -> 껌을 씹는것을 멈춘다(껌씹껌씹멈)라는 작업과 횡단보도를 걷는다 -> 횡단보드를 걷는것을 멈춘다(횡걷횡걷멈)는 작업이 각각0.00001초안에 끝나는 작업이라면 컴퓨터는 각각을 동시에 실행하지 않지만 워낙 빨리 껌씹껌씹멈과횡걷횡걷멈를 반복 실행하게 되어 인간이 보기에는 동시에 처리되는것처럼 느껴질 순 있음

그러나 가령 껌을 씹는다 -> 껌을 씹는것을 멈춘다(껌씹껌씹멈)작업이 알수없는 이유로 1000초가 걸리게되면 횡단보도를 걷다가 멈추게 된것처럼 보일 수 있다 주변 사람들에게 저 새끼뭐하지? 라는 소리를 듣거나 교통사고에 나서 사망할 수도 있음.. 이러한 현상을 프로그래밍 세계에서는 블록킹(blocking) 현상이 발생했다고도 말한다.

정리: 블록킹 현상이 발생하는 경우

한가지 작업밖에 실행을 못함 + 차례대로 실행함 + 동작시간이 오래걸리는 작업

싱글쓰레드 + 동기적 코드의 흐름 + 동작시간이 오래걸리는 함수의 호출

비동기(asynchronous)처리란?

특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는것이 가능 특정 작업을 누군가에게 미룰 수있음. 순서대로 실행되지 않음. 껌을 씹으면서 횡단보도를 걸어간다. « 비동기 처리에서는 이게 가능

장점:

위에서 설명한 동기처리의 문제점을 해결할 수 있음. 동시에 복수의 작업 실행이 가능

단점:

순서대로 실행된다는 보장이 없기때문에 어떻게 동작하는지 알기 어려움.가독성이 떨어짐

비동기(asynchronous)처리 조금 길게 설명

동기처리에서 설명한 블록킹 현상을 해결하기 위한것이 목적이므로 싱글쓰레드가 아니고 멀티쓰레드인경우 바로 해결이 가능하다. 그러나 javascript는 프로그래밍이 어렵고 복잡해지는 멀티쓰레드를 채택하지 않고 있다 대안으로 javascript는 비동기적 프로그래밍을 javascript 실행환경의 API로 지원한다.

비동기적으로 처리해야할 작업들은 주로 이하와 같다.

  1. 파일을 읽거나, 쓰기 처럼 오래걸리는 작업
  2. ajax 통신작업
  3. Dom의 이벤트 처리작업
  4. 일정 시간 뒤에 동작을 해야 하는 작업

위에서 설명했듯이 javascript는 싱글쓰레드 라는 한계에서 비동기 처리를 구현하기 위해 web api를 제공한다고 언급했다. 즉 이web api를 이용하지 않으면 비동기 처리는 불가능하다.

동기처리되는 예)

webAPI에서 제공하지 않고 javascript엔진에서 바로 처리가능한 것들(즉 webAPI이외 모든것?)

console.log("sana");
console.log("dahyun");

비동기 처리되는 예)

webAPI에서 제공하는 모든것

setTimeout

setTimeout(function() {
    console.log("TT");
}, 5000);

AJAX(XMLHttpRequest)

$.ajax()등을 이용한 서버와 통신등

DOM

이미지 렌더링 관련 돔조작(이미지 로드에 시간이 걸리기때문에 DL가 완료될때까지 높이,폭값을 못가져오는 경우가 있음) $.fadeIn()등 에니메이션 관련 돔조작 addEventListener를 이요한 DOM이벤트 처리 등등

주의

javascript는 싱글쓰레드를 사용하지만 실제로 javascript 실행환경은 멀티쓰레드를 갖고 있다. 개발자가 코드를 제어할 수 있는 쓰레드를 하나로 제한해놓았을 뿐이다.

https://blog.hanumoka.net/2018/10/06/javascript-20181006-javascript-callback/
https://teratail.com/questions/176800?modal=q-comp
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/#%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EA%B0%80%EC%9A%94