Frontend

Overview this 키워드 함수 호출 방식과 this 바인딩 일반 함수 호출 메서드 호출 생성자 함수 호출 Function.prototype.apply/call/bind 메서드에 의한 간접 호출 this 키워드

Overview state Hooks Context Hooks Ref Hooks Effect Hooks Performance Hooks Other Hooks Your own Hooks State Hooks 상태를 이용하는 훅은 컴포넌트가 사용자 입력과 같은 정보를 기억할 수 있게 해준다. state를 이용하는 가장 대표적인 Hook으로는 useState가 있다. Context Hooks 컨텍스트 훅을 이용하면 컴포넌트가 prop으로 다른 컴포넌트에게 직접 전달하지 않아도 이용가능하게한다. 컨텍스트 훅은 마치 우산같은 개념이다. 특정 컴포넌트에 우산을 설치하면 우산아래에 있는 컴포넌트는 비를 맞지 않아도 된다. (=prop을 props drilling을 피할 수 있다.) 이러한 개념은 Redux, Zust..

Overview 자바스크립트 객체의 분류 표준 빌트인 객체 원시값과 래퍼 객체 전역 객체 빌트인 전역 프로퍼티 빌트인 전역 함수 암묵적 전역 자바스크립트 객체의 분류 자바스크립트 객체는 다음과 같이 크게 3개의 객체범주로 분류할 수 있다. 표준빌트인 객체 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말한다. 실행 환경(브라우저 또는 Node.js)과 관계없이 언제나 사용가능하다. 호스트 객체 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경(브라우저 환경 또는 Node.js)에서 추가로 제공하는 객체를 말한다. 사용자 정의객체 사용자 정의 객체는 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체를 말한다. 표준 빌트인 객체 원시..

Overview strict mode란? strict mode의 적용 전역에 strict mode를 적용하는 것은 피하자 함수 단위로 strict mode를 적용하는 것도 피하자 strict mode가 발생시키는 에러 strict mode 적용에 의한 변화 strict mode란? function foo() { x = 10; } foo(); console.log(x); // ? 스코프를 배웠다면, 당연히 에러가 날것이라고 예상했겠지만 위의 코드출력값은 놀랍게도 10이다. 변수 선언이 없는 할당이므로 함수의 스코프에 존지하지 않고, 스코프체이닝에 의해 전역 스코프를 찾아봐도 존재하지 않는다. 따라서 위의 코드는 에러를 발생시킬 것 가지만 놀랍게도 10이 출력된다. 이는 자바스크립트 엔진이 암묵적으로 전역 ..

Overview 객체지향 프로그래밍 상속과 프로토타입 프로토타입 객체 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입 프로토타입의 생성 시점 객체 생성 방식과 프로토타입의 결정 프로토타입 체인 오버라이딩과 프로퍼티 섀도잉 프로토타입의 교체 instanceof 연산자 직접 상속 정적 프로퍼티/메서드 프로퍼티 존재 확인 프로퍼티 열거

Overview 일급객체의 조건 함수객체의 프로퍼티 arguments 프로퍼티 caller 프로퍼티 length 프로퍼티 name 프로퍼티 __proto__ 접근자 프로퍼티 prototype 프로퍼티 일급객체 일급객체의 조건은 다음과 같다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 17장에서도 언급했듯, 객체는 함수의 필요조건이지만, 충분조건은 아니다. 일반 객체는 호출할 수 없지만, 함수 객체는 호출할 수 있다. 그리고 함수 객체는 일반 객체에너는 없는 함수 고유의 프로퍼티를 소유한다. 함수객체의 프로퍼티 function square(number) { r..

Overview 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 인스턴스란 생성자 함수에 의해 생성된 객체를 의미한다. 객체 생성방식의 종류와 장·단점 생성자함수의 정의 생성자함수의 인스턴스 생성과정 내부 메서드 [[Call]]과 [[Construct]] constructor와 non-constructor의 구분 new.target 객체 생성방식의 종류와 장·단점 객체 리터럴 생성방식 객체 생성 방식은 직관적이고 간편하다. 하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다. Object 생성자함수 이용 new 연산자와 함께..

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티pseudo property와 의사 메서드pseudo method다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. 예를 들어, 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 내부 슬롯은 자..