bright jazz music

실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집해서 실행 컨텍스트 '객체'에 저장한다. 이러한 객체는 자바스크립트 엔진이 활용할 목적으로 생성하는 것이며, 개발자가 확인할 수는 없다. 실행 컨텍스트 객체에는 아래와 같은 값들이 담기게 된다. VariableEnvironmentLexicalEnvironmentThisBinding 1. VariableEnvironment:  현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보 + '선언 시' LexicalEnvironment의 스냅샷이다.실행 컨텍스트를 생성할 때 VariableEnvironment에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment..

1. 스트링 타입의 타입확인// 스트링 타입의 타입 확인if (typeof val === "string" || val instanceof String) {...} 2. 객체 타입의 타입확인// 순수객체 타입의 타입 확인if (typeof val === "object" && // 객체 타입인지 확인 val !== null && // null 제외 (typeof null도 "object"이기 때문) !Array.isArray(val)) // 배열 제외{ // 순수 객체인 경우의 처리}//...const obj = { name: "Kim" }; // trueconst arr = [1, 2, 3]; // falseconst null_val = n..

1. 실행 컨텍스트(excution context): 실행할 코드에 제공할 환경 정보들을 모아놓은 '객체'. - 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성한다.- 이를 콜 스택에 쌓아 올렸다가 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. '동일한 환경'이란 하나의 실행 컨텍스트를 구성할 수 있는 방법을 의미하며, 전역공간, eval(), 함수 등이 있다. 자동으로 생성되는 전역공간과 eval을 제외한다면, 실제적으로 컨텍스트를 구성하는 방법은 함수를 실행하는 것밖에 없다.//------------------------------------(1)var a = 1;function outer() { fun..

1. 메모리 생존주기자바스크립트에서의 메모리 생존주기는 대체로 아래와 같은 과정을 거친다. 할당: 필요한 메모리를 할당받는다. 이는 변수를 초기화 할 때 ('let a = 10;'), 객체를 만들 때('let obj = {}'), 함수를 호출할 때 등 다양한 상황에서 발생한다.사용: 할당받은 메모리를 읽거나 쓰는 작업을 수행한다. 예를 들어, 변수의 값을 변경하거나 객체의 속성에 접근하는 등의 작업이 여기에 해당한다.해제: 프로그램이 더이상 해당 메모리를 필요로 하지 않을 때, 메모리는 해제되어 시스템에 반환된다. 자바스크립트에서는 가비지 콜렉터가 이 작업을 자동으로 수행한다. 자바스크립트에서는 자바스크립트 엔진의 가비지 콜렉터가 불필요한 메모리를 자동으로 해제한다. 이는 Mark-and-Sweep(표시..

안녕 //바보 안녕

자바스크립트는 싱글 스레드에서 작동한다, 즉, 기본적으로 자바스크립트는 한 번에 하나의 작업만 동기 방식으로만 처리할 수 있다. 동기(synchronous)에 대해 간단히 설명하자면, 직렬 방식으로 작업을 처리하는 것을 의미하며, 이 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 비로소 다른 작업을 처리할 수 있다. 그 동안 다른 모든 작업은 대기한다. 이러한 방식은 개발자에게 매우 직관적으로 다가오지만 한 번에 다양한 많은 작업을 처리할 수 없다. 반대로 비동기(asyncrhous)란 직렬 방식이 아니라 병렬 방식으로 작업을 처리하는 것을 의미한다. 요청을 시작한 후 이 응답이 오든 말든 상관없이 다음 작업이 이루어지며 따라서 한 번에 여러 작업이 실행될 수 있다. 자바스크립트는 분명히 싱글 스레..

리액트의 클래스형 컴포넌트에 대한 이해가 JS의 클래스, 프로토타입, this에 달려있다면, 함수형 컴포넌트에 대한 이해는 클로저에 달려 잇다. 함수형 컴포넌트의 구조와 작동 방식, 훅의 원리, 의존성 배열 등 함수형 컴포넌트의 대부분의 기술이 모두 클로저에 의존하고 있다. 1. 클로저의 정의 MDN에서는 '클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합"이라고 돼 있다. function add() { const a = 10 function innerAdd() { const b = 20 console.log(a + b) } innerAdd() // 30 } 위 예제코드에서는 add 함수 내부에 innerAdd가 있다. innerAdd 함수는 내부에서 b 변수를 선언한 뒤 자신..

자바스크립트의 클래스 1. 클래스 예시 //Car class 선언 class Car { // constructor는 생성자. 최초에 받을 인수를 결정 가능하며, 객체 초기화 용도로 사용된다. constructor(name) { this.name = name } // 메서드 honk() { console.log(`${this.name}이 경적을 울립니다.`) } // 정적 메서드 static hello() { console.log('저는 자동차입니다.') } // setter set setAge(value) { this.carAge = value } // getter get getAge() { return this.age } } // Car 클래스를 이용해 car 객체 만들기 const myCar = ne..

1. 함수를 정의하는 방법 JS에서 함수를 정의하는 방법은 크게 네 가지이다. - 함수 선언문 - 함수 표현식 - function 생성자 - 화살표 함수 1.1. 함수 선언문 JS에서 함수를 선언할 때 가장 일반적으로 사용하는 방식 function add(a, b) { //이름이 있다 return a + b } 함수 선언문은 표현식이 아닌 일반 문(statement)로 분류된다. 표현식이란 무언가 값을 산출하는 구문을 의미한다. 즉, 함수 선언으로는 어떠한 값도 표현되지 않았으므로 표현식이 아닌 문으로 분류된다. 그러나 JS엔진이 코드의 문맥에 따라 동일한 함수를 문이 아닌 표현식으로 해석하는 경우가 있다. const sum = function sum(a, b) { //함수에 이름이 있다 return a..

리액트에서의 의존성 배열이 작동하는 방식. 왜 의존성배열에 특정한 변수들을 채워야 하는가? 리엑트 컴포넌트의 렌더링이 일어나는 이유증 하나는 props의 동등비교에 따른 결과이다. props의 동등비교는 객체의 얕은 비교를 기반으로 이루어진다. 이 얕은 비교가 리액트에서 어떻게 작동하는지 이해하지 못하면 렌더링 최적화에 어려움을 겪을 수 있다. 리액트의 가상 DOM과 실제 DOM의 비교, 리액트 컴포넌트가 렌더링할지를 판단하는 방법, 변수하 함수의 메모이제이션 등 모든 작업은 자바스크립트의 동등비교를 기반으로 한다. 1. 자바스크립트의 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 이 데이터 타입은 원시 타입과 객체 타입으로 나눌 수 있다. 1.1.원시타입(primitive type)..