typescript-kr을 보고 공부하고 정리한 글 입니다. 유틸리티 타입 1. Partial 제네릭으로 받은 T 의 모든 타입을 선택적으로 만든다. type Test = { name: string; desc: string; } const obj: Partial = { name: 'test', desc: 'test desc' } 2.Readonly 읽기 전용으로 만듬 type Test = { name: string; desc: string; } const obj: Readonly = { name: 'test', desc: 'test desc' } // Error readonly property obj.name = 'asdf'; 3. Record K → object name T → object value ..

Immer : 독일어로 Always(항상)이라는 뜻. immer는 항상 불변성(immutable)을 유지할 수 있도록 관리해주는 오픈소스 라이브러리 입니다. React에 국한되지않고 Javascript의 **변경할 수 없는 데이터 구조**를 사용해야하는 모든 곳에서 사용할 수 있습니다. 불변성(Immutable) 저기 변경할 수 없는 데이터 구조 가 무엇인가를 먼저 살펴봅시다. Javascript는 변경할 수 없는 원시값 이라는게 존재합니다. 예를들어 let을 사용해서 데이터를 저장하고 변경한다는걸 생각해봅시다. let data = "DATA 입니다." // 1 data = "변경된 DATA 입니다." // 2 console.log(data) // 변경된 DATA 입니다. 첫번째 data에 값이 할당되는..

라이브러리 knockout MVVM(model, view, view Model) 패턴과 템플릿을 통해 간단하게 동적 UI를 구성할 수 있게 해주는 라이브러리 backbone client side에 간단하게 MVC패턴을 적용 시킬 수 있는 경량 프레임워크 자바스크립트의 핵심 개념 객체 JS의 거의 모든 것은 객체이다. boolean, number, string, null, undefined 은 객체가 아니기 때문에 "거의" 라고 표현함. 제외한 나머지는 모두 객체임. 하지만 null, undefined를 제외한 나머지는 객체로 다룰 수 있음. 함수 JS에서 함수도 객체로 취급한다. 일반 객체보다 조금 더 많은 기능이 있는 객체 라고 이해하면 될 듯. 프로토타입 모든 객체는 숨겨진 link인 prototyp..

Javascript Event 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent 객체를 전달받습니다. stopPropagation() 와 preventDefault()를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. SyntheticEvent는 풀링됩니다. 성능상의 이유로 SyntheticEvent 객체는 재사용되고 모든 속성은 이벤트 핸들러가 호출된 다음 초기화됩니다. 따라서 비동기적으로 이벤트 객체에 접근할 수 없습니다. 주의 비동기적으로 이벤트 속성을 참조하고 싶다면 이벤트 객체의 event.persist() 를 호출하세요. 합성 이벤트 풀에서 제거되고 사용자의 코드에서 참조가 가능해집니다. e.p..

Predicate filter(users, function(user){return user.id === 3}) 위와 같이 썻을때 filter 함수가 어떤 것일까. 위와 같이 함수를 작성했을때, 두번째 인자로 오는 function 을 predicate 라고 한다. 보통 함수는 일정한 로직을 거쳐 답을 내게 된다. 그 안에서 사용하는 조건이나 판별식은 동일 할 수 밖에 없다. 하지만 함수형 프로그래밍 에서 predicate 를 사용한다면 이야기가 달라진다. 함수는 흐름 만을 제공할 뿐 결과를 도출해 내는 판별식은 전적으로 predicate 에게 일임한다. 이렇게 우리는 조금 유연하게 함수를 작성할 수 있고 재사용성을 높일 수 있다. //예시 함수 function filter(arr, predicate){ l..

본문은 inflearn의 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 를 공부하면서 정리한 내용입니다. for of - 순회 하기 var data = [1,2,undefined, NaN, null, ""] //for each data.forEach(function(value){ console.log(value); }); // for-in // for-in 은 Array.prototype.getIndex = function(){} 으로 array에 prototype을 추가하게 되면 이 값 또한 data에서 인식하여 function이 출력되게 된다. for(let idx in data){ console.log(data[idx]) } //for-of //따라서 for-in이 아닌 for-o..