dom
-
[Javascript] 모던자바스크립트 딥 다이브 6일차 (~753p)웹/JavaScript 2023. 1. 27. 08:47
35. 스프레드 문법 배열 리터럴 내부에서 사용하는 경우 1. concat es5에서 2개의 배열을 1개의 배열로 결합하고 싶은 경우 배열 리터럴만으로 해결할 수 없고 concat 메서드를 사용해야 한다. arr.concat([3,4]) 2. splice const arr = [1,2] const arr2 = [3,4] arr.splice(2,0,arr2) //[1,2,[3,4]] 3. 스프레드 문법 const arr = [1,2] const arr2 = [3,4] arr.splice(2,0,...arr2) // [1,2,3,4] 단, 유사 배열 객체는 문법의 대상이 될 수 없다. const object1 = { 0 : 1, 1 : 2, length : 2 }; const arr = [...object1..
-
[디자인패턴] 전략 패턴, 옵저버 패턴,상속,구현,프록시 객체,옵저버,Dom,주체CS/디자인 패턴 2023. 1. 17. 18:55
디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 "규약" 형태로 만들어 놓은 것을 의미 종류는 아래와 같다. 싱글톤 패턴 팩토리 패턴 전략 패턴 옵저버 패턴 프록시 패턴과 프록시 서버 이터레이터 패턴 노출모듈 패턴 MVC 패턴 MVP 패턴 MVVM 패턴 전략 패턴 전략 패턴은 정책 패턴이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 '직접' 수정하지 않고 전략이라고 부르는 '캡슐화한 알고리즘'을 컨텍스트안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴이다. 더보기 컨택스트란? 프로그래밍에서의 컨텍스트는 상황, 문맥, 맥락을 의미하며, 개발자가 어떠한 작업을 완료하는데 필요한 모든 관련 정보를 말한다. 옵저버 패턴 주체가 어떤 객체의..
-
[Javascript] DOM, Document Object Model웹/JavaScript 2023. 1. 15. 09:28
예제의 웹페이지 👇 소스 보기로 HTML 코드 확인 add_to_queue 새 창에서 열기 document 요소 확인해 볼 것 // DOM 구조도로 출력됨 document; Object.getPrototypeOf(document); 💡 아래의 프로퍼티로 들어가면 인스턴스 형태로 확인 가능 globalThis; chilren 프로퍼티로 타고들어가 볼 것 - DOM 구조도 반영 확인 HTML 이하 노드들 재귀적으로 출력 // document 내에 html 태그 요소를 선택하는 코드 const html = document.querySelector('html'); console.log(html); // DOM 형태로 출력 console.log(html.children); function getNameAndC..