프론트엔드 개발

이 글은 코어 자바스크립트 책에서 클래스를 공부하고 정리하는 목적으로 남깁니다. 목표 클래스와 인스턴스의 개념을 이해할 수 있습니다. 자바스크립트는 어떻게 클래스 상속을 구현한 것처럼 보이는지 알 수 있습니다. 목차 클래스와 인스턴스의 개념 이해 자바스크립트의 클래스 클래스 상속 ES6의 클래스 및 클래스 상속 정리 클래스와 인스턴스의 개념 이해 자바스크립트는 프로토 타입 기반 언어라서 '상속'개념이 존재하지 않지만, ES6 이후 클래스 문법이 추가되고, 클래스 문법에서도 일정 부분은 프로토타입을 활용하고 있습니다. class라는 의미는 '계급, 집단, 집합'등의 의미로 번역됩니다. 프로그래밍 언어적으로도 동일한 개념으로 접근하면 됩니다. 클래스(class)는 어떤 사물의 공통 특성을 모아 정의한 추상적..

이 글은 코어 자바스크립트 책에서 프로토타입을 공부하고 정리하는 목적으로 남깁니다. 목표 어떤 생성자 함수를 함께 호출하면 새로운 인스턴스가 생성되는 과정을 알 수 있습니다. 프로토타입과 프로토타입 체이닝을 알 수 있습니다. 목차 프로토타입의 개념 이해 프로토타입 체인 정리 프로토타입 개념 이해 자바스크립트는 프로토타입 기반 언어입니다. 위키백과에서 프로토타입 기반 언어를 다음과 같이 설명합니다. 프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다. - 위키백과 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 prototype으로 삼고 이를 복제(참..

이 글은 코어 자바스크립트 책에서 클로저를 공부하고 정리하는 목적으로 남깁니다. 목표 클로저의 개념과 메모리 관리에 대해 알 수 있습니다. 커링함수에 대해 알 수 있습니다. 목차 클로저의 의미 및 원리 클로저와 메모리 관리 클로저 활용사례 정리 클로저의 의미 및 원리 클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상 - MDN 예시 1) var outer = function() { var a = 1; var inner = function() { console.log(++a); }; inner(); }; outer(); // 2 함수 outer의 내부 함수인 inner 함수에서는 a를 선언하지 않았기 때문에, environmentRecord에서 값을 찾지 ..

이 글은 코어 자바스크립트 책에서 콜백 함수를 공부하고 정리하는 목적으로 남깁니다. 목표 콜백 함수의 개념과 비동기 개념, 비동기 제어에 대해서 알 수 있습니다. 목차 콜백함수란? 콜백 함수는 함수다 콜백 함수 내부의 this에 다른 값 바인딩하기 콜백 지옥과 비동기 제어 정리 콜백 함수란? callback은 '호출하다'는 의미인 call과 '뒤돌아오다' back의 합성어로 '되돌아 호출해달라'는 의미입니다. 콜백 함수(Callback Function)는 다른 함수나 메서드에게 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 따라 실행합니다. 콜백 함수는 함수다 콜백 함수는 함수입니다. 메서드를 콜백 함수로 전달한 경우, 메서드가 아닌 함수로서 호출됩니..

이 글은 코어 자바스크립트 책에서 this를 공부하고 정리하는 목적으로 남깁니다. 목표 여러 상황에서의 this가 어떻게 결정되는지 알 수 있습니다. this를 어떻게 바인딩할 수 있는지 알 수 있습니다. 목차 상황에 따라 달라지는 this 명시적으로 this를 바인딩하는 법 정리 1. 상황에 따라 달라지는 this 자바스크립트에서 this는 실행 컨텍스트가 생성될 때 함께 결정됩니다. this는 함수를 호출할 때 결정된다고 할 수 있습니다. 어떤 상황에서 this가 값을 결정하는지 알아보겠습니다. 1 - 1. 전역 공간에서의 this 전역공간인 this는 전역 객체를 가리키는데, 브라우저 환경에서의 전역 객체는 window이고, Node.js 환경에서는 global 입니다. 자바스크립트의 모든 변수는 ..

이 글은 코어 자바스크립트 책에서 실행 컨텍스트를 공부하고 정리하는 목적으로 남깁니다. 목표 실행 컨텍스트란 무엇이고, 실행 컨텍스트의 구조에 대해서 알 수 있습니다. 호이스팅과 스코프가 무엇인지 알 수 있습니다. 목차 실행 컨텍스트란? VariableEnvironment LexicalEnvironment this 정리 실행 컨텍스트란? 실행 컨텍스트를 보기 앞서, Stack과 Queue에 대해 간략히 알아보겠습니다. Stack, Queue Stack: LIFO (Last In First Out) Queue: FIFO (First In First Out) Stack에서는 가장 마지막에 들어온 d,c,b,a 순으로 데이터를 꺼낼 수 있습니다. Queue에서는 제일 먼저 들어온 a,b,c,d 순으로 데이터를..

바로 전에, primitive type과 reference type의 차이점을 메모리에 어떻게 할당되는지 알아보았습니다. 오늘은 referenct type에서 객체를 복사할 때 얕은 복사와 깊은 복사의 차이점을 공부해보겠습니다. primitive type의 값을 복사할 때는, 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않습니다. const age = 29; let nextYearAge = age; nextYearAge += 1; console.log(age); // 29 console.log(nextYearAge); // 30 reference type의 값을 복사할 때는, 선언된 변수의 주소가 객체의 주소를 가리키고 있기 때문에, 아래와 같습니다 const me = ..

이 글은 코어 자바스크립트 책에서 실행 데이터 타입을 공부하고 정리하는 목적으로 남깁니다. 목표 데이터 타입인 primitive type과 reference type의 차이점을 알 수 있습니다. 불변 객체를 만드는 방법, 얕은 복사와 깊은 복사에 대해 알 수 있습니다. undefined와 null의 특징들을 알 수 있습니다. 목차 데이터 타입의 종류 데이터 타입에 관한 배경지식 변수 선언과 데이터 할당 기본형 데이터와 참조형 데이터 불변 객체 undefined와 null 정리 1. 데이터 타입의 종류 기본형(primitve type)과 참조형(reference type)의 차이점 할당이나 연산 시 두 타입 모두 복제를 하지만, 기본형은 값이 담긴 주솟값을 복제합니다. 참조형은 값이 담긴 주솟값들로 이루어..