{ 자바 스크립트 } => 동기(Synchronous), 비동기(Asynchronous)

SEUNGJUN·2022년 2월 18일
0

자바스크립트 공부를 하면서 동기적인 처리와 비동기적인 처리에 대해서 정확하게 이해가 되지 않아서 한번 정리를 해보면서 이해해 보려고 한다.

동기(Synchronous) & 비동기(Asynchronous)

프로그램적으로 보지않고 일상생활에 대입해서 본다면 예를들어서 서점에서 주인이 손님들에게 주문을 받는 상황이라고 치면 손님이 4명정도가 왔다고 하고, 손님들이 주인에게 주문을 하게 됩니다. 그때 주인이 한명의 주문을 듣고 책을 찾아서 손님에게 전달(동기)해주게 되면 다음 주문을 할사람들은 기다려야하는 상황이 발생하게 됩니다.

반대로 주인이 손님들에 주문을 모두 메모해서 책을 찾아온후에 한꺼번에 계산(비동기)을 하는 상황을 생각해볼수가 있다. 이런 상황이라면 손님들이나 주인은 시간을 충분히 절약하면서 일을 마무리 할수 있다고 볼수가 있다.

동기와 비동기를 우리들의 일상생활속에서 접해볼수 있는 상황에 대입을 해보았는데 이제 프로그램에서 바라볼 필요가 있다.

이제 일상생활과 프로그램형식의 동기와 비동기를 보면서 비교해 볼수가 있는데 동기식 에서 클라이언트(손님)는 서버(주인)에게 요청(책 주문)이라는것을 보내게 된다. 그때 서버(주인)은 그 요청을 받아서 작업을 수행하고 응답(책 찾아서 계산)을 보내주게 된다. 그리고 다음 손님도 똑같이 진행하게 되고, 반면 비동기식을 보게 된다면 클라이언트(손님)은 서버(주인)의 응답에 관계 없이 요청(책 주문)을 기다리지않고 보낸후 서버(주인)도 그 요청들을 한꺼번에 끝내는 것을 볼수 있다.

코드 작성

대표적인 방식인 코드인데 이걸 결과 값으로 보게 되면

이런식으로 1,2,3이 순차적으로 출력되는것을 확인할수가 있다.
이처럼 위에서부터 순차적으로 처리가 되는것을 동기식 처리 라고 말할수 있다.

비동기 처리에서 가장 보편적으로 확인할수 있는 방법
setTimeout()인 메소드를 사용해서 확인해 볼수 있는데 위의 메소드가 비동기적 메소드로 볼수 있는데 빨갛게 표시된 부분에 시간을 넣으면 그 시간만큼 지연되고 작업이 된다. 그런데 0을 넣었기 때문에 우리는 결과를 1,2,3 이렇게 볼수 있다고 생각할수 있다.

그러나 결과값은.. 1,3,2 순으로 출력이 됬다는 것을 확인할수가 있다.
이유는 순서를 봐보면 되는데
1. 첫번째줄은 그냥 출력되는것을 확인할수가 있다.
2. 문제는 두번째인데 여기서 setTimeout() 메소드가 비동기식이기 때문에 프로그램에서는 처리를 해달라고 요청을 보내고 다음으로 넘어가게 되는것이다.
3. 그리고 바로 세번째로 넘어가서 3을 출력하게 된다.
4. 마지막으로 setTimeout() 메소드가 비동기적으로 처리되는 코드들 이후에 출력이 되는것을 확인할수가 있다는 것이다.

이렇게 동기적인 코드와 비동기적인 코드를 통해서 기본적인 개념을 정리해 볼수 있었습니다.

profile
RECORD DEVELOPER

0개의 댓글