개발자 이야기
-
[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. 10:49
프론트엔드 성능 최적화 = 로딩 최적화 + 렌더링 최적화 성능 최적화를 통해 빠른 로딩 속도가 구현된다면 사용성 개선과 더불어 사업지표 향상에도 도움된다. 이번 포스트에서는 로딩 최적화와 렌더링 최적화 중에서도 렌더링 최적화를 소개하려 한다. 렌더링 최적화는 크게 초기 렌더링 최적화와 렌더링 업데이트 최적화로 나뉘는데, 이 중 '초기 렌더링 최적화'에 대해서 정리해 보았다. 초기 렌더링 최적화 방법 Critical Rendering Path 최적화 Critical Rendering Path(중요 렌더링 경로, CRP) 브라우저가 페이지의 초기 출력을 위해 실행해야 하는 순서(브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계)로, 이를 최적화하는 것은 렌더링 성능을 향상..