나디아 성장 일기

이벤트 위임(Event Delegation): 이벤트 버블링을 활용하여 여러 자식 요소에 각각 이벤트 리스너를 붙이지 않고, 상위 요소에서 한 번에 이벤트를 처리하는 방법 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다⭕공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다⭕많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다⭕DOM 수정이 쉬워진다👍 Item 1 Item 2 Item 3   이벤트 위임 순서컨테이너에 하나의 핸들러를 할당핸들러의 event.target을 사용해 이벤트가 발생한 요소..

이벤트 버블링( Event  Bubbling): 이벤트가 가장 안쪽의 요소(이벤트가 발생한 요소)에서 시작하여 상위 요소들로 전파되는 과정요소에 이벤트가 발생하면 해당 요소의 핸들러가 동작 ➡ 이어서 부모 요소의 핸들러가 동작 ➡ 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복 자식 요소 → 부모 요소 → 조부모 요소 ... 최상위 요소 순서addEventListener의 3번 째 인자인 capture 옵션을 false로 설정❗elem.addEventListener(..., {capture: false})  /* form 선택 시 -> formdiv 선택 시 -> div, formp 선택 시 -> p, div, form */    event.target: 이벤트가 정확히 어디서 발생했는지에 대한..

이벤트 핸들링(Event Handling) 핸들러(handler): 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것    이벤트 핸들링 3가지 방법 HTML 속성: HTML 태그 안에 속성으로 할당 (ex. onclick="handler()")- 잘 사용하지 않음❌DOM 프로퍼티 : 이벤트를 함수로 DOM 프로퍼티에 할당(ex. element.onclick = handler)- 복수 할당이 불가능❌메서드 : `addEventListener`, `remoceEventListener`(ex. element.addEventListener(event, handler[, phase]))  이벤트 추가/제거  addEventListener : 특정 이벤트가 발생했을 때 실행될 함수를 등록 elem..

요소 생성 메서드   document.createElement(tagName) : 태그 이름을 사용해 새로운 요소 생성 let div = document.createElement('div')   document.createTextNode(value) : 새로운 텍스트 노드 생성 let textNode = document.createTextNode('안녕하세요.');   element.cloneNode(deep)  : 요소 복제deep==true일 경우, 모든 자손 요소도 복제 삽입 메서드임의의 노드 목록이나 문자열을 넘겨줄 수 있다. 문자열을 넘겨주면 자동으로 텍스트 노드가 만들어진다.  node.append(노드나 문자열): node 끝에 삽입  node.prepend(노드나 문자열): node 맨 앞..

GSAP (The GreenSock Animation Platform): 애니메이션 자바스크립트 라이브러리  Homepage | GSAPGSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.gsap.com    📌 라이브러리 가져오기CDN 방식  Installation | GSAP | Docs & LearningGSAP is "framework agnostic", this means it can be used in React, Webflow, Wordpress, or any other..

속성(Attribute): HTML 요소에 정의된 초기값값은 항상 문자열요소가 처음 로드될 때 정적으로 설정된다.getAttribute(name) 메서드를 사용하여 속성 값을 읽을 수 있다. 프로퍼티(Property): DOM 객체에서 동적으로 제공되는 값JavaScript에서 요소에 접근할 때 이 값은 객체의 프로퍼티로 제공JavaScript 객체로 요소를 조작할 수 있으며, 프로퍼티는 보통 실제 값과 일치DOM 프로퍼티와 메서드는 일반 JavaScript 객체처럼 행동한다. - 어떤 값이든 가질 수 있다. - 대·소문자를 구분한다 ('elem.nodeType'이 아닌, 'elem.NoDeTyPe'는 동작하지 않는다.) - DOM 프로퍼티는 값이 항상 문자열은 아니다. ✨ 브라우저는 웹페이지를 만나면 ..

DOM 노드모든 DOM 노드는 공통 조상으로부터 만들어지기 때문에 노드 종류는 다르지만, 모든 DOM 노드는 공통된 프로퍼티와 메서드를 지원한다. 계층 구조 꼭대기엔 EventTarget이 있는데, Node는 EventTarget을, 다른 DOM 노드들은 Node 클래스를 상속받는다.   instanceof 객체 instanceof 생성자함수: 상속 여부 확인어떤 객체가 특정 타입인지 확인하는 방법alert( document.body instanceof HTMLBodyElement ); // truealert( document.body instanceof HTMLElement ); // truealert( document.body instanceof Element ); // truealert( docum..

DOM (문서 객체 모델, Document Object Model) : 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸다.  document.documentElement =   document.head =   document.body= 브라우저가 아직 document.body를 읽지 않았다면 null이 나올 수도 있다.✨ DOM에서 null 값은 '존재하지 않음'을 의미   노드(Node) : DOM 트리 구조를 이루는 기본 단위 요소 노드 (Element Node): HTML 요소를 나타내는 노드. (ex. , , )텍스트 노드 (Text Node): 요소 노드 안에 들어있는 실제 텍스트를 나타내는 노드. (ex. Hello, World!의 "Hello, World!")주석 노드 (Comment Nod..

BOM (Browser Object Model, 브라우저 객체 모델) : 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체 웹 브라우저를 조작하고 제어할 수 있게 해주는 객체들이 모여 있는 집합체   📌 Window 객체 브라우저 창 alert, confirm, prompt, setTimeout, setInterval    📌 Location 객체 현재 페이지의 URL href, protocol, host, port, search, hash, replace, reload // http://localhost:5500/index.html?type=listing&page=2#titleconst { href, protocol, host, port, search, hash, ..

API (Application Programming Interface): 프로그램 간의 상호작용을 돕는 도구들의 집합 웹 페이지에서 다양한 작업을 수행할 수 있도록 제공하는 도구와 기능들의 모음 자바스크립트의 API를 사용하면 웹 페이지의 동작을 제어하거나, 사용자와 상호작용하거나, 서버와 데이터를 주고받을 수 있다.    📌 브라우저 API: 웹 브라우저가 제공하는 기본 기능을 이용할 수 있게 해주는 API BOM(Browser Object Model) API: 브라우저 창과 관련된 정보를 다루는 API - window 객체를 사용하여 브라우저 창의 크기를 조절하거나, navigator 객체를 통해 사용자의 브라우저 정보를 가져온다.DOM(Document Object Model) API: 웹 페이지..