자바스크립트 엔진을 공부하면서 Callback Queue와 Task Queue에 대해 알아본 적이 있다. 그때는 전체적인 플로우를 이해하기 위해 간단히 정리했지만, 이번에는 Callback Queue와 Task Queue의 차이점과 역할에 좀 더 집중해서 정리해보려고 한다.  처음 설명할 때는 Callback Queue와 Task Queue를 별개로 다뤘지만, 실제로는 모두 Task Queue의 일부분이다. 그리고 Task Queue는 단일 큐가 아니라, 여러 종류로 나뉘어 있다.  자바스크립트 엔진에서 Callback Queue는 Micro Task Queue라고 불리며, Promise의 .then()이나 MutationObserver 같은 비동기 작업이 담기는 큐이다.  반면, Task Queue는 ..

자바스크립트 엔진은 간단히 말해선 자바스크립트 코드를 실행하는 컴퓨터 프로그램이다. 이 엔진이 사람이 읽을 수 있는 자바스크립트 코드를 컴퓨터 하드웨어가 실행할 수 있는 기계가 읽을 수 있는 명령어로 변환하는 역할을 담당한다.  우리가 자바스크립트 코드를 작성하고 브라우저에서 실행을 시킨다고 코드가 바로 우리의 컴퓨터가 실행하는 것은 아니다. 대신, 자바스크립트 엔진이 코드와 기기 사이의 중개자 역할을 하면서 상호작용을 한다.  모든 브라우저는 자신의 JS Engine을 가지고 있다. 하지만 가장 잘 알려진 것은 구글의 v8 엔진이다. v8엔진은 크롬과 서버측 어플리케이션을 빌드하는 데 사용되는 Node.js를 구동한다.  이번 글에서는 자바스크립트 엔진의 정의와 내부 동작 방식을 알아보려고 한다.  자..

Scope Chain ( 스코프 체인 ) 현재 실행되고 있는 위치에 필요한 값이 있는지 확인하고 없다면 상위 스코프를 찾아 올라가는 과정을 스코프 체인이라고 한다. function aaa(){ banana = 3 console.log(banana)}aaa();위 코드가 브라우저상에서 어떻게 실행될까? 자세하게 알아보기 위해서는 개발자 도구의 source를 통해서 확인이 가능하다. 먼저 실행해야 하는 곳에 브레이크 포인트 ( 11번 라인 )를 걸어둔다. 브레이크 포인트는 코드가 빠르게 실행되다가 멈추고 싶은 코드에서 멈추게 할 수 있는 기능이다.  1번 버튼은 실행하지 않고 뛰어넘는 것이고, 2번 버튼은 실행 과정을 하나하나 살펴볼 수 있다.  aaa 함수에 브레이크 포인트를 걸어두고 함수 안으..

특정 함수를 반복해서 호출하는 경우 어떤 방법을 많이 사용할까? 다른 사람은 어떨지 모르겠지만 본인은 setInterval을 많이 사용해서 구현한다.  하지만 애니메이션을 구현할 때 setInterval을 사용한다면 성능을 저하하는 문제가 발생할 수 있다. 그때 대신 사용하는 것이 Request Animation Frame이다.  어떤 문제가 발생하는 것일까? 웹사이트의 화면은 여러 프레임으로 보여진다. 홈페이지를 스크롤 했을 때 16.7ms 마다 새로운 프레임이 생성되는 것을 볼 수 있다. 브라우저는 1초에 60프레임 지원하기 때문에 16.7ms 이 단순 계산으로도 맞다.  즉, 브라우저에 애니메이션이 매끄럽게 보여지기 위해서는 16.7ms 안에 1frame 화면에 그려져야 한다는 것이다. 그렇지 않으..

Transition자바스크립트의 클릭 이벤트를 사용해서 클릭한 위치를 확인할 수 있다. window.addEventListener("click", function (e) { console.log(e.clientX, e.clientY);}); 클릭한 위치에 동그란 오브젝트를 이동시키는 애니메이션을 만들려면 어떻게 해야할까? 우선 동그란 오브젝트를 먼저 만들어주자면 다음과 같이 만들 수 있다.  너비와 높이가 30px인 붉은 공이다. 그리고 애니메이션이 발생했을 때 진행되는 속도는 1초로 설정해두었다. const ballElem = document.querySelector(".ball");window.addEventListener("click", function (e) { ball..

홈페이지를 만들 때 스크롤에 따른 이벤트는 아주 많이 사용된다.지금까진 제대로 컨트롤하는 방법을 몰라서 라이브러리 등을 사용해서 만들었는데, 요즘 트렌드에는 스크롤 이벤트가 워낙 많이 들어가서 직접 사용하는 방법에 대해서 알아보려고 한다.  특정 라이브러리가 아닌 순수 자바스크립트의 기능을 사용해서 구현해보려고 한다.  속성이벤트를 구현하기 전에 사용할 수 있는 속성이 어떤 것들이 있는지 알아보자. (function () { const outputEle = document.querySelector(".output"); window.addEventListener("scroll", function (e) { outputEle.innerHTML = window.innerHeight; });})();..

배열이나 객체를 사용할 때 특정 배열을 복사하거나 새롭게 만들기 위해서 복사를 하는 경우가 있다. 이때 경우에 따라 예상치 못한 작업이 발생하는데, 이것이 얕은 복사로 인한 문제들이다.  얕은 복사주소값까지만 복사를 해주는 것이 얕은 복사이다. const object = { name: "잉여", age: "28",};const newObject = { ...object };console.log(newObject);객체를 복사할 때 많이 사용하는 방식이 spread 연산자를 활용하는 방식이다. 이렇게 하면 object의 주소값만 복사하는 것이 아닌 내부값을 새롭게 복사하기 때문에 newObject의 name이 변경되더라도 object의 name은 변화가 없다.  이렇게보면 이 행위 자체가 얕은 복사가 ..

자바스크립트에서 숫자, 문자, 참/거짓 등 기본 데이터 타입을 제외한 모든 타입은 Object, 객체 타입이다.  const person1 = { name: "잉여인간", age: 28, introduce: function () { console.log("안녕! 나는 잉여인간이야. 나이는 28이고!"); },};이런 형식으로 중괄호를 사용해서 만들 수 있다. 여기서 두 번째 사람을 만들고 싶다면 아래와 같이 만들 수 있다. const person1 = { name: "잉여인간", age: 28, introduce: function () { console.log("안녕! 나는 잉여인간이야. 나이는 28이고!"); },};const person2 = { name: "열심인간", ..