전체 글
-
[JavaScript] 6. 프로토타입(prototype)개발자 이야기/JavaScript 2021. 7. 22. 10:31
자바스크립트는 프로토타입 기반 언어다. 클래스 기반 언어에서는 '상속'을 사용하는 반면, 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 프로토타입 개념 constructor(생성자 함수), prototype, instance 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다. 이때 인스턴스에는 __proto__라는 프로퍼티(instance.__proto__)가 자동으로 부여된다. 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티(Constructor.prototype)를 참조한다. prot..
-
[JavaScript] new 연산자개발자 이야기/JavaScript 2021. 7. 19. 11:18
[MDN] 사용자 정의 객체 타입 또는 객체 타입의 *인스턴스를 생성한다. *인스턴스란? [네이버 지식백과] 같은 클래스에 속하는 개개의 객체로, 하나의 클래스에서 생성된 객체를 말한다. 즉, 클래스가 구체화되어, 클래스에서 정의된 속성과 성질을 가진 실제적인 객체로 표현된 것을 의미한다. 이때 추상적인 개념인 클래스를 실제 객체를 생성하는 것을 인스턴스화라고 한다. // 객체 타입 생성 (1) function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } // new를 호출해서 언제든지 Car 객체의 인스턴스를 생성할 수 있다. (2) const car1 = new Car('Eagle', 'Talon ..
-
[JavaScript] 4. 콜백 함수개발자 이야기/JavaScript 2021. 7. 15. 20:16
콜백 함수(callback function) 다른 코드의 인자로 넘겨주는 함수 다른 코드(함수 or 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행하게 된다. 제어권 호출 시점 setInterval의 구조 let intervalId = scope.setInterval(func, delay[, param1, param2, ...]); scope에는 setInterval 메서드를 제공하는 Window 객체 또는 Worker의 인스턴스가 들어올 수 있다. 브라우저 환경에서는 Window를 생략할 수 있다. 매개변수로는 func(함수), delay(ms) 값을 반드시 전달해야 한다. 세 번째 매개변수부터는 ..
-
[JavaScript] 3. this개발자 이야기/JavaScript 2021. 7. 13. 23:36
this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'다. this에는 호출한 주체에 대한 정보가 담긴다. *바인딩(binding)이란 식별자와 값을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수명(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다. 자바스크립트에서 this는 실행 컨텍스트가 생성(호이스팅, 스코프 체인 정보 수집, this 바인딩한다)될 때 결정된다. 일반적으로 함수를 호출할 때 실행 컨텍스트가 생성되기 때문에, this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 this의 값이 달라지는 것이다. 즉, this는 '함수가 호..
-
[JavaScript] 함수 선언식 vs 함수 표현식개발자 이야기/JavaScript 2021. 7. 10. 16:43
함수 선언문과 함수 표현식은 모두 함수를 새롭게 정의할 때 쓰이는 방식이다. 함수 선언식(Function Declarations)이란? 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다. 변수 선언이 let이나 const로 시작해야하는 것처럼 함수 선언을 function으로 시작한다. 선언된 함수는 나중 사용을 위해 저장되며, 함수를 실행하려면 함수 이름을 호출(call)하면 된다. function 함수명() { 구현 로직 } // 함수 선언 function sayHi() { // 함수명 sayHi가 곧 변수명이다. alert("Hello"); } // 함수 실행 sayHi(); 함수 표현식(Function Expressions)이란? 함수 표현식은 정의한 function을 별도의 변수에 할당하..
-
[JavaScript] 2. 실행 컨텍스트개발자 이야기/JavaScript 2021. 7. 10. 16:04
실행 컨텍스트란? 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트 엔진이 사용할 목적으로 생성한다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 호이스팅하고, 외부 환경 정보를 구성하고, this 값을 설정한다. 하나의 실행 컨텍스트를 구성할 수 있는 방법 : 전역공간, eval() 함수, 함수 등(ES6에서는 블록{}에 의해서도 실행 컨텍스트가 생성된다.) 자동으로 생성되는 전역공간과 eval 함수를 제외하면 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐이다. 실행 컨텍스트의 코드 실행 과정 // (1) var a = 1; function outer() { function inner() { console.log(a); // undef..
-
[JavaScript] 1. 데이터 타입개발자 이야기/JavaScript 2021. 7. 9. 00:14
1. 데이터 타입의 종류 기본형(Primitive type) vs 참조형(Reference type) 기본형 문자열, 숫자, boolean, null, undefined + (ES6에서 추가된) Symbol 기본형은 불변성(immutability)을 가진다. 참조형 객체와 객체의 하위 분류에 속하는 배열, 함수, 날짜, 정규표현식 + (ES6에서 추가된) Map, WeakMap, Set, WeakSet 등 기본형과 참조형을 구분하는 기준은 복제하는 대상이다. 기본형은 값이 담긴 주솟값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이다. 2. 변수 선언과 데이터 할당 변수 : 변할 수 있는 데이터, 변경 가능한 데이터가 담길 수 있는 공간 or 그릇 식..
-
렌더링 최적화 방법 - 렌더링 업데이트 최적화카테고리 없음 2021. 6. 28. 19:08
이전 포스트에 이어 오늘은 렌더링 최적화 중 렌더링 업데이트 최적화, 즉 화면이 수정될 때의 렌더링 과정을 최적화하는 방법에 대해서 정리해 보았다. 크게 reflow와 repaint 두 개로 나뉜다. Repaint Repaint는 화면에 변화가 있을 때 화면을 그리는 과정이다. 화면 구조가 변경되었을 때는 Reflow 과정을 거쳐 화면 구조를 다시 계산한 후 Repaint 과정을 통해 화면을 다시 그린다. 즉, 화면 구조의 변경이 없는 화면의 변화만 발생한다면 Repaint 과정만 거치게 된다. 대표적으로 opacity, background-color, visibility, outline 등의 스타일 속성 사용 시에는 Repaint만 동작한다. Repaint 최적화 방법으로는 화면 변화를 최소화하는 방법..