프론트엔드 개발

유튜브 채널 우아한 Tech에서 본 영상을 다시 글로 보기 위해 만들었습니다. 이미지와 내용 출처는 하단에 있습니다. 목표 상태관리란 무엇인가? 반응형 프로그래밍이란 무엇인가? 상태(state)란? 변화하는 데이터 UI에 동적으로 표현되는 데이터, 사용자에 action에 따라서 변경될 수 있는 컴포넌트의 부분, 자바스크립트의 객체 상태관리란? 변화하는 데이터관리 여러 컴포넌트 간에 데이터 전달과 이벤트 통신을 한곳에서 관리하는 것 상태관리는 왜 필요할까? 데이터가 바뀌어도 페이지가 렌더링 되지 않게 하기 위해 상태가 너무 복잡하기 때문이다, 상태들이 복잡하게 얽혀있다면, 상호간에 의존성이 많아지게 되어 UI가 어떻게 변하는지 알기 어려울 수 있기에 효율적으로 관리해야한다. 컴포넌트는 각각 다르지만, 사용..

유튜브 채널 우아한 Tech에서 본 영상을 다시 글로 보기 위해 만들었습니다. 이미지와 내용 출처는 하단에 있습니다. 이번 내용은 실행컨텍스트 구성 중 Record와 Outer에 집중하여 보겠습니다. 목차 1. Record(EnvironmentRecord)로 JS 호이스팅 이해하기 2. Outer(Outer Environment Reference)로 JS 스코프체이닝 이해하기 3. Execution Context 정리 1. Record로 JS 호이스팅 이해하기 console.log(laptop); // undefined var laptop = "macbook"; console.log(laptop); // macbook 위 예제 첫번째 줄에서 호이스팅이 발생하여 undefined를 출력되는 것을 볼 수 ..

이 글은 코어 자바스크립트 책에서 클래스를 공부하고 정리하는 목적으로 남깁니다. 목표 클래스와 인스턴스의 개념을 이해할 수 있습니다. 자바스크립트는 어떻게 클래스 상속을 구현한 것처럼 보이는지 알 수 있습니다. 목차 클래스와 인스턴스의 개념 이해 자바스크립트의 클래스 클래스 상속 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 순으로 데이터를..