띵동

리덕스를 사용해 전역으로 값을 관리하며 최적화를 진행했다. 1. reselect 라이브러리를 사용하여 selector로 관리하는 값 memoization 2. react-redux에서 제공하는 shallowEuqal 함수를 사용해 렌더링 최소화 shallowEqual 함수는 객체의 가장 겉에 값들을 모두 비교하는데, const object = { a: { x: 3, y: 2, z: 1 }, b: 1, c: [{ id: 1 }] } 위 객체가 있다면 object.a, object.b, object.c만 비교하고 object.a.x 처럼 한뎁스 더 들어가는 값들은 비교하지 않는다. shallowEqual 말고 useSelector로 가져온 값을 객체 형식이 아닌 독립적으로 선언해줘도 된다. // shallo..

this 키워드 객체는 프로퍼티와 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조 메서드는 자신이 속한 객체의 상태 (프로퍼티)를 참조하고 변경할 수 있어야 함 ⇒ 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 함 객체 리터럴 방식으로 생성한 객체의 경우, 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조 가능 객체 리터럴은 circle 변수에 할당되기 직전에 평가되므로, getDiameter 메서드가 호출되는 시점에는 이미 객체 리터럴의 평가가 완료되어 객체가 생성됨 → circle 식별자에 생성된 객체가 할당된 이후이기 때문에 메서드 내부에서 circle 식별자 참조 가능 자신이 속한 객체를 재귀적으로 참조하는 방식..

자바스크립트 객체의 분류 자바스크립트 객체 표준 빌트인 객체 ECMAScript 사양에 정의된 객체 별도의 선언 없이 전역 변수처럼 언제나 참조 가능 호스트 객체 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경 (브라우저 환경 또는 Node.js 환경)에서 추가로 제공하는 객체 브라우저 환경에서는 클라이언트 사이드 Web API를 호스트 객체로 제공 (DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker) Node.js 환경에서는 Node.js 고유의 API를 호스트 객체로 제공 사용자 정의 객체 사용자가 직접 정의한 객체 표준 빌트인 객체 O..

strict mode란? 만약 함수 내에서 선언하지 않은 변수에 값을 할당할 경우, 변수를 찾아야 할당할 수 있기때문에 자바스크립트 엔진은 스코프 체인을 통해 변수를 검색함 → 해당 함수의 스코프에서 변수 찾기를 실패하면 그 함수 컨텍스트의 상위 스코프에서 변수를 검색함 → 전역 스코프에서도 변수가 없다면 ReferenceError를 발생시키는 것이 아닌 암묵적으로 전역 객체에 변수를 동적 생성함 ⇒ 암묵적 전역 개발자의 의도와 상관없이 발생한 암묵적 전역은 오류 발생 가능성을 높임 ⇒ var, let, const 키워드를 사용하여 변수를 선언 후 사용해야 함 strict mode : 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나, 자바스크립트 엔진의 최적화 작업에 문..

객체지향 프로그래밍 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어 원시 타입 값을 제외한 나머지 값들 (함수, 배열, 정규 표현식 등) 모두 객체 객체지향 프로그래밍 : 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립된 단위인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 추상화 : 다양한 속성 중 필요한 속성만 가추려 내어 표현하는 것 객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조 (상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조) 상태 데이터 : 객체의 상태를 나타내는 것 ⇒ 프로퍼티 (property) 동작 : 객체의 상태 데이터를 조작할 수 있는 것 ⇒ 메서드 (met..

일급 객체 일급 객체 특징 무명의 리터럴로 생성 가능 (즉, 런타임에 생성 가능) 변수나 자료구조 (객체, 배열 등)에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미 ⇒ 함수는 값을 사용할 수 있는 곳이라면 어디서든지 리터럴로 정의 가능하며 런타임에 함수 객체로 평가 함수와 일반 객체의 다른 점 : 함수는 호출 가능하지만 일반 객체는 호출 X, 함수는 일반 객체에 없는 함수 고유의 프로퍼티 소유 함수 객체의 프로퍼티 console.dir 메서드 사용하면 함수 객체의 내부 확인 가능 function square(number) { return number * number; } console.dir(square); ..

Object 생성자 함수 객체는 객체 리터럴 이외에도 다양한 방법으로 생성 가능 그 중 하나가 생성자 함수 new 키워드를 사용하여 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 빈 객체 생성 후 프로퍼티나 메서드를 추가하여 객체 완성 const person = new Object(); person.name = 'Lee'; person.sayHello = function() { console.log(this.name); } 생성자 함수에 의해 생기는 객체 = 인스턴스 생성자 함수 자바스크립트 빌트인 생성자 함수 Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise 등 const strObj = new String('..

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ESMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 X (외부로 공개된 객체의 프로퍼티가 아님) but 일부 내부 슬롯과 내부 메서드는 간접적으로 접근할 수 있음 [[prototype]] : 모든 객체가 가지고 있는 내부 슬롯으로, **proto**를 통해 간접적으로 접근 가능 const o = {}; o.__proto__ 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티 생성할 때 프로퍼티 어트리뷰트를 기본 값으로 자동 정의 프로퍼티 어트리뷰트 : 프로퍼티 상태를 나타내는 것 프로퍼티 상태 : 프로..

var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언 가능 초기화문 (변수 선언과 동시에 초깃값 할당) 유무에 따라 다르게 동작 초기화문이 없는 변수 선언문은 무시됨 ⇒ 동일한 이름의 변수가 있는지 모르고 중복 선언하며 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경됨 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 **함수의 코드 블록**만을 지역 스코프로 인정 ⇒ 함수 레벨 스코프 함수 내부에서 선언한 변수라도 전역 변수가 되어 함수 외부에 이름이 같은 변수가 있다면 중복 선언되어 변수 값이 의도치 않게 바뀔 수 있음 var x = 1; if (true) { var x = 10; } console.log(x); // 10 함수 레벨 스코..

변수의 생명 주기 지역 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 받으며, 언젠간 소멸함 ⇒ 변수는 생성되고 소멸되는 생명 주기 (life cycle)가 있음 변수에 생명주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간 점유 전역 변수의 생명 주기 : 애플리케이션 생명 주기와 같음 전역 변수 선언은 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행 지역 변수 생명 주기 : 함수 호출 시 생성되고, 함수 종료 시 소멸 지역 변수 선언은 함수 몸체 실행 이전에 자바스크립트 엔진에 의해 먼저 실행 fcuntion foo() { var x = 'local'; console.log(x); // local return x; } foo(); console...