DOM 활용 (CRUDA) DOM의 기초적으로 활용하기 위해서 Create (생성) / Read (읽기) / Update (갱신) / Delete (삭제) / Append (적용) 하는 법을 알아보겠습니다. 생성 (Create) // createElement const oneDiv = document.createElement('div'); // oneDiv 변수에 tag를 생성한다. console.log(oneDiv); // // createTextNode const textNode = document.createTextNode('Banana'); 읽기 (Read) // querySelector // 입력한 선택자와 일치하는 문서 내의 첫 번째 요소를 반환한다. // 일치하는 요소가 없다면 null을 반..

DOM (문서 객체 모델) 이란? (Document Object Model) DOM 구조 자바스크립트의 DOM은 트리구조를 띄고 있습니다. // 트리 자료구조 (tree data structure) 트리 자료구조는 노드들의 계층 구조로 이루어진다. 즉, 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조(부자, 형제 관계)를 표현하는 비선형 자료구조를 말한다. 트리 자료구조는 하나의 최상위 노드에서 시작한다. // 루트 노드 (root node) 최상위 노드를 말하고, 최상위 노드는 부모 노드가 없다. 루트 노드는 0개 이상의 자식 노드를 갖는다. // 리프 노드 (leaf node) 자식 노드가 없는 노드를 말한다. HTML 요소를 JavaScript의 Object처럼 조작할 수 ..

every // every (el => el > 2); // every (el, index, arr); // 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하고, // 콜백 함수의 반환값이 모두 참이면 true, 하나라도 거짓이면 false를 반환한다. // (AND랑 비슷하다.) // 반환값으로는 Boolean 타입으로 반환한다. // 호출한 배열이 빈배열[]인 경우 true를 반환한다. [5, 10, 15].every(el => el > 3); // true [5, 10, 15].every(el => el > 10); // false ['apple', 'banana', 'mango'].every(el => el === 'banana'); // false [].every(el =..

고차 함수를 사용하는 이유 (HOF : Higher-Order Function) 추상화를 통한 효율성 증대 때문이다. map, filter, reduce는 자주 사용되므로 반드시 익히자!! ★ map // map((el) => el * 2); // map(el, index, arr); // 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고, // 호출된 콜백함수의 반환값들로 구성된 새로운 배열을 반환한다. // (= 배열의 처음 요소부터 마지막 요소까지 하나씩 매개변수에 입력하여 // 모든 요소를 조건에 따른 결과값을 새로운 배열에 모아서 리턴한다.) // 원본 배열을 변경하지 않는다. // 매핑(mapping) : 배열의 요소를 map 메서드을 통하여 다른 값으로 적용하여 새로운..