104%

ES6에서 number, boolean, string, undefined, null, object 이외에 7번째 새로운 자료 구조인 Symbol이 등장했다. Symbol 심볼은 unique id를 생성해주는 factory 함수라고 생각하면 편하다. let symbol2 = Symbol('simsimjae'); 이런식으로 simsimjae라고 하는 이름을 가진 심볼을 생성할 수 있다. 여기서 'simsimjae'의 역할은 심볼에 이름을 붙인거(description)라고 생각하면 된다. 따라서 같은 이름을 가진 심볼을 2개를 만들었다고 해서 그 두개의 심볼이 같은것은 아니다. Symbol('simsimjae') !== Symbol('simsimjae') 왜냐면 심볼은 생성할때마다 유니크한 값이 되기 때문이다..

이 글은 독자가 Promise에 대한 이해가 있다고 가정하고 진행합니다. class Component { handleClick = () => {}; handleClick(); } 클래스에서 메소드를 선언할때 arrow function을 사용하는 첫번쨰 방법(@babel/plugin-proposal-class-properties로 트랜스파일링 해야함)과 그냥 function을 사용하는 두번째 방법이 있습니다. function을 사용하는 경우 아래처럼 굉장히 불편한 상황을 겪게 됩니다. class Component { constructor() { this.handleClick = this.handleClick.bind(this); // 2. this바인딩을 매번 해줘야 해서 귀찮다.. } // 1. func..

다른 대부분의 라이브러리들은 jquery로 되어있거나 타이머를 두고 지속적으로 엘리먼트의 변화를 감지하기 때문에 성능이슈가 있었다. 이 포스트에서는 스크롤 이벤트 기반의 엘리먼트 사이즈 변화를 감지할 수 있는 방법에 대해서 소개한다. window.addResizeListener = function(element, fn){ if (!element.__resizeListeners__) { element.__resizeListeners__ = []; if (attachEvent) { element.__resizeTrigger__ = element; element.attachEvent('onresize', resizeListener); } else { if (getComputedStyle(element).pos..

평범한 import 방식 import React from 'react'; // Import the default export from a module. import { Component, PropTypes } from 'react'; // Import named exports from a module. import * as Redux from 'react-redux'; // Named import - grab everything from the module and assign it to "redux". Bare Import import 'react'; 이런식으로 모듈을 가져오기만 하고 변수에 할당하지 않는것을 Bare Import라고 한다. Bare는 "없는" 이라는 뜻이다. Bare Import => ..

es7에 도입된 async await은 es6의 Promise를 좀 더 편리한 방식으로 사용하기 위해 탄생했다. Async async function f() { return 1; } 함수 앞에 async 키워드를 붙인다는건 이 함수가 항상 Promise를 리턴한다고 표시하는것이다. async 함수 내부에서 Promise를 명시적으로 리턴하지 않았음에도 자동으로 아래 코드로 변경된다. async function f() { return Promise.resolve(1); } 즉, 1이라는 값으로 resolved된 Promise가 리턴된다. Promise가 리턴되므로 우리는 이 async 함수를 then으로 체이닝할 수 있다. async function f() { return 1; } f().then(aler..

ES7의 async 함수는 리턴값을 내부적으로 Promise.resolve로 감싸서 리턴한다. Promise.resolve 함수는 전달된 값으로 resolved 된 Promise를 반환한다. 다시말해서 async 함수는 Promise를 리턴한다. const isAsync = myFunction.constructor.name === "AsyncFunction"; 함수앞에 async 라는 키워드를 붙이면 해당 함수가 AsyncFunction이라고 하는 생성자에 의해서 생성된다. 이 AsyncFunction에 의해 생성된 함수의 프로토타입의 constructor는 생성자 함수를 의미하고 그 생성자 함수의 이름은 당연히 AsyncFunction이다. 이런 방법으로 해당 함수가 async함수인지 확인할 수 있다.

연속적인 비동기 패턴을 다룰때 가장 전통적인 방식인 콜백 패턴의 단점을 보완하기 위해 Promise가 나왔다. Promise를 사용하면 코드의 indent가 계속 깊어지는 콜백 헬 문제를 해결하면서 코드를 좀 더 읽기 좋게 만든다는 점에서 아주 훌륭한 패턴이라고 할 수 있다. 근데 Promise가 진짜 유용한 이유는 따로 있다. 우선 콜백 패턴이 왜 복잡한지부터 살펴보자. 콜백 패턴의 복잡성 const add5 = (number, callback) => { setTimeout(() => callback(number + 5), 1000); }; const add10 = (number, callback) => { setTimeout(() => callback(number + 10), 1000); }; con..

제너레이터 함수는 비동기 작업을 컨트롤 할 수 있을뿐만아니라 동기 작업도 컨트롤 할 수 있게 만든다. Yield와 Next 제너레이터 함수 내의 yield 키워드가 붙은 함수는 본인의 리턴값을 제너레이터 함수가 호출된 곳으로 전달 할 수 있다. yield키워드는 제너레이터에서의 return 문이라고 생각하면 된다. 다만 함수의 실행이 완전 종료되지 않고 일시정지 된다는 점에서 차이가 있다. yield키워드는 IteratorResult라는 객체를 리턴하는데 그 안에는 value와 done이라는 속성이 들어있다. 제너레이터의 실행이 종료되면 done에 true가 들어갈것이고 value에는 yield키워드가 부착된 함수에서 리턴한 값이 들어가게 된다. 그리고 이 값은 제너레이터를 호출한쪽에서 가져다 사용할 수..