자바스크립트 엔진은 간단히 말해선 자바스크립트 코드를 실행하는 컴퓨터 프로그램이다. 이 엔진이 사람이 읽을 수 있는 자바스크립트 코드를 컴퓨터 하드웨어가 실행할 수 있는 기계가 읽을 수 있는 명령어로 변환하는 역할을 담당한다.  우리가 자바스크립트 코드를 작성하고 브라우저에서 실행을 시킨다고 코드가 바로 우리의 컴퓨터가 실행하는 것은 아니다. 대신, 자바스크립트 엔진이 코드와 기기 사이의 중개자 역할을 하면서 상호작용을 한다.  모든 브라우저는 자신의 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: "열심인간", ..

GitHub Action에 대해서는 앞서 어떤 요소들이 있는지 알아봤다. 최종적으로 나 역시 CI / CD를 구축하는 것을 목표로 GitHub Action을 사용하려고 한다.  CI의 베이스가 되는 브랜치 전략으로 Git Flow를 사용하려고 한다. GitHub Flow 등도 있을 텐데 최초 브랜치 전략을 공부할 때 Git Flow를 알아봤었고 아직까지 많이 사용되는 전략이라서 굳이 다른 방향을 알아보진 않았다.  어떤 방향으로 GitHub Action을 사용할 것인가!  이게 중요할 것 같은데, Git Flow를 이야기하는 이유는 브랜치의 속성에 따라 Action을 설정해줄 생각이다. 내가 사용할 브랜치로Main : 프로젝트 | 서비스의 메인 브랜치로 정식 배포가 된 환경의 브랜치다. Develop :..