자바스크립트 동작 원리에 대해 알아보자

 

 안녕하세요. 진득 코딩입니다.

 

 이번 시간에는 API를 이해하기 위한 필수 개념인 자바스크립트의 동작 원리에 대해 살펴보도록 하겠습니다.

 

 

 

 

 위와 같은 코드가 있으면 어떤 결과가 나올지 예상하는 것은 쉽습니다.

 

 

 예상한 대로 1, 2, 3이 순서대로 출력된 것을 확인할 수 있습니다.

 

 이처럼 자바스크립트 코드는 위에서부터 아래로 차례대로 실행됩니다.

 

 이를 동기적 프로그래밍이라고 합니다.

 

 

 자바스크립트 엔진은 Memory Heap 영역과 Call Stack 영역으로 나뉩니다.

 

 Memory Heap 영역은 변수와 같은 메모리들을 두서없이 저장해 놓는 메모리 공간입니다.

 

 Call Stack은 실행하는 역할을 담당합니다.

 

 stack은 자료형 중 한 종류로 LIFO(Last In First Out)의 성질을 가지고 있습니다.

 

 따라서 console.log(1)이 호출되면 Call Stack에 쌓이고 바로 실행이 되어 1이 출력되게 됩니다.

 

 다음으로 console.log(2)이 호출되면  Call Stack에 쌓이고 바로 실행이 되어 2가 출력되게 됩니다.

 

 마지막으로 cosole.log(3)이 호출되면 Call Stack에 쌓이고 바로 실행되어 3이 출력됩니다.

 

 위 예제는 너무 간단한 예제이기 때문에 조금 더 복잡한 예제를 살펴보도록 하겠습니다.

 

 

 처음 본 예제와 달리 함수가 생기게 되었습니다.

 

 예제2에서는 console.log(1)이 실행되고 test() 함수가 호출되어 console.log(2)와 console.log(3)가 실행되게 됩니다.

 

 

 예제2의 원리를 살펴보도록 하겠습니다.

 

 먼저 console.log(1)은 Call Stack에 호출되어 들어갔다가 바로 실행되면서 빠져나오게 됩니다.

 

 Function은 인지만 하고 따로 실행되지 않고 지나가게 됩니다.

 

 test()를 만나게 되면 비로소 test() 함수를 실행하게 되는데 이때 test() 함수는 Call Stack에 쌓인 상태가 됩니다.

 

 이 위에 console.log(2)가 Call Stack에 들어갔다가 빠져나오게 되고 console.log(3)도 Call Stack에 들어갔다가 빠져나오게 됩니다.

 

 그 이후에 비로소 test() 함수가 Call Stack을 빠져나오게 됩니다.

 

 

 다음 예제를 살펴보도록 하겠습니다.

 

 예제3에서는 console.log(2)를 setTimeout() 함수를 이용하여 5초 지연시킨 뒤 출력해 보도록 하겠습니다.

 

 

 위와 같이 console.log(2)를 5초 지연시키게 되면 예제 1, 2와 달리 1, 3, 2가 출력되게 됩니다.

 

 

 예제3을 자바스크립트 엔진의 기준으로 살펴보도록 하겠습니다.

 

 console.log(1)이 실행되고 나서 setTimeout(() => console.log(2), 5000);가 호출됩니다.

 

setTimeout(() => console.log(2), 5000);는 5초 지연되기 때문에 해당 코드를 Web API로 보내게 됩니다.

 

 이 상태에서 Call Stack이 비었기 때문에 console.log(3)이 호출되어 바로 실행이 됩니다.

 

 

setTimeout(() => console.log(2), 5000);는 5초동안 Web API에서 머무르다가 5초가 지나게 되면 console.log(2)로 바뀌어 Task Queue로 넘어가게 됩니다.

 

 이 상태에서 Call Stack이 비어있는 것을 확인하게 되면 Task Queue에 있는 console.log(2)가 Call Stack으로 넘어가게 됩니다.

 

 Call Stack은 바로 console.log(2)를 실행하게 되어 2가 출력되게 됩니다.

 

 

 다음으로 NewsAPI를 통해 데이터를 가져오는 함수를 살펴보도록 하겠습니다.

 

 getLatestNews 함수는 url을 통해 request 하고 한 번 출력하고 response 하고 한 번 console 출력하는 함수입니다.

 

 해당 함수를 부른 후 for문을 실행하는 예제입니다.

 

 

 위에서 작성한 코드 순서대로 출력된 것을 확인할 수 있습니다.

 

 이때 response 코드의 출력에서 객체에 <pending>이라는 것을 볼 수 있습니다.

 

 이는 기다리라는 뜻으로 fetch() 함수의 영향을 받은 것을 확인할 수 있습니다.

 

 

 예제4를 살펴보면 처음에 url 세팅하는 부분이 Call Stack에 들어왔다가 바로 실행이 됩니다.

 

 이후 fetch(url)이 Call Stack에 들어가게 되면 Web API로 넘어가게 됩니다.

 

 이렇게 Web API로 fetch(url)이 넘어간 상태에서는 Data 보여주기를 할 수가 없습니다.

 

 

 그래서 사용하는 것이 async와 await입니다.

 

 위와 같이 함수와 fetch에 async와 await를 작성한 후에 코드를 실행해 보도록 하겠습니다.

 

 

 예제4와 다르게 response가 마지막에 실행된 것을 확인할 수 있습니다.

 

 또한 response가 더 이상 panding이 아니라 데이터를 받은 것을 확인할 수 있습니다.

 

 

 async와 await가 추가된 코드의 원리를 살펴보도록 합니다.

 

 처음에 getNews() 함수가 호출되어 CallStack에 들어가게 됩니다.

 

 getNews() 함수가 Call Stack에 있는 상태로 url 세팅이 바로 실행되게 됩니다.

 

 다음으로 fetch()가 실행되면 Web API로 보내게 됩니다.

 

 이때 await를 만나면 async() 함수 자체가 일시정지가 되게 됩니다.

 

 그러면 getNews() 함수가 Task Queue로 들어가게 되어 일시정지가 됩니다.

 

 이렇게 비어있는 Call Stack에 for문이 먼저 실행이 됩니다.

 

 이렇게 Call Stack이 비어있게 되면 getNews() 함수가 다시 Call Stack에 호출되어 fetch()에서 받아온 데이터를 활용하여 getNews() 함수가 실행되게 됩니다.

 

---

 

 이번 시간에는 동기적으로 실행되는 자바스크립트의 원리와 이로 인해 생기는 문제들을 Web API와 async, await를 이용해서 해결할 수 있다는 것을 알아보았습니다.

 

 이러한 구조를 알고 코드를 작성하면 더욱 질 좋은 코드를 작성할 수 있다고 기대합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글에 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다. 😊