function todoApp(state=initialState, action){ switch(action.type){ case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) default: return state } } const ADD_TODO = 'ADD_TODO' // action의 type을 정의 function addTodo(text){ // action creator return{ type: ADD_TODO, text } } 출처 리덕스는 javacript app을 위한 예측가능한 state container이다. React 뿐만 아니라 Angular등등 다양한 프레임워크와도..
출처 위 글에 따르면 Set()을 Array로 만들때 Array.from 보다 spread 방식으로 만드는 것이 좀더 빠른 것을 알 수 있다.
documentFragment는 라이브 DOM 트리 외부에 경량화된 DOM 객체를 만들 수 있다. 마치 라이브 DOM 트리 처럼 동작하나, 메모리상에서만 존재하는 빈 문서이다. 주로, documentFragment의 자식노드를 메모리상에서 쉽게 조작한 후 라이브 DOM에 추가하는 용도로 사용된다. (appendChild, insertBefore) 그럼 createElement와 차이는 무엇인가? 1) documentFragment는 어떤 종류의 노드도 가질 수 있지만, element는 그렇지 않다. 2) documentFragment는 DOM에 추가해도 documentFragment 자체는 추가되지 않으며 documentFragment의 내용만 추가되지만, element는 그 자체가 추가된다. 3) do..
어떤 엘리먼트 안에 새로운 엘리먼트를 추가해야할 때, innerHTML과 appendChild 중 어느것을 사용하는 갓이 좋을까? 일단 각각의 특징부터 정리해보자. innerHTML은 일단 string을 파싱하는 작업이 추가된다. 그리고 노드들을 생성 및 직렬화(?)하여, DOM 객체 안의 html에 단 1번 할당하는 방식이다. appendChild는 만들어진 노드를 타겟 엘리먼트의 자식으로 할당하는 역할을한다. 단, DOM 객체에 접근이 필요하다. 이러한 관점으로 볼때, 추가해야할 노드가 많다면 innerHTML를 사용하여 한번에 주는게 낫고, 추가해야할 노드가 적다면 appendChild으로 문자열 파싱없이 주는게 낫다. 하지만 잘 생각해보면, 노드가 적든말든 DOM 객체에 1번만 접근하고, 문자열 ..
javascript의 전역 변수는 스코프 체인의 마지막에 오게되어서, 태그 탐색 등의 일을 하게 되면 n^2의 비용이 발생된다. document는 javascript의 전역변수이다. 즉, document라는 전역 객체에 지속적으로 접근하는 것은 javascript의 성능저하를 일으킨다. document에 접근할 일이 많다면, 미리 변수에 담아서 캐싱하는 것이 좀더 나은 방법이다. const doc = window.document; doc.querySelector('div');
DOM은 Document Object Model읠 줄임말로, 트리구조로 되어있는 객체 모델이다. 트리구조로 되어있어 이해하기 쉽다는 장점이 있지만, 이런 구조 때문에 거대한 DOM트리에서 잦은 DOM 업데이트는 성능을 저하시키고, 찾고자하는 DOM을 제대로 찾지 못하면 다시 거대한 html을 뜯어봐야 한다는 단점이 있다. Virtual DOM은 실제 DOM을 추상화한 개념으로, 변화가 많은 실제 DOM에서 직접처리하는 방식이 아닌, Virtual DOM과 메모리에서 미리 처리하고 저장한 후, 실제 DOM과 동기화 하는 프로그래밍 개념인 것이다. 예들 들어서 red apple yellow banana yellow mango 위와 같은 코드를 one two three 으로 변경해야 한다고 생각해보자. 비효율..
Reflow 생성된 DOM 노드의 레이아웃 속성 (너비, 높이, 위치) 등 변경 시, 영향 받은 모든 노드의 (자신, 자식, 부모, 조상) 수치를 다시 계산(recalculate)하여, 렌더 트리를 재생성하는 과정이며, 또한, reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 repaint 라고한다. reflow/repaint 가 발생하는 순서 클릭 이벤트 핸들러 실행 변경된 스타일 수치 계산 실행 (recalculate) Layout (Reflow 과정 수행) Paint (Repaint 과정 수행) reflow가 일어나는 속성들은 다음과 같다. position width height left top right bottom margin padding border borde..
자바스크립트는 프로토타입 기반 언어이다. 최근 ECMA6에 있는 class 문법은 문법이 추가되었다는 것이지, 자바스크립트가 클래스 기반 언어로 바뀌었다는 뜻이 아니다. 그저 프로토타입을 기반으로 흉내내도록 구현된것이다. function Person() { this.eyes = 2; this.nose = 1; } const kim = new Person(); const park = new Person(); 위 코드를 생각해보자. kim, park은 eyes, nose를 공통적으로 가지고 있다. 그리고 메모리에는 eyes, nose가 2개씩 할당될 것이다. 그럼 인스턴스를 100개 만든다면 200개의 변수가 메모리에 할당될 것이다. function Person() {} Person.prototype.eye..
