React, Vue 같은 라이브러리나 프레임워크들을 쓰는 목적은 여러가지가 있겠지만 하나의 페이지에서 데이터를 동적으로 변경하기 위함(SPA)도 있을 것 이다. Vue에 대해 공부하던 중 Vue는 일반 객체를 제외한 반응형 객체들은 변경사항을 추적하기 위해 Proxy 객체로 변환한다는 사실을 알게 되었고 관련된 개념이 모자라 간단히 정리해보려고 한다.반응성 (Reactivity)Vue 공식 문서에선 반응성(Reactivity)에 대해, "변경"에 대한 제어를 선언적으로 수행하는 프로그래밍 패러다임이라고 나와 있다. 간단히 말해 내부에서 변경을 어떤식으로 이루어지게 하는지보다 해당 방식을 통해 변경을 이뤄지게 하겠다에 대해 중점이 맞춰진 방식이란 말이다. (여기서 선언형 프로그래밍이 이해가 되지 않는다면..

ES6 Class 문법에 대한 정리에 앞서.. 자바스크립트는 객체 기반 또는 프로토타입 기반(Prototype-based) 언어입니다. 그래서 클래스 기반(Class-based)의 객체지향 언어들과는 달리 프로토타입 체인과 클로저 등을 이용하여 상속과 캡슐화같은 개념들을 만들어 냈습니다. 하지만, ES6(ECMAScript 6)에서 Class문법이 추가되었습니다. 이 문법에 대해서 syntax sugar인가 아닌가에 대해 다양한 의견들이 있습니다. 이에 대해선 스스로 다양한 글을 읽고 판단하시는 것을 추천합니다. 자바스크립트에 Class문법이 추가되었다고 했지만, 사실은 Class로 선언된 객체의 속성을 알아보면 Function이라 나옵니다. (더보기 참고) 더보기 // ES5 function Human..

const SETTING = { name: "LUCKY LOTTO!", count: 6, maxNumber: 46, }; function getRandomNumber() { const lotto = new Set(); // 파라미터에서 디스트럭쳐링 할 수도 있음. const { count, maxNumber } = SETTING; while (lotto.size < count) { // 0~46이 아니라 실제 로또처럼 1~45가 나오게 끔 함. lotto.add(Math.floor(Math.random() * (maxNumber - 1)) + 1); } console.log(lotto); } getRandomNumber(); lotto.has()를 써서 중복검사 처리를 할려다가 lotto.size를 이용..

Map 이란 Map()을 통해 Map을 생성할 수 있습니다. Map은 자바스크립트에 내장된 표준 객체(Standard Built-in Object) 이며, key-value 쌍의 컬렉션입니다. Map의 특징 key를 사용해서 value를 get, set할 수 있습니다. key 값은 중복이 될 수 없으며, 하나의 key에는 하나의 value만 올 수 있습니다. Object와의 차이점 Object는 String과 Symbol 타입만 key로 사용가능 하지만, key는 String, Symbol, Object, Function을 사용할 수 있습니다. Map은 Object와 달리 iterable 입니다. Map의 메서드 WeakMap 이란 key가 약하게 참조되는 key-value 쌍의 컬렉션입니다. Map과의..

SET 이란 new Set() 을 통해 Set을 생성할 수 있습니다. Set은 자바스크립트에 내장된 표준 객체(Standard Built-in Object) 이며, 중복된 값을 허용하지 않는 데이터 집합입니다. 그렇기 때문에, Set에 중복된 값을 넘기게 되면 Set은 알아서 중복된 값을 제외한 배열을 생성합니다. let myset = new Set([1, 2, 3, 4, 1, 2, 1, 5, 6, 7, 7, 8]); console.log(myset); // Set(8) {1, 2, 3, 4, 5, 6, 7, 8} SET의 장점 Set은 중복을 허락하지 않기 때문에, 이미 중복된 값이 존재하는지 체크하지 않아도 됩니다. const myset = new Set([1, 2]); console.log(myse..

디스트럭쳐링(Destructuring) 이란? 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것입니다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용합니다. 배열 디스트럭쳐링 (Array Destructuring) // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; // ES6 // 배열의 인덱스를 기준으로 값이 저장됩니다. const arr = [1, 2, 3]; const [one, two, three] = arr; 객체 디스트럭쳐링 (Object Destructuring) // ES5 var obj = { firs..

1.str.startsWidth() startsWidth 메서드는 해당 문자열의 시작 단어와 매개변수로 받는 문자열이 일치하는지 판단하기 위해서 사용합니다. let str = "Hello World"; let match = "Hello"; console.log(str.startsWidth(match)); // true 2.str.endsWidth() endsWidth 메서드는 해당 문자열의 마지막 단어와 매개변수로 받는 문자열이 일치하는지 판단하기 위해서 사용합니다. let str = "Hello World"; let match = "World"; console.log(str.endsWidth(match)); // true 3.str.includes() includes 메서드는 해당 문자열의 내부에 매개..