this, call, apply, bind 이 Concept은 this / call / apply / bind를 순차적으로 다뤄보겠습니다. this 저는 this를 볼 때마다 너무 어려워했습니다. 도대체 이 this가 누굴 가리키는걸까? 코드가 길어지면 길어질수록 this가 누구인지 알아가는 것을 포기하고 감으로 때려 맞춰야 했습니다. 때문에 이번 컨셉에서 this를 처음보는 사람도 이해할 수 있게 확실하게 정리하려고 합니다. this는 어려워보이지만 사실은 이것만 알고 있으면 됩니다! 누가 호출했나요? 호출을 누가했는지 잘 봐야합니다. 이것만 볼 줄 알면 this는 정말 간단하게 느껴질 것 입니다. this는 크게 4가지 경우로 사용되는데 4가지 경우를 전부 다뤄보겠습니다. 일반 함수 실행 방식 fun..

팩토리와 클래스 이번 Concept은 자바스크립트를 사용하면 누구나 한 번씩은 사용해본 경험이 있는 팩토리와 클래스에 대해 다뤄보겠습니다. :) Factory Function은 무엇일까요? 말 그대로 객체를 만들어내는 공장 같은 느낌인데요 객체를 여러 개 만들어 내야 한다고 가정해봅시다. 여기에 원이라는 객체를 만들어 보겠습니다. const circle = { radius: 1, location: { x: 1, y: 1 }, isVisible: true, draw: function() { console.log('draw'); } } 이렇게 circle이라는 객체를 하나 만들어 냈습니다. circle을 하나 더 만들어 볼까요? const circle2 = { radius: 2, location: { x: ..

DOM과 Layout Trees 이번 Concept은 DOM에 관한 이야기를 해보겠습니다. 자바스크립트를 배우다보면 자주 보이는 것이 DOM이란 친구입니다. 그에 관한 문서를 여러 개 읽어봤지만 DOM이 HTML과 비슷하단 느낌을 받았습니다. 이 둘은 서로 비슷하지만 같지 않습니다. DOM은 Document Object Model의 줄임말로 HTML / XML 문서의 프로그래밍 인터페이스입니다. 이게 무슨 말이냐.. 우리가 HTML을 만들게 되면 자기가 원하는대로 웹의 뼈대를 만들 수 있습니다. 그러나 HTML을 가지고 프로그래밍을 할 수 있을까요? 가능은 할지 몰라도 한정되어 있습니다. 따라서 HTML을 스크립트 언어 또는 프로그래밍 언어(자바스크립트)를 사용하기 위해서는 DOM이라는 친구가 필요합니다..

비트 연산자, 형식화 배열, 버퍼(배열) 이 Concept은 비트 연산자에 대해 다루고 있습니다. 비트 연산자는 무엇인가요? 비트 연산자는 변수가 bit level과 상호작용할 수 있는 유일한 방법입니다. 비트는 0과 1로 이루어져 있어 하드웨어가 이해할 수 있는 근접한 표현입니다. 우리가 컴퓨터에서 사용하는 문자열이나 숫자 등이 사실은 01010100110110 이런 표현 방식으로 컴파일 되어 컴퓨터가 이해하게 되는 것 입니다. 1 (integer) = 0001 (binary) 2 = 0010 3 = 0011 4 = 0100 5 = 0101 6 = 0110 7 = 0111 8 = 1000 비트 연산자는 일반 논리 연산자와 비교할 수 있습니다. 3 & 6 vs 3 && 6 위의 두 코드는 어떤 차이가 있..

자바스크립트 엔진 이번 Concept은 자바스크립트 엔진을 다룹니다. 역사에 관한 이야기가 많을 듯 ㅠㅠ 자바스크립트 엔진은 도대체 무엇이며 무슨 역할을 하는 것 일까요? 대표적인 자바스크립트 엔진 중 하나인 V8은 크롬 그리고 엣지에서 사용되고 있습니다. 'V8'은 자바스크립트 코드를 기계와 더 가까운 low-level(기계어) 코드로 바꿔주는 역할을 합니다. 또한 이러한 엔진은 현재 ECMAScript라는 표준을 사용하고 있습니다. 'V8'은 다음과 같은 특징을 가집니다 V8 엔진은 C ++로 작성되었으며 Chrome 및 Nodejs에서 사용됩니다. ECMAScript 표준을 따릅니다. V8 엔진은 독립으로 실행할 수 있으며 자체 C ++ 프로그램에 임베드 할 수 있습니다. 또한 C++에서 자체 함수..

setTimeout, setInterval, requestAnimationFrame 이번 Concept에서는 setTimeout & setInterval & requestAnimationFrame에 대해 다뤄보겠습니다 :) setTimeout 먼저 setTimeout은 저번 Concept에서도 다뤘다시피 단순한 함수가 아닌 Web API입니다. setTimeout은 두 개의 인자를 가지며 첫 번째는 콜백함수 두 번째는 시간을 가집니다. 콜백함수는 바로 실행되지 않으며 메시지 큐로 옮겨진 후 콜스택이 비워진 후에 실행될 것 입니다. 중요한 것은 setTimeout이 가지는 두 번째 파라미터는 지정된 시간 후에 실행되는 것이 아닌 메시지 큐에 쌓이게 되는 최소 시간을 의미합니다. 이 말은 즉슨 5000으로 ..