Web API4 [JavaScript] 자바스크립트 콜백 지옥(동기, 비동기) 1. 동기와 비동기javascript를 사용하면서 데이터를 처리할 때 사용하는 방식인 동기와 비동기 처리에 대해 설명해볼려고 한다 비동기 함수를 사용해 본 적은 있지만 이것의 개념을 정확하게 알지 못하고 넘어간 거 같아 이번 기회에 한 번 동기와 비동기의 차이점과 비동기 함수의 콜백함수 개념을 간단한 예제를 통해 설명하겠습니다.동기(Synchronous)동기는 반드시 작성된 순서대로 실행된다 먼저 불러온 순서대로 차례대로 나오는 방식입니다 이전의 함수가 무조건 끝나야 다음이 실행됩니다비동기(Asynchronous)자바스크립트는 싱글스레드이기 때문에 한 번에 하나의 작업만 수행할 수 있습니다 이를 해결하기 위해 비동기 처리가 생겼습니다 비동기는 작성된 순서대로 실행하지 않고 내가 원하는 함수를 먼저 호출하.. 2023. 3. 10. [JavaScript] 자바스크립트 비동기에 대해서 이해하기 자바스크립트는 싱글쓰레드기반의 언어인데 어떻게 비동기로 동작을 할까?먼저 아래 영상을 보면 이해가 쉬울 것이다.https://youtu.be/8aGhZQkoFbQ[ 한국어 자막 ON. ]사실 자바스크립트가 비동기로 동작하는 이유는 브라우저에 있다.브라우저는 Web API, Callback Queue, Event Loop 등으로 구성되어있고 자바스크립트 코드가 실행될 때 브라우저와의 동작은 아래 그림으로 표현할 수 있다.자바스크립트 엔진의 구성요소브라우저의 자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어있다.자바스크립트는 싱글쓰레드기반의 언어기 때문에 한 번에 하나의 일만 처리할 수 있다. 즉, 선입후출(LIFO, Last In First Out)방식이다.Runtime Envir.. 2023. 3. 10. [JavaScript] 자바스크립트 이벤트 루프(Event Loop) JS 엔진자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있다.- 가장 유명한 것이 구글의 v8이다.자바스크립트는 단일 스레드(single thread) 프로그래밍 언어.- 이것은 콜스택이 하나라는 의미- 멀티가 되지않고, 하나씩 처리한다는 의미메모리힙- 메모리할당이 일어나는 곳 => 우리가 선언한 변수, 함수 등이 담겨져있다.콜스택- 코스가 실행될때 쌓이는 곳. stack 형태로 쌓인다.- stack이란? 자료구조 중 하나. 선입후출의 룰을 따른다.Web API그림에서 봤을때 JS엔진 바깥에 그려져있다.- 즉, JS엔진이 아니다는 뜻.웹 api는 브라우저에서 제공하는 api로 timeout과 ajax, DOM이 있다.콜스택에서 실행된 비동기함수는 web api에서 호출하고, web api에서는 Cal.. 2023. 3. 10. [JavaScript] 자바스크립트 이벤트 루프(Event Loop) 이벤트 루프는 자바스크립트 개발자라면 어떤 방식으로든 다루게 되지만, 처음 이해하기엔 다소 난해할 수 있습니다. 저는 gif를 사용해서 이 개념을 시각적으로 설명해보고자 합니다.하지만 먼저, 이벤트 루프는 무엇이며, 왜 신경 써야 할까요?자바스크립트는 싱글 스레드로, 한 번에 한 가지 일만 할 수 있습니다. 이것은 일반적으로 큰 문제 없지만, 30초가 걸리는 일을 수행한다고 상상해보세요..우리는 그 일을 처리하는 30초 동안 아무것도 할 수 없습니다. (자바스크립트는 기본적으로 브라우저의 메인 스레드로 동작하기에, UI가 멈추게 됩니다.)다행히, 브라우저는 자바스크립트 엔진 자체가 제공하지 않는 웹 API 기능을 제공합니다. 이 API는 DOM API, setTimeout, HTTP requests 등이.. 2023. 3. 10. 이전 1 다음 728x90 반응형
