코드메모장

흔히 Redux 와 Vuex 에서 사용하는 디자인패턴이다. 등장배경 MVC (Model, View, Controller) 패턴의 단점을 보완하고 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 예측가능성을 높이기위함 구조 Action 사용자 측에서 Action의 Type 과 새로운 데이터 payload 를 묶어서 dispatcher 에 전달하는 역할 Dispatcher 데이터들의 중앙허브 라고 할 수있다. Dispatcher는 들어오는 Action 객체 정보를 받아 실제로 어떤 행동을 할지 결정하는 곳이다. React Hook 중 useReducer 로 간단하게 dispatcher 를 사용할 수 있다. Store Store는 애플리케이션의 모든 상태와 관련 로직을 가지고 있다. ..

이터러블이란 순회가능한 데이터를 말한다. 이터러블은 Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체이다. ( = 이터러블 프로토콜 ) ES6 이전의 순회 가능한 데이터 컬렉션들은 통일된 규약없이 각자 나름의 구조를 가지고 다양한방법으로 순회가 가능했다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하였다 배열,문자열,Map,Set 등은 이터러블인데 콘솔로 찍어보면 프로토타입 체인을 통해 심볼.이터레이터 메서드를 상속 받고있다. 이터러블객체는 for..of문 뿐만아니라 스프레드 문법과 배열디스트럭처링 할당이 가능하다. const array = [1,2,3]; // 배열은 Array.prototype..

Symbol 은 Javascript 의 원시형 데이터 타입이며 ES6버전에 새롭게 추가되었습니다. '심볼(symbol)'은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용합니다. 보통 객체 프로퍼티에 키를 고유하게 설정함으로써 프로퍼티키의 충돌을 방지하기 위해서 사용한다. 객체의 하위호환성을 유지하면서 표준을 확장한다든지, 고유한 상수값을 만드는 데 사용할 수 있다. 서드파티코드나 라이브러리등에서 객체의 값을 추가할때 심볼을 통해서 프로퍼티를 추가하게되면 충돌걱정 없이 값을 추가할수 있다. 심볼을 만들때 심볼이름이라 불리는 설명을 붙일 수 있습니다. // 심볼 id에는 "hi"라는 설명이 붙습니다. let hi = Symbol("hi"); console.dir(hi); // Sym..

Map 이란? : Key, Value 형식으로 저장할 수 있는 참조형 데이터 타입 객체만으로 해결하기 힘든 부분들을 위해서 ES6 에서 새롭게 Map 등장하였다. const user = new Map([ ['name', 'ho'], ['age', 10], ['major', '컴퓨터'], ]) console.log(user); // Map(3) {'name' => 'ho', 'age' => 10, 'major' => '컴퓨터'} 주요 메서드 및 프로퍼티 new Map() // map을 만든다 map.set(key, value) // key를 이용해 value를 저장한다 map.get(key) // key에 해당하는 값 반환. key가 존재하지 않다면 undefined를 반환 map.has(key) // k..

Javascript 의 데이터 타입는 크게 두가지로 나뉜다. 기본형 (원시형) Number (8 byte) String (글자당 / 영문 1 byte, 한글 2byte) Boolean (1 byte) null undefined Symbol 참조형 ( Object ) Object 의 하위 분류 Array Function Date RegExp (정규표현식) Map, WeakMap Set, WeakSet 왜 Javascript 의 숫자타입은 다른 정적언어 (Java, C 등) 과 다르게 데이터타입이 하나밖에 없을까? (Java 의 경우 short , int , long 등 정수형타입 뿐만아니라 float 등 다양한 숫자타입이 있음) Java와 C 같은 언어가 나왔을시기엔 메모리 용량이 부족했던 시절이였기에 타..

선언된 변수나 함수가 왼쪽 메모리 힙에 올라가고 함수를 호출하게되면 콜 스택에서 stack 구조로 (LIFI) 실행됨

javascript 를 공부하다가 문득 드는 생각이 있었다. addEventListener 와 onclick 이다. 비교대상을 onclick 으로해서 click 이벤트만 해당되는 궁금증은 아니다. 나는 인라인 형식으로 onclick 을 자주 사용해 왔다. 드림코딩 엘리님의 강의를 보다보니 onclick 은 사용하지않고 addEventListener 만 사용하시길래 궁금증이 생겼다. 그리하여 찾아본 스택오버플로우.. https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick addEventListener vs onclick What's the difference between addEventListener and onclick? var ..

객체 끼리 값을 비교 해서 다른 값만 끄집어내야하는 일이 생겼다.. 예제 코드.. testA 와 testB를 testB기준에서 비교하려고한다. (testA = 변경값 , testB = 원본값) 객체의 객체.. 즉 뎁스 상관없이 다른? 값을 끄집어내야한다. 그래서 만든 재귀 함수를 이용한 비교 코드이다.. 비교할 값 두개를 받아와서 값이 객체가 아닐시는 객체간의 값을 비교해서 다를시 새로운 객체 변수에 담는다 만약 그 객체안의 값이 객체 일시 재귀호출 을 통해 다시한번 돌리고 리턴받은 depsObj 의 값의 key 개수가 0이 아닐때만 값을 넣는다 재귀함수를 통해서 뎁스 상관없이 객체일때는 계속 비교가 가능하다.. 주의 ) javascript typeof 는 배열 또는 null 일때도 object 를 리턴..

개발서적 리팩토링 개정판 (2판) 을 읽다보니 반복문 안에 조건문을 넣어 반복문을 작성할때 filter 와 map 을 사용해서 파이프라인 연산으로 바꿔서 반복문을 작성 하면 좋다고 한다. names 라는 배열 안에 특정한 조건을 거친 값만 넣는다고 한다면 기존 반복문 + 조건문은 이러한식으로 names 에 push 했었다면.. filter 와 map 으로 names 에 값을 넣는 방법을 사용하도록하자 확실히 가시성이 좋아진것같다 .. 끝.. Tip ) 각 반복문들의 성능 을 알고싶다면 https://daesuni.github.io/Loop-performance/