각 프로그래밍 언어별 코드 에디터   1. 라이브러리 다운라이브러리를 다운로드하지 않고 CDN으로 불러올 수 있지만, 현재 버전을 유지하기 위해 라이브러리를 직접 다운로드하여 프로젝트에 설정하였다. https://codemirror.net/ CodeMirrorIn-browser code editorcodemirror.net  1-1) [주소 접속] -> [Version 5] 클릭    1-2) [Get the current version] 클릭   2. 필요 라이브러리 폴더 설정 2-1) 파일 목록압축을 풀면 아래 사진고 같이 나오지만, 모든 파일을 프로젝트에 넣는것티 아닌 필요에 따른 파일만 집어넣는다.     2-2) 프로젝트에 필요 폴더 넣기내 프로젝트의 Resources 위치에 [codemirro..

Proxy 프록시 객체란? 프록시(proxy) 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며 자바스크립트에서 프록시 객체는 두 개의 매개변수를 가진다. 1. 사용 방법 const proxy = new Proxy(target, handler) target : 프록시할 대상 handler : 프록시 객체의 traget 동작을 가로채서 정의할 동작들이 정해져 있는 함수 Handelr 작동 시점 get 프로퍼티를 읽을 때 set 프로터티에 값을 쓸 때 has in 연산자가 작동할 때 deleteProperty delete 연산자가 작동할 때 apply 함수를 호출할 때 constructor new 연산자가 작동할 때 getProtot..

1. includes() 특정 값 포함 여부 반환 // 전체 포함여부 Boolean 반환 'abzcd'.includes('z'); // 2번째 인덱스 부터 zcd중 포함여부 반환 'abzcd'.includes( 'z', 2 ) 2. findIndex() 값을 찾는 조건을 callback 함수로 전달 const arr = [1, 2, 3, 2]; function findNumberTwo(element) { // 2 를 찾으면 true 반환 if(element === 2) { return true; } } document.writeln(arr.findIndex(findNumberTwo)); 3. indexOf(), lastIndexOf() 일치하는 값 인덱스 찾기 const arr = [1, 2]; // 정..

1. 기본 최대 값, 최소 값 구하기 파라미터 중 최대 값, 최소 값을 구한다. const max = Math.max(1, 2, 3, 4, 5); console.log(max); // 5 const min = Math.min(1, 2, 3, 4, 5); console.log(min); // 1 2. 배열의 최댓값 최소 값 구하기 2-1) Function.prototype.apply() 사용해 구하기 apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출합니다. const numbers = [5, 6, 2, 3, 7]; const max = Math.max.apply(null, numbers); console.log(max); // 7 cons..

sort() sort() 란? JavaScript에 내장되어있는 함수로 배열을 정렬하고 싶을 경우 사용한다. (오름차순, 내림차순) /* sort() 형식 */ function callback() { ... } 배열.sort(); 배열.sort(callback); sort의 인자(Argument)는 전달해도 되고, 안 해도 된다. 1. 1차원 배열 정렬 방법 const arr1 = [2, 1, 3]; const arr2 = ['banana', 'apple', 'orange'] arr1.sort(); // [1, 2, 3] arr2.sort(); // ['apple', 'banana', 'orange'] sort함수에 파라미터가 없으면, 유니코드 순서에 따라서 오름차순으로 정렬된다. 숫자인 경우 배열 요소..

Heap 힙(Heap) 이란? 최댓값 및 최솟값을 찾아내는 연산을 빠르게 하기 위해 고안된 완전 이진트리를 기본으로 한 자료구조로서 다음과 같은 힙 속성을 만족한다. A가 B의 부모 노드 이면, A의 키값과 B의 키값 사이에는 대소 관계가 성립한다. 트리구조이기 때문에 시간 복잡도 O(logN)이 소요된다. 최댓값 최솟값을 빠르게 구하기 찾을 수 있다. JavaScript의 경우 내장 라이브러리에 Heap구조가 없기 때문에 직접 구현해야 한다. (외부 라이브러리로는 적용 가능) 위의 이미지는 1부터 100까지의 정수를 저장한 최대 힙의 예시 모습이다. 모든 부모 노드들이 그 자식 노드들보다 큰 값을 가진다. 1. Heap에서의 부모 이진트리로 부모와 자식 노드가 발생하며, 완전 이진트리가 아니라 반정렬 ..

Set 셋(Set)이란? ES6에 새롭게 추가된 자료구조로 현실 세계를 반영하기엔 객체(Object)와 배열(Array) 만으론 부족해서 맵(Map)과 셋(Set) 이 등장하게 되었다. Set은 중복을 허용하지 않고, 키가 없는 값이 저장된다. 1. Set 주요 메서드 사용 방법 // Set 선언, 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어준다. let set =new Set(iterable) // 값 추가 set.add(value) // 값 제거, 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환한다. set.delete(value) // Set 내에 값이 존재하면 true, 아니면 false를 반환 set.has(value) ..

Map Map Obejct란? ES6에 새롭게 추가된 자료구조로 현실 세계를 반영하기엔 객체(Object)와 배열(Array) 만으론 부족해서 맵(Map)과 셋(Set) 이 등장하게 되었다. Obeject와 Map 차이 1) Map은 객체(Object)와 달리 key를 문자형으로 변환하지 않는다. key엔 자료형 제약이 없다. 2) Map은 값이 삽입된 순서를 기억하여 순서대로 순회를 실시하지만, 객체(Obejct)는 순서를 못 한다. 3) Map을 객체(Obejct)처럼 map [key] 방식으로 사용할 수 있지만, 그렇게 되면 Map을 일반 객체(Object)로 취급하게 된다. 1. Map 주요 메서드 사용 방법 // Map Object 선언 let map = new Map() // let map =..

고차 함수 고차 함수란? 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 1. map() 기존 배열 요소를 가지고 새로운 요소로 변경하여 반환한다. const map_reuslt = [1, 2, 3, 4].map((value, index, array)=>{ console.log(value); // 1, 2, 3, 4 출력 return value*10; // 각 요소에 10을 곱한 값을 배열로 반환 }); console.log(map_reuslt); // [ 10, 20, 30, 40 ] 콜백 함수의 매개변수로 value에 요소 값, index에 인덱스, array에 원본 배열이 들어온다. 각 콜백함수에서 return 하는 값 들으러 새로운 배열을 만들어 반환한다. 2. filter() 기..

고차 함수 고차 함수란? 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 1. every() 콜백 함수에서 배열의 모든 요소가 True이면, true를 리턴 1-1) 기본 형식 array.every(callbackFunction(currentValue, index, array), thisArg) callbackFunction : 콜백 함수 thisArg : this값으로 활용 currentValue : 배열의 현재 값 index : 배열의 현재 값의 인덱스 array : 현재 배열 1-2) 사용 예 let arr = [1,2,3,4,5,6]; const callBack = (val) => val < 6 arr.every(callBack) // 하나라도 false면, false arr.ev..