자바스크립트 기초 문법6

DOM이란?

DOM(Document Object Model)은 웹 페이지의 구조화된 표현을 제공하는 프로그래밍 인터페이스입니다. HTML, XML 문서의 내용과 구조를 객체로 표현하여 자바스크립트 같은 프로그래밍 언어가 웹 페이지의 요소를 동적으로 조작할 수 있게 합니다. 웹 브라우저는 HTML 문서를 읽어들이면 이 문서를 DOM 트리로 변환하며, DOM 트리는 문서의 계층 구조를 반영합니다.

DOM의 주요 개념

1. 노드(Node): DOM 트리의 기본 단위입니다. HTML의 각 요소, 속성, 텍스트 등이 노드로 표현됩니다.
   • 요소 노드: <div>, <p> 같은 HTML 태그.
   • 텍스트 노드: 태그 안의 텍스트 콘텐츠.
   • 속성 노드: HTML 요소의 속성 (id, class 등).
2. DOM 트리: 문서의 구조가 트리 형태로 표현됩니다. 최상위에는 document 노드가 있고, 그 아래로 HTML 태그들이 자식 노드로 연결됩니다.

DOM을 활용한 주요 작업

요소 선택 및 접근: 특정 HTML 요소를 자바스크립트로 선택하고 접근할 수 있습니다.

const element = document.getElementById("myElement"); // id로 요소 선택
const paragraphs = document.querySelectorAll("p");    // 모든 <p> 태그 선택

속성 변경: HTML 요소의 속성이나 내용을 변경할 수 있습니다.

element.innerHTML = "새로운 내용";          // 텍스트 변경
element.style.color = "blue";               // 스타일 변경

 

이벤트 처리: 버튼 클릭 등 사용자 이벤트에 반응하는 동작을 추가할 수 있습니다.

element.addEventListener("click", () => {
  alert("버튼이 클릭되었습니다!");
});

요소 추가 및 삭제: 기존 HTML 구조에 요소를 추가하거나 삭제할 수 있습니다.

const newElement = document.createElement("div");
newElement.textContent = "새로운 요소";
document.body.appendChild(newElement);    // body에 추가

DOM의 역할

-DOM은 웹 페이지가 단순히 정적인 HTML로 존재하는 것이 아니라, 자바스크립트를 통해 동적으로 변경되고 사용자 상호 작용에 반응하는 인터페이스를 제공하는 핵심 역할을 합니다.

 

class

 

1. 클래스 (Class)

JavaScript의 클래스는 객체의 구조를 정의하는 틀입니다. constructor 메서드를 사용하여 속성을 초기화할 수 있습니다. 예를 들어, Person 클래스를 정의해 보겠습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
  }
}

// 클래스 사용
const person1 = new Person('홍길동', 25);
person1.introduce();  // 출력: 안녕하세요, 제 이름은 홍길동이고, 나이는 25살입니다.

.

2. Getter와 Setter

Getter와 Setter는 속성에 대한 접근 제어를 제공합니다. JavaScript에서는 get과 set 키워드를 사용하여 속성을 정의할 수 있습니다.

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  get name() {
    return this._name;
  }

  set name(newName) {
    this._name = newName;
  }
}

// Getter와 Setter 사용
const person2 = new Person('김영희', 30);
console.log(person2.name);  // 출력: 김영희
person2.name = '이철수';
console.log(person2.name);  // 출력: 이철수

this옆에 _가 붙는 이유는 class관련 설명이 끝나고 정리하겠다.

3. 상속 (Inheritance)

상속을 통해 기존 클래스의 속성과 메서드를 물려받을 수 있습니다. extends 키워드를 사용하여 상속하고, super()를 호출해 부모 클래스의 생성자를 사용할 수 있습니다.

class Student extends Person {
  constructor(name, age, studentId) {
    super(name, age);
    this.studentId = studentId;
  }

  study() {
    console.log(`${this.name} 학생이 공부하고 있습니다.`);
  }
}

// 상속 사용
const student1 = new Student('이철수', 20, 'S12345');
student1.introduce();  // 출력: 안녕하세요, 제 이름은 이철수이고, 나이는 20살입니다.
student1.study();      // 출력: 이철수 학생이 공부하고 있습니다.

4. 정적 메서드 (Static Method)

정적 메서드는 특정 인스턴스가 아닌 클래스 자체에서 호출할 수 있는 메서드입니다. static 키워드를 사용하여 정의합니다.

 

class MathUtil {
  static add(a, b) {
    return a + b;
  }
}

// 정적 메서드 호출
console.log(MathUtil.add(3, 5));  // 출력: 8

 

 

JavaScript에서 this 옆에 _(밑줄 또는 언더스코어)를 붙이는 이유

주로 프로그래밍 관례에 의해 결정됩니다. 이는 JavaScript 문법적으로 필수 사항은 아니지만, 다음과 같은 목적을 가지고 자주 사용됩니다.

1. 프라이빗(Private) 변수 표시

JavaScript에서는 변수의 접근성을 직접 제한하는 명확한 구문이 없기 때문에, _를 변수명 앞에 붙여 프라이빗 변수임을 나타내는 관습이 있습니다. 위 코드에서 _name과 _age를 사용한 이유는, 이 변수들이 외부에서 직접 접근하기보다는 getter와 setter를 통해 관리되길 원하기 때문입니다.

2. 캡슐화와 데이터 보호

_를 사용하면 직접 접근을 방지하라는 의도를 코드에 명확히 드러낼 수 있습니다. 이는 객체 지향 프로그래밍에서

캡슐화(encapsulation)를 통해 데이터 보호를 강화하는 방법 중 하나입니다. 프라이빗 변수를 이렇게 설정하면, 직접적인 수정보다 setter를 통해 검증된 값을 넣는 등 데이터의 일관성을 유지하기 좋습니다.

3. JavaScript에서 진짜 프라이빗 필드와의 차이

JavaScript에서 진짜 프라이빗 필드를 사용할 수도 있습니다. 프라이빗 필드는 #를 사용하여 선언할 수 있으며, 같은 클래스 외부에서는 접근이 불가능합니다.

class Person {
  #name;
  #age;

  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }

  get name() {
    return this.#name;
  }

  set name(newName) {
    this.#name = newName;
  }
}

정리

• this._name과 같이 언더스코어를 붙여 프라이빗 변수를 나타내는 것은 외부 접근을 제한하는 의도를 표시하는 관례입니다.
• JavaScript에서 #name처럼 #로 시작하는 변수를 사용하면 완전히 프라이빗 필드가 되어, 외부에서 직접 접근이 불가능합니다.

 

클로저 (Closure)

클로저(Closure)는함수와 함수가 선언된 렉시컬 환경(Lexical Environment)을 함께 저장하여 나중에 해당 함수가 호출될 때도 원래의 환경에 접근할 수 있도록 하는 기능을 말합니다. 클로저는 자바스크립트의 중요한 개념 중 하나로, 특히 함수 내부에서 변수를 보존하거나 외부와는 격리된 상태에서 데이터를 다룰 때 유용합니다.

클로저의 기본 개념

일반적으로 자바스크립트에서는 함수 내부에서 선언된 변수는 함수가 실행된 후 사라지게 됩니다. 하지만 클로저를 사용하면 특정 변수를 계속 유지할 수 있습니다. 클로저는 함수가 외부 함수의 변수에 접근할 수 있게 만들어 외부 함수가 종료된 이후에도 해당 변수를 사용할 수 있도록 합니다.내부함수가 외부 함수보다 더 오래 존재하면 내부 함수는 외부 함수의 변수를 계속 사용할 수 있다.

클로저의 예시

다음은 클로저를 활용하여 특정 값이 유지되도록 한 예시입니다.

function outer() {
  let count = 0;  // 외부 함수의 변수
  
  function inner() {  // 내부 함수
    count += 1;
    console.log(count);
  }
  
  return inner;  // 내부 함수를 반환
}

const counter = outer();  // outer 함수를 호출해 내부 함수 inner를 반환
counter();  // 출력: 1
counter();  // 출력: 2
counter();  // 출력: 3

위 코드에서 outer() 함수는 count라는 변수를 가지고 있고, inner() 함수는 count를 증가시킵니다. outer() 함수는 호출된 후 종료되지만, 반환된 inner() 함수는 count에 계속 접근할 수 있습니다. 이것이 클로저입니다.

 

outer함수를 호출해 inner라는 내부 함수를 counter에 반환하고 사라지지만 inner함수는 외부함수인 outer보다 오래 존재해서 여전히 outer의 count에 접근 할 수 있다. 가비지 콜렉터도 수거해가지 않는다. 클로저가 외부 함수의 변수에 대한 참조를 유지하기 때문.

클로저가 동작하는 원리

• 자바스크립트에서는 함수가 선언될 때의 렉시컬 환경을 기억합니다. 이로 인해 내부 함수가 외부 함수의 변수에 접근할 수 있습니다.
• 외부 함수가 종료된 이후에도 클로저로 인해 내부 함수는 외부 함수의 변수를 유지할 수 있습니다.

클로저의 활용

1. 데이터 보호: 클로저를 사용하면 외부에서 직접 접근할 수 없는 변수를 만들 수 있어 데이터 보호에 좋습니다.
2. 상태 유지: 함수가 호출될 때마다 특정 상태를 유지하게 할 수 있습니다. 예를 들어, 카운터처럼 값을 계속 저장하고 싶을 때 사용됩니다.
3. 모듈 패턴: 클로저는 자바스크립트 모듈 패턴을 구현할 때 자주 사용됩니다. 클로저를 활용해 외부에 노출하고 싶지 않은 변수를 보호하면서도 특정 메서드만 공개할 수 있습니다.

클로저의 단점

클로저는 메모리를 계속 점유하므로 메모리 누수의 원인이 될 수 있습니다. 따라서 클로저가 필요하지 않은 경우에는 사용을 피하거나, 필요가 없어졌을 때에는 null을 할당하여 메모리를 해제해주는 것이 좋습니다.

 

요새 처음보는 개념들과 원래 알던 개념들이 뒤죽박죽 섞여서 쉬운거 같은것도 머릿속에 안들어오고 어려운건 들어올

생각도 없어 보인다. 그래도 계속 보는거밖에 할 수 있는게 없다.