Mistrie's story

* 분명히 정리해둔다고 해둔 거 같은데, 막상 살펴보니 정리해둔 게 없어서 정리함. * 이 내용은 ES3 를 기반으로 하며, ES5부터는 lexical environment로 변경되었고, ES6 들어서도 내용이 좀 변화함 그러나 기본적인 본질은 비슷하기에, execution context 에 대해서만 정리하려고 함. 1. Execution context 란? * 쉽게 말해 JS 엔진에서 함수를 어떤 식으로 읽어들여서 수행할 것인지에 대한 정보들을 담고 있는 것이라 할 수 있음 * 예를 들어, foo 라는 함수를 호출했을 때, js 엔진에서는 foo에 대한 여러 정보들을 알고 있어야 실행할 수 있음 * 일반적으로 추상화된 개념이라고는 하지만, 내부적으로는 객체 형태로 정보들을 담고 있다고 함. * Exec..

- 아무 생각 없이 사용했지만, 생각해보면 누구든 할 수 있는 질문인 것 같아서 간단히 정리함. - 둘 다 데이터를 다룰 때 사용되는 개념임. Props - 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, 자식 입장에서는 읽기 전용인 값을 의미함. // parent components import Child from './Child'; export default function Parent() { return ( ); } ... // child components export default function Child(props) { // 부모로부터 전달받은 데이터. 자식 입장에선 해당 값은 읽기전용 const { name, age } = props; return ( {name} {age} ); } ..

#출처 - ko.javascript.info/async-await를 보고 공부하면서 간단 정리함! - async / await 문법은 promise를 좀 더 편하게 사용할 수 있도록 만들어줌! async 문법 - async는 function 앞에 붙음 - async 가 붙으면 function 은 항상 promise를 반환함 - function 이 어떤 값을 리턴하더라도, 그 값을 promise로 감싸서 반환함. async function test() { return 1; } test().then(console.log); // 1 await 문법 - await 문법은 async 함수 안에서만 동작함. - js 는 await 키워드를 만나면 promise 가 처리될 때까지 기다리고, 그 이후에 결과를 반환함..

# 출처 - poiemaweb.com/es6-generator을 공부하면서 간단히 정리함! - ES6에서 도입된 Generator 함수는 iterable을 생성하는 함수임. - 또한 generator 함수는 비동기 처리에 유용하게 사용됨 - generator 함수는 일반 함수와는 다른 독특한 동작을 함. - 모든 코드 블록을 한번에 실행하지 않고, 함수 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있음! function* counter() { console.log('first call'); yield 1; // 여기까지만 실행하고 중단됨. console.log('second call'); yield 2; // 두번째 호출 시 여기까지만 실행되고 중단됨. console.log('third..

# 출처 - poiemaweb.com/es6-iteration-for-of을 공부하면서 내용을 간단히 정리함! - Iterable / iterator를 알기 위해선 iteration protocol을 먼저 알아야 함. Iteration protocol - Iteration protocol 이란, 데이터 컬렉션을 순회하기 위한 프로토콜임. - 이 프로토콜을 준수한 객체는 for...of 문으로 순회할 수 있고, Spread 문법의 피연산자가 될 수 있음! - 이 프로토콜에는 iterable protocol 과 iterator protocol 이 있음! Iterable - iterable protocol을 준수한 객체를 iterable 이라고 부름. - iterable 은 Symbol.iterator 메소드..

# 출처 - poiemaweb.com/es6-symbol을 공부하면서 내용을 간단히 정리함! - Symbol 은 ES6에서 새로 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값임. - 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용함. * 기존 타입 (괄호 없는 건 원시 타입) - Boolean - Number - String - Null - undefined - Object (객체 타입) 사용법 - Symbol 은 Symbol() 함수로 생성함. 이는 다른 원시 타입과 달리 new 연산자를 사용하지 않음. let mySymbol = Symbol(); console.log(typeof mySymbol); // symbol - Symbol() 함수의 인자로 문자열을..

# 출처 - poiemaweb.com/es6-promise에서 공부하면서 내용 간단 정리함! Promise - 콜백 지옥의 탈출구? - JS는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용함. - 그런데, 처리 순서를 보장해주기 위해, 비동기 응답을 받아 또 다른 비동기 요청을 이어서 해야 하는 경우들은 계속 콜백을 겹쳐서 호출해줘야 함. - 이것이 '콜백 지옥'이라는 표현을 쓰며, 가독성이 떨어지고 에러 발생 위치를 찾거나 하는 등의 디버깅 작업도 힘들었음 // 이것이 콜백 지옥... asyncTask(value1, function () { asyncTask(value2, function () { asyncTask(value3, function () { asyncTask(value4, funct..

# 출처 - poiemaweb.com/es6-destructuring를 공부하면서 본 내용을 간단히 정리함! - 디스트럭처링은 구조화된 배열 또는 객체를 분해하여 개별적인 변수에 할당하는 것임. - 이는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당할 때 편리함. - 기존 배열의 값을 꺼내 쓰려면 아래와 같이 접근했어야 했으나, 디스트럭처링을 쓰면 1줄로 표현이 가능함. // ES5 function sum(arr) { var x = arr[0]; var y = arr[1]; var z = arr[2]; return x + y + z; } sum([1,2,3]); // ES6 function sum2(arr) { const [x, y, z] = arr; // 배열 destructuring return..

# 출처 - poiemaweb.com/에서 공부하면서 본 내용들을 간단히 정리함! - ES6 에서는 기존 ES5에서 사용하던 property와 관련하여 보다 간편하게 사용할 수 있는 기능들을 제공함 프로퍼티 축약 표현 - 프로퍼티의 값을 변수로 사용하는 경우, 프로퍼티 이름을 생략할 수 있음. // ES5 var x = 1; var y = 2; var obj = { x: x, y: y }; // ES6 let i = 1; let j = 2; const obj = { i, j }; 프로퍼티 키 동적 생성 - ES5 에서 새로운 객체를 만들고, 그 객체에 프로퍼티 이름을 동적으로 만들어야 할 경우에는 빈 객체를 생성 후 일일히 값을 '[]'를 이용하여 지정해줬음. - ES6 에서는 객체를 선언하고, 그 안에..

# 출처 - poiemaweb.com/에서 공부하면서 본 내용들을 간단히 정리함! Rest 파라미터 - 매개변수 이름 앞에 '...'을 붙여서 정의한 매개변수를 의미함 - 특정 변수들을 제외한 나머지 값들을 묶기 위한 용도로 사용함 function test(x, y, ...rest) { console.log(x); // 1 console.log(y); // 2 console.log(rest); // [3, 4, 5] } test(1, 2, 3, 4, 5); - Rest 파라미터는 반드시 마지막 파라미터이어야 함. - arguments 와 비슷할 수도 있는데, arguments 객체는 유사 배열 객체이므로, 배열 메서드를 사용하려면 Function.prototype.call 을 사용해야 함. functio..