📍Barrel 여러 모듈의 export 를 하나의 모듈(주로 index.ts)에서 import로 받아 다시 export 해주는 파일 예를 들어 아래와 같은 3개의 모듈이 각각 존재할 때 // src/lib/foo.ts export class Foo {} // src/lib/bar.ts export class Bar {} // src/lib/baz.ts export class Baz {} barrel이 없으면 3개 라인의 import가 필요함 // src/pages/page.ts import { Foo } from '../lib/foo'; import { Bar } from '../lib/bar'; import { Baz } from '../lib/baz'; barrel 파일(lib/index.ts) 을 ..

모던 자바스크립트 Deep Dive 정리 1. 함수의 구분 ▶ ES6 이전에는 일반 함수, 생성자 함수, 메서드, 콜백 함수 간 구분이 명확하지 않았다 ▷ 예) new 만 붙이면 생성자 함수 ▷ 모든 함수가 callable(호출할 수 있는 함수 객체)이면서 constructor(인스턴스 생성 가능한 함수 객체) ▷ 이는 실수를 유발하고 성능을 저해함 ▷ constructor는 매번 prototype 프로퍼티를 가지고, 프로토타입 객체도 만들기 때문 ▶ 그래서 ES6에서는 함수를 사용 목적에 따라 4가지로 명확히 구분한다 ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X ▶ 표준 빌트인 객체가 제..

모던 자바스크립트 Deep Dive 정리 1. 클래스는 프로토타입의 syntactic sugar 인가? ▶ 클래스 = 함수 ▷ JS의 프로토타입 기반 패턴을 다른 프로그래밍 언어의 클래스 기반 패턴처럼 사용할 수 있도록 하는 syntactic sugar 클래스 만의 독특한 특징 ▶ 클래스는 new 없이 호출 불가, 생성자 함수는 new 없으면 일반함수로 호출 ▶ 상속을 지원하는 extends, super 키워드 존재 ▶ 클래스는 호이스팅 발생하지 않는 것처럼 동작, 생성자 함수는 함수 선언문일 경우 함수 호이스팅, 함수 표현식일 경우 변수 호이스팅 발생 ▶ 클래스의 모든 코드에는 암묵적으로 strict mode 적용 ▶ 따라서 클래스는 프로토타입 기반의 객체지향을 구현한다는 점에서 생성자 함수와 유사하지..

모던 자바스크립트 Deep Dive 정리 클로저란? ▶ 사전적 의미 : 함수와 그 함수가 선언된 렉시컬 환경과의 조합 ▶ 외부 함수보다 더 오래 유지되고 상위 스코프의 식별자를 참조하는 (중첩)함수 ▷ 함수가 선언된 렉시컬 환경을 이해하자 const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc(); } outerFunc(); ▶ 중첩함수 innerFunc는 outerFunc의 내부에서 선언되었기 때문에, outerFunc의 x 변수에 접근 가능 ▷ 만약, innerFunc 함수가 outerFunc 함수의 내부에서 정의된 중첩함수가 아니면, innerFunc 함수를 out..

모던 자바스크립트 Deep Dive 정리 1. 자바스크립트 소스코드(실행 가능한 코드)의 4가지 종류 ▶ 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다 1-1. 전역 코드 ▶ 최상위 스코프인 전역 스코프를 생성 ▷ 전역 코드가 평가되면 전역 실행 컨텍스트가 생성됨 1-2. 함수 코드 ▶ 지역 스코프를 생성하고 스코프 체인에 연결 ▷ 함수 코드가 평가되면 함수실행 컨텍스트가 생성됨 1-3. eval 코드 ▶ eval 코드는 strict mode에서 독자적인 스코프를 생성 ▷ eval 코드가 평가되면 eval 실행 컨텍스트가 생성됨 1-4. 모듈 코드 ▶ 모듈별로 독립적인 모듈 스코프를 생성 ▷ 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성됨 2. 소스코드의 평가와 실행 ▶ 모..

모던 자바스크립트 Deep Dive 정리 1. this 키워드 ▶ 메서드가 자신이 속한 프로퍼티를 참조하려면, 자신이 속한 객체를 가리키는 식별자를 참조해야 함 ▷ 객체 리터럴 방식으로 생성한 객체는 식별자를 통해 참조할 수 있음 ▶ 하지만 생성자 함수 방식에서는 문제가 있음 ▷ 나중에 만들어질 인스턴스의 식별자를 모르기 때문 function Circle(radius) { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ????.radius = radius; } Circle.prototype.getDiameter = function () { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. return 2 * ????.radiu..

모던 자바스크립트 Deep Dive 정리 1. 자바스크립트 객체의 분류 1-1. 표준 빌트인 객체 1-2. 호스트 객체 1-3. 사용자 정의 객체 2. 표준 빌트인 객체 ▶ ECMAScript 사양에 정의된 객체로, 브라우저 혹은 Node.js 에서도 사용 가능 ▶ 전역 객체의 프로퍼티로 제공되므로, 별도의 선언 없이 전역 변수처럼 사용 가능 ▷ Object, String, Math, Map/Set, Promise 등 ▶ Math, Reflect, JSON 을 제외한 빌트인 객체들은 생성자 함수 객체이기 때문에 인스턴스 생성 가능 ▷ 인스턴스의 프로토타입은 빌트인 객체.prototype 에 바인딩 된다 ▶ 표준 빌트인 객체들은 인스턴스 없이 호출 가능한 빌트인 정적 메서드를 제공한다 ▷ 예) Number..

모던 자바스크립트 Deep Dive 정리 1. strict mode란? ▶ 오류를 발생시킬 가능성이 높거나 JS 엔진의 최적화에 문제를 일으킬 수 있는 코드에 대해 명시적 에러 발생 ▷ ES5에서 추가 ▷ ESLint의 하위 호환 ▷ ES6에서 추가된 클래스와 모듈은 기본적으로 strict mode가 적용됨 2. strict mode 적용 ▶ 전역의 선두 혹은 함수 몸체의 선두에 `use strict`; 를 추가 ▷ 전역의 선두에 추가하면 스크립트 전체에 strict mode 적용 ▷ 함수 몸체의 선두에 추가하면 해당 함수와 중첩 함수에 strict mode 적용 3. 전역의 선두에 strict mode 적용은 바람직하지 않음 ▶ 서드파티 라이브러리의 경우 non-strict mode로 설정된 경우가 있..