Javascript 비동기적 동작 정리

비동기적 JavaScript

프론트에서는 javascript기반 vue.js를 사용해서 개발하고 있는데, 중간에 axios를 사용해 분명히 값을 받아왔음에도 그값을 저장한 변수는 undefined라 자꾸 오류가 발생하는 일이 있었다. console.log() 로 찍어보면 분명 값이 존재하는데 값을 가공하려 사용할때는 undefined라 정말 깊은 빡침을 느꼈었다. 그러다 이것이 모두 자바스크립트의 비동기적 특징 때문이라는 것을 스스로 알게됐을때 정말 엄청난 충격이었다.

 

이러한 특징때문에 골머리를 앓았던 적은 비단 이번 인턴업무에서만이 아니었다. 저번학기에 진행한 오늘어때라는 프로젝트에서도 같은 일이 일어나 완벽한 해결을 못해 절댓값을 집어넣어 넘어갔었는데, 그당시에는 이유조차 몰라 정말 힘들었었다.(물어볼 곳도 없고....) 지금에서야 알게됐지만 그래도 이렇게 알게되서 더 성장한거라고 생각하고 싶다.

 

생각해보면 어떤 오류를 만났을때 어떤 것이 문제라서 어디를 고쳐야하는지 검색하는 배경지식 또한 실력인 것 같다. 비동기적 특징이라는 것을 몰랐을 저 당시에는 아무리 검색해도 답이 안나왔는데,('값이 전달안됨'->이런 걸로검색을 했으니...하핳;;) 자바스크립트를 공부하면서 비동기적이라는 단어를 배우고 개념을 알게되니 내가 지금 막힌 오류가 비동기적특징때문이구나를 파악하는 것이 가능해졌다. 해당 오류는 해결한지 좀 됐지만 상기도 하고 복습도 할겸 정리해보려고 한다.

 

비동기적이란

• 전 명령이 끝나지 않았음에도 다음 명령어를 실행한다는 것.

• C/C++ ,Java와 같은 절차적 언어 를 주로 사용하던 내가 만났던 엄청 큰 충격적인 개념

• rest api 통신을 위해 request하고 response를 받는 속도가 느려 시간지연이 발생할때 다음 명령어가 실행돼 결과가 먼저 나올수있다.

 

비동기 처리의 대표적 방식

• setTiemOut

  시간 지연 함수.

• callback

  다른 함수의 인자로 사용되거나 이벤트에 의해 호출되어지는 함수.

  어떤 함수의 요청에 처리되어 나온 응답 값을 callback하여 다음 함수에서 사용할 수 있는 것.

• promise

  callback의 문제점을 해결하기 위해 나온 개념.
  callback을 예측 가능한 패턴으로 사용 할수 있도록 도와주어, callbcak내의 프로미스 객체를 사용해 성공, 실패,오류등 다양한 상황에 따른 후속 처리가 가능하다.

• await/async (ES8에 적용. 이번에 사용한 방식)

  async와 await의 가장 큰 장점은 직관적이라는 것.

  동기 함수 앞에는 async를 붙이고 비동기 함수 앞에는 await을 붙인다.

  단 async의 뒤에는 반드시 promise를 반환해야 하며 await은 async 함수 안에서만 사용할 수 있다.

일반적으로 비동기 처리 코드는 콜백을 사용해야 코드의 실행 순서를 보장 받을 수 있다.

 

---

 

비동기 처리 동작 방식

1. Javascript 엔진(Engine)

• Memory Heap

  변수와 객체의 메모리 할당을 담당한다.

• Call Stack

  함수 실행 호출이 쌓이는 곳.
  스택 특징으로 실행된다.(LIFO)

2. Javascript 실행환경(Runtime)

• Web API

  Call stack에 비동기 함수의 호출이 있을 경우 해당함수르 Web API로 이동하여 대기시킨다.

  Call stack에서는 함수의 실행이 끝났다고 인식하여 Call stack에서 제거한다.

  DOM, AJAX, setTimeout 등 브라우저가 제공하는 API

• Callback Queue

  Web으로 이동된 API에서 함수가 실행되고 응답하는 call back함수를 Callback Queue에 전달한다.

• Event Loop

  Callback Queue에 함수가 들어오면 함수를 Call Stack에 push 한다.

  그뒤 Call stack은 해당 함수를 실행 한 뒤 Call Stack에서 제거한다.

요약

1. Call Stack에서 비동기 함수가 호출 => Web API (== 백그라운드)에 해당 함수가 등록

   => Call Stack에서 제거

2. 비동기 이벤트가 동작 => 해당 콜백 함수가 Callback Queue 에 Push
3. Event Loop 가 동작하여 Call Stack으로 Callback Queue에 있는 함수가 Push 된다
4. Call Stack에 들어온 해당 함수가 실행 => Call Stack 에서 제거

 

 

 

 

<출처> - 정말 고마우신 분들!

https://medium.com/@0e/%E1%84%83%E1%85%A9%E1%84%83%E1%85%A2%E1%84%8E%E1%85%A6-promise%E1%84%80%E1%85%A1-%E1%84%86%E1%85%AF%E1%86%AB%E1%84%83%E1%85%A6-b0940365610d

도대체 Javascript는 어떻게 비동기 처리를 할까?

 

https://mber.tistory.com/8

Javascript 동기와 비동기 callback부터 async&await