자바스크립트 비동기(Asynchronous) 과정 .feat(AST)

자바스크립트 비동기 이미지

 

 

 

 

 

---

 

자바스크립트에는 동기식과 비동기식이 있다.

 

동기식(Synchronous) 이란

단순하게 순서대로 실행되는데 1번이 실행되고 1번이 끝이 나면 2번이 실행되고 끝나면 그다음 작업들이 이런 과정으로 처리되는 것이다.

 

• 실행 순서가 보장되자만 한 번에 하나씩 처리 되기 때문에 한번에 여러 개의 작업이 불가능하다.

 

비동기식(Asynchronous) 이란

동기식과 다르게 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음작업을 시작할 수 있다. 한 번에 여러 일을 처리 할수 있다.

 

• 한번에 여러 가지 작업을 처리할 수 있지만 작업 순서가 보장되지 않는다.

 

 

---

 

JavaScript 는 동기식 언어이다?

 

자바스크립트는 단일 스레드(싱글) 이다 . 메인 스레드인 이벤트 루프가 싱글 스레드 이기 때문이다.

하지만 이벤트 루프만 독릭적으로 실행되는 게 아닌 브라우저나 Node.js 같은 멀티 스레드 환경에서 실행되기 때문에 싱글 스레드이지만 런타임은 싱글 스레드가 아니다.

 

 

위에 설명처럼 단일 스레드 이기 때문에 한 번에 하나의 일만 처리할 수 있지만 비동기 방식을 사용하여 한번에 여러가지 작업을 처리 할수 있다.

 

 

---

 

 

비동기 처리 과정

비동기 처리 방식 이미지

 

실행 과정

 

1. 코드 실행 시 동기적으로 처리되는 부분은 바로 실행된다. 이때 스택(Stack)이라는 자료구조를 사용하여 실행 순서를 관리한다.
2. 만약 비동기 함수를 호출한다면, 해당 함수는 바로 실행되지 않고 Web Api 환경으로 이동, 스택은 그다음 줄의 코드를 실행한다.
3.  Web Api 환경에서는 해당 비동기 함수가 실행된다. 비동기 함수가 끝나면, 이벤트 큐(Event Queue)에 콜백 함수를 등록한다(callback 이 있을 때).
4. 이벤트 루프(Event Loop)는 스택이 비어있는지 확인하고, 비어있다면 이벤트 큐에 있는 콜백 함수를 스택으로 이동시킨다. 이때, 스택이 비어있지 않으면 이벤트 루프는 스택이 비워질 때까지 대기한다.
5.  태스크 큐(Tast Queue)는 이벤트 루프가 호출 승택이 비어있을 때까지 실행할 작업을 순서대로 대기시키는 역할을 한다. - 콜백 함수나 프로미스의 then 메서드 등의 비동기 함수들이 대기하고 있다.
6. 스택에 들어온 콜백 함수는 동기적으로 처리된다. 이때, 해당 함수가 비동기 함수를 호출한다면 위 과정을 다시 반복하한다.

 

 

---

 

 

실행과정에 들어가는 용어 정리

 

1. 콜 스택 (Call Stack) 자바스크립트에서 함수 호출은 콜 스택 (Call Stack)에 기록된다. 콜 스택은 함수 호출 시 생성되며, 함수가 실행되는 동안 해당 함수의 모든 변수와 매개 변수가 콜 스택에 저장한다. 함수가 반환되면 콜 스택에서 제거된다. 이러한 방식으로, 콜 스택은 함수 호출의 순서를 추적한다.
2. 이벤트 루프 (Event Loop) 자바스크립트는 단일 스레드 언어. 이것은 한 번에 하나의 작업만 처리할 수 있다는 것을 의미한다. 그러나 자바스크립트는 이벤트 루프 (Event Loop)를 사용하여 비동기 코드를 처리할 수 있다. 이벤트 루프는 콜 스택과 함께 작동하여 비동기 작업을 처리하며, 이벤트 루프는 콜 스택이 비어 있을 때 실행된다.
3. 웹 API (Web API) 웹 API는 브라우저에서 제공하는 API. 이러한 API 중 일부는 비동기 콜백 함수를 사용하여 작동한다. 예를 들어, setTimeout 함수는 웹 API 이다. 이 함수는 지정된 시간이 경과하면 콜백 함수가 콜 스택에 추가되도록 예약한다.
4. Promise 는 자바스크립트의 비동기 처리 모델이다. Promise는 비동기 작업이 완료되었는지 여부와 결과를 나타내는 객체이다. Promise는 세 가지 상태를 가질 수 있는데. 대기 중인 상태(Pending), 이행된 상태(Fulfilled), 거부된 상태(Rejected).
5. Fetch 는 자바스크립트의 네트워크 요청 API 로. Fetch는 Promise 기반으로 작동한다. 이 API는 비동기 함수이며, HTTP 요청을 만들고 처리하는 데 사용된다.
6. Async/Await 는 Promise를 사용하는 비동기 코드를 작성하는 방법 중 하나이다. Async 함수는 Promise를 반환하며, await 키워드는 Promise가 이행될 때까지 함수의 실행을 일시 중지한다.

 

 

---

 

 

자바스크립트는 어떻게 동기화 비동기 코드를 구분할까?

 

JavaScript 코드 구문 분석을 통해 비동기 코드의 특징을 식별한다.

 

1. 코드 스캔: 프로그램의 모든 코드를 스캔하고 비동기 코드 패턴을 찾는다. 이 패턴은 콜백 함수, 프로미스, async/await 등의 키워드를 사용하여 식별할 수 있다.
2. 함수 검사: 코드 스캔 후에는 각 함수를 검사하여 해당 함수가 비동기 함수인지 확인한다. 이를 위해 함수 내에서 콜백 함수, 프로미스, async/await 등이 사용되는지 확인한다.
3. AST 분석: AST(추상 구문 트리)는 프로그램의 구문 구조를 나타내는 데이터 구조. AST 분석을 통해 비동기 코드 패턴을 찾을 수 있다.
4. 런타임 분석: 런타임 분석을 통해 프로그램이 실행되는 동안 비동기 코드가 호출되는지 확인할 수 있다. 이를 위해서는 프로그램의 실행을 추적하고 모든 콜백 함수 및 프로미스 처리를 모니터링해야 한다.

이러한 알고리즘을 사용하여 자바스크립트 프로그램에서 비동기 코드를 감지할 수 있다.

 

 

 

 

---

 

https://covelope.tistory.com/entry/guide-to-react-javascript-memory-leak-analysis-and-optimization

React & JavaScript 메모리 누수 분석과 해결 방법 - 최적화 노하우

 

 

https://covelope.tistory.com/

Ch.Covelope

https://velog.io/@goggg8822

goggg8822 (hu-lont) - velog

 

 

---