개발/프론트엔드

자바스크립트의 클래스자바스크립트는 프로토타입 기반 언어이므로 클래스의 개념이 존재하지 않는다. 그러나 프로토타입은 클래스와 비슷하게 해석할 수 있는 요소들이 있다.생성자 함수 Array를 new 연산자와 함께 호출하면 인스턴스가 생성된다. 이때 Array를 일종의 클래스라고 하면, Array의 prototype 객체 내부 요소들이 인스턴스에 상속된다고 볼 수 있다. (엄밀히 말하면 상속이 아닌 프로토타입 체이닝에 의한 참조이지만 결과적으로는 동일하게 동작한다.)또한 자바스크립트에서는 클래스 기반 언어와 달리 인스턴스에 직접 메서드를 정의할 수 있다. 이렇게 직접 정의한 메서드를 '프로토타입 메서드'라고 부른다. var Rectangle = function (width, height) { // 생성자 t..

자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 프로토타입의 개념 이해먼저, 아래 프로토타입 도식을 통해 개념을 이해해보자.어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다.이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데,이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다.prototype은 객체이며, 이를 참조하는 __proto__ 역시 객체이다. 즉, 인스턴스에서도 ..

클로저의 의미 및 원리 이해클로저는 자바스크립트 고유의 개념이 아니기 때문에 ECMAScript 명세에는 클로저의 정의를 다루지 않고 있다.MDN에서는 클로저에 대해 "주변 상태(어휘적 환경)에 대해 참조와 함께 묶인(포함된) 함수의 조합" 이라고 소개하고 있다. 이는 즉 "어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상"이라고 볼 수 있다. 먼저, 외부 함수의 변수를 참조하는 내부 함수부터 살펴보자.var outer = function() { var a = 1; var inner = function() { return ++a; } return inner();};var outer2 = outer();console.log(outer2); // 2outer함수에서 ..

콜백함수란?콜백 함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수는 제어권과 관련이 깊다.즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 제어권var count = 0;var cbFunc = function () { console.log(count); if(++count > 4) clearInterval(timer);}var timer = setInterval(cbFunc, 300);위 코드를 실행하면 콘솔창에는 0.3초에 한 번씩 count가 0부터 1씩 증가하며 출력되다가 4가 출력된 이후 종료된다.마지막 줄 setInterval 은 첫 번째 인자로서 cbFunc 함수를 넘겨주자 제어권을 넘겨받은 setInterval이 스스로의 ..

자바스크립트에서의 this는 클래스 뿐만아니라 어디서든 사용할 수 있다. 상황에 따라 this가 바라보는 대상은 달라지기 때문에 정확한 작동 방식을 이해하지 못하면 원인을 파악해서 해결할 수 없다. 상황에 따라 달라지는 this자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 떼 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로 this는 함수를 호출할 때 결정된다고 할 수 있다. 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가진다. 브라우저 환경에서 전역객체는 window, Node.js 환경에서는 global이다. 전역 공간에서만 발생하는 특이한 성질전역변수를 설정하면 자바스크립트 엔진은 ..

실행 컨텍스트란?실행 컨텍스트(excution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행한다. 실행 컨텍스트를 살펴보기 전에 스택(stack)과 큐(queue)의 개념을 알아야 한다. 스택(Stack)스택은 출입구가 하나뿐인 데이터 구조다. 비어 있는 스택에 순서대로 데이터 a, b, c, d를 저장했다면, 꺼낼 때는 반대로 d, c, b, a의 순서로 꺼낼 수 밖에 없다.  큐(Queue)큐는 양쪽이 모두 열려있는 파이프를 떠올리면 된다. 종류에 따라 양쪽 모두 입력과 출력이 가능한 큐도 있으나 보통은 한쪽은 ..

데이터 타입의 종류데이터 타입에는 기본형과 참조형이 있다. 기본형은 값이 담긴 주솟값을 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점에서 차이가 있다. 또한, 기본형은 불변성(immutability)을 띈다는 점을 기억해두자.기본형(primitive type)숫자(number)문자열(string)불리언(boolean)nullundefined(ES6에서 추가된) 심볼(Symbol)참조형(reference type)함수(Function)날짜(Date)정규표현식(RegExp)(ES6에서 추가된) Map, WeakMap, Set, WeakSet데이터 타입에 관한 배경지식식별자와 변수의 개념변수는 '변할 수 있는 무언가'로 여기서 '무언가'란 데이터를 말한다.식별자는..

사건의 발단이번에 진행한 사이드 프로젝트 '그돈이면'의 홈 화면에는 gif애니메이션이 들어가있다. 나는 당연히 Next에 내장된 Image 컴포넌트를 사용했고 별 다른 문제 없이 적용되었다 생각하며 넘어갔다.주변 지인에게 프로젝트를 소개하면서 홈 화면에 이미지가 늦게 뜬다는 피드백을 받았는데 확인해보니 gif에 Image 컴포넌트를 사용했음에도 불구하고 WebP 포맷으로 변환되어 있지 않았다.게다가 용량도 7.7MB라니... 굉장히 큰 사이즈의 이미지를 가져오고 있었다. _log.warnOnce(`The requested resource "${href}" is an animated image so it will not be optimized. Consider adding the "unoptimized" ..