TIL - 20251206

1206 JavaScript 기초 복습 (4/4): DOM, 이벤트, ES6+ 문법

---

✅ 1. DOM (Document Object Model)

• DOM은 웹 브라우저가 HTML 문서를 해석하여, JavaScript가 문서의 구조, 스타일, 내용과 상호작용할 수 있도록 객체(Object) 형태로 모델링한 것입니다. 즉, DOM은 JavaScript와 HTML 사이의 인터페이스(API) 역할을 합니다.

➕ DOM 요소 선택 (Selecting Elements)

• JavaScript로 HTML 요소를 조작하려면, 먼저 원하는 요소를 선택해야 합니다.

메서드	설명
document.getElementById('id')	id 속성으로 요소 하나를 선택. (가장 빠름)
document.getElementsByClassName('class')	class 속성으로 여러 요소를 HTMLCollection으로 선택.
document.getElementsByTagName('tag')	태그 이름으로 여러 요소를 HTMLCollection으로 선택.
document.querySelector('selector')	CSS 선택자 문법으로 가장 먼저 일치하는 요소 하나를 선택. (매우 유용)
document.querySelectorAll('selector')	CSS 선택자 문법으로 일치하는 모든 요소를 NodeList로 선택.

➕ DOM 요소 조작 (Manipulating Elements)

• 선택한 DOM 요소의 내용을 변경하거나, 스타일을 바꾸고, 새로운 요소를 추가/삭제할 수 있습니다.

• 내용 및 속성 변경:

  • element.textContent = 'New text': 요소의 텍스트 내용만 변경.
  • element.innerHTML = '<h1>New HTML</h1>': 요소 내부에 HTML 코드를 삽입. (보안 주의)
  • element.setAttribute('href', 'https://new.com'): 속성 값 변경.

• 스타일 변경:

  • element.style.color = 'red': 인라인 스타일을 직접 변경.
  • element.classList.add('active'): 클래스 추가.
  • element.classList.remove('hidden'): 클래스 제거.
  • element.classList.toggle('highlight'): 클래스 토글(있으면 제거, 없으면 추가).

• 요소 생성 및 추가/삭제:

  • document.createElement('div'): 새로운 요소를 생성.
  • parentElement.appendChild(childElement): 자식 요소로 추가.
  • element.remove(): 요소 자신을 제거.

---

✅ 2. 이벤트 (Events)

• 이벤트는 웹 페이지에서 발생하는 모든 종류의 상호작용이나 사건을 의미합니다. (e.g., 클릭, 마우스 오버, 키보드 입력, 페이지 로딩 완료 등)
• 이벤트 핸들링은 이러한 이벤트가 발생했을 때, 특정 JavaScript 코드를 실행하도록 연결하는 과정입니다.

➕ 이벤트 리스너 추가 (addEventListener)

• element.addEventListener('eventType', eventHandlerFunction) 메서드를 사용하는 것이 가장 표준적이고 권장되는 방법입니다.

• 장점: 하나의 요소에 여러 개의 이벤트 핸들러를 등록할 수 있습니다.

  const myButton = document.querySelector('#my-button');
  
  function handleClick() {
    alert('Button was clicked!');
  }
  
  // 버튼에 'click' 이벤트가 발생하면 handleClick 함수를 실행하도록 등록
  myButton.addEventListener('click', handleClick);

• 이벤트 객체: 이벤트 핸들러 함수는 이벤트 객체를 첫 번째 인자로 받습니다. 이 객체에는 이벤트에 대한 상세 정보(e.g., event.target - 이벤트가 발생한 요소, event.key - 눌린 키보드 키)가 담겨 있습니다.

---

✅ 3. ES6+ 주요 문법 (Modern JavaScript)

• ES6(ECMAScript 2015) 이후 도입된 현대적인 문법들은 코드를 더 간결하고, 가독성 높고, 강력하게 만들어 줍니다.

1. let / const: var를 대체하는 블록 스코프 변수 선언. (복습)

2. 화살표 함수 (Arrow Functions): (a, b) => a + b (복습)

3. 템플릿 리터럴 (Template Literals):

   • 백틱(`)을 사용하여 문자열을 만듭니다.
   • 문자열 내부에 ${expression} 구문을 사용하여 변수나 표현식을 쉽게 삽입할 수 있으며, 여러 줄의 문자열 작성이 매우 편리합니다.

     const name = 'World';
     const greeting = `Hello, ${name}!
     This is a multi-line string.`;

4. 구조 분해 할당 (Destructuring Assignment):

   • 배열이나 객체의 속성을 분해하여, 그 값을 개별 변수에 쉽게 할당할 수 있게 해주는 문법입니다.

     // 객체 구조 분해
     const person = { name: 'Alice', age: 25 };
     const { name, age } = person; // name = 'Alice', age = 25
     
     // 배열 구조 분해
     const fruits = ['Apple', 'Banana'];
     const [first, second] = fruits; // first = 'Apple', second = 'Banana'

5. 전개 구문 (Spread Syntax):

   • 점 세 개(...)를 사용하여 배열이나 객체의 모든 요소를 "펼쳐서" 개별 요소로 만듭니다.

   • 배열이나 객체를 불변성(immutability)을 유지하며 복사하거나, 합치는 데 매우 유용합니다.

     const arr1 =;
     const arr2 =;
     const combinedArr = [...arr1, ...arr2]; //
     
     const obj1 = { a: 1, b: 2 };
     const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

6. Promise와 async/await: 비동기 처리를 위한 문법. (복습)

---

📌 요약

• DOM은 JavaScript가 HTML 문서를 객체처럼 조작할 수 있게 해주는 인터페이스입니다. querySelector로 요소를 선택하고, textContent, classList 등으로 내용을 변경합니다.
• 사용자의 상호작용은 이벤트로 감지하며, addEventListener를 사용하여 특정 이벤트에 대한 핸들러 함수를 등록하는 것이 표준적인 방법입니다.
• ES6+의 현대적인 문법들은 JavaScript 개발의 생산성을 크게 향상시킵니다.
  • 템플릿 리터럴은 문자열 처리를, 구조 분해 할당은 데이터 접근을, 전개 구문은 배열/객체 복사 및 병합을 매우 편리하게 만들어 줍니다.
  • 이러한 문법들은 React, Vue 등 현대 프론트엔드 프레임워크에서 핵심적으로 사용되므로 반드시 숙지해야 합니다.