JavaScript - 동기와 비동기의 쉬운 이해

 

Updated 03/16/23

 

항상 헷갈렸던 부분을 의식의 흐름에 따라 정리해보려고한다.

 

 

요청과 응답 

HTTP 통신을 할때는 클라이언트와 서버가 서로 커뮤니케이션을 한다.

통신을 할 때는 순서가 중요하다. 그래서 통신을 할 때 동기적 처리가 필요하게 되었다.

• 요청 - 클라이언트 → 서버
• 응답 - 서버  → 클라이언트

 

동기와 비동기 

동기는 하나가 완료하고 차례차례 그 다음 테스크를 처리하는 방식이다. 

비동기는 동시에 병렬적으로 핸들링하는 방식이다.

왼쪽이 동기 오른쪽이 비동기

 

 

자바스크립트는 싱글쓰레드 언어이다.

싱글쓰레드는 이 말인즉슨 일꾼이 한명이다. 동시 진행이 안된다.  하나의 함수를 실행하고 있으면, 다른 함수는 블로킹(Blocking)이 된다.

멀티쓰레드는 병렬진행이 가능하다. ex) 크롬 창을 보면 알수있다. 한탭에서 에러가 나도 다른 탭의 실행에 영향을 끼치지 않는다.

 

자바스크립트는 비동기 처리 방식을 특징으로 가진다. (싱글쓰레드의 단점을 보완하기 위해)

 

원래 싱글스레드의 동작방식은 동기적이다.

함수가 선언되면 실행 컨텍스트가 생성되어 메모리(힙)에 저장이되고, 

함수가 실행되면 실행 컨텍스트 스택에 PUSH 되어 하나씩 쌓이며 순차적으로 실행이 이루어 진다.

 

하지만 비동기처리를 할수 있는 경우가 있다.

setTimeout, setInterval,  HTTP 요청, 이벤트 핸들러 이다.

그래서 통신을 하는 동안, 이벤트가 일어나는 동안, 다른 작업이 동시에 이루어지는 것(?) 같은 착각을 준다.

 

네트워크 통신을 할 때  비동기적인 동작은 가끔 불편하다. 왜냐하면 네트워크 통신은 순차적으로 진행되어야 순조롭기 때문이다.

예를 들면 클릭하면 서버에 데이터가 저장된다. 근데 여러번 누르면 데이터 통신을 하는 동안 중복된 데이터가 날아가게 된다. 

비동기적으로 호출되기 때문이다. 그래서 이럴때는 동기적 처리를 해줘야 한다.

즉, 이거 끝나고 저거 한다음에 요거 하라고 지시하는 그런 의미랄까

 

 

콜백지옥 to axios 

동기적 순서 보장을 위해 콜백 지옥이 탄생되었고 

↓

지옥에서 벗어나 프로미스 체이닝 문법이 탄생하였으며

** promise 는?  체이닝으로 성공 실패의 케이스를 구분해 동기적으로 핸들링 하는 함수

↓ 

axios 의 등장으로 우리는 프로미스를 쉽게 표현할수 있게 되었고, async await 문법을 통해 동기적 순서를 보장받게 되었다.

** axios 란 프론트에서 요청을 보낼때 사용되는 비동기 기반 라이브러리

 

 

axios 의 등장 

axios 모듈이 비동기로 작동하지만

async await를 통해 A의 호출 결과를 기다려 →결과가 나오면 B로 넘어가고 

B의 호출 결과를 기다려 결과가 나오면 C으로 넘어가는 식으로 진행된다

(동기적이라고 해서 다른 함수들에 대한 모든 걸 멈춘다는 건 아니다. 해당 통신함수의 경우에만 동기의 규칙이 적용된다.

즉, 이 함수의 경우에만 주어진 일을 다한 다음에야 다른 일을 할 수 있도록 만드는 것이다.)

 

 

 

예전에 공부했던 동기와 비동기 포스팅 ↓ ↓ ↓

JavaScript - 동기(Sync)와 비동기(Async)