2023-10-17 본 캠프 9일차 / 28일차 TIL

2023-10-17 본 캠프 9일차 / 28일차 TIL

 

내일배움캠프 : JavaScript 문법 종합반 5주차

1. DOM (Document Object Model)

1-1. 자바스크립트가 생긴이유

• 현재는 활용 범위가 높아졌지만 본래는 브라우저에서 사용하기 위한 언어
• 웹페이지를 동적으로 만들기 위한 언어
• HTML과 CSS는 구조화를 위한 것으로, 동적인 부분과는 거리가 멀다.

1-2. 웹페이지가 뜨는 과정

1. 클라이언트가 서버에게 요청 (request)
2. 서버로부터 응답을 받음 (response)
   • 이 응답의 형태는 html 문서 형태
3. 브라우저가 HTML 문서를 해석 (parsing)
   • 브라우저에는 기본적으로 렌더링 엔진이 있다.
   • 랜더링이라는 것은 서버에서 받아온 html 문서를 해석 한다는 것이다.
   • 해석이 필요한 이유는 html 문서를 자바스크립트에서 이해할 수 없기 때문이다.
   • 해석이 완료되면 자바스크립트가 이해할 수 있는 DOM Tree가 구성된다.
   • HTML 문서 뿐만아니라 CSS파일까지 해석하여 최종적으로 RenderTree를 구성한다.
4. RenderTree 기반 레이아웃 계산, 페인팅 과정 시작

DOM은 브라우저에 기본적으로 내장되어있는 API이다.

API

API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 한다. 시스템과 사용자 간의 인터페이스 역할을 한다고 볼 수 있다.
브라우저의 경우에도 기본적으로 DOM과 관련된 API를 제공함으로서 DOM 객체에 접근할 수 있도록 도와준다.

결론적으로 DOM은 자바스크립트가 이해할 수 있도록 모델링 한 것을 뜻한다.

1-3. DOM은 브라우저가 아닌 환경에서도 활용할 수 있을까?

DOM은 브라우저 환경에서만 사용가능하다. (why? 브라우저에 내장되어있기 때문)
따라서 우리는 다음 두가지를 할 수 있다.

1. DOM 요소에 "접근" 할 수 있다.
2. DOM 요소를 "제어" 할 수 있다.
   
   
   

1-4. DOM은 Node를 가진다.

DOM tree 상 발생하는 모든 요소들이 Node이다. (html body h1...)

각각의 Node들은 모두 속성과 메서드를 가지고 있다.

ex) document.getElementById('demo').innerHTML = "Hello World!";

1. .getElementById() => 메서드
2. .innerHTML => 속성 (프로퍼티)
   
   
   

---

2. Class

자바스크립트에서 Class는 ES6에서 처음 도입되었다.

왜이리 늦게 도입이 되었나?

• 다른 언어들은 대부분 클래스 기반의 프로그래밍 개발기법을 사용한다.
• 다른 언어를 개발하던 개발자들이 자바스크립트를 클래스 처럼 개발하려고 노력하다 보니 자바스크립트도 그 필요성을 느끼고 니즈를 반영.

2-1. 인스턴스 개념

1. 클래스는 설계도이다.
   설계도가 있어야 규격대로 만들어 낼 수 있다.
2. 클래스를 기반으로 만들어진 사물은 인스턴스이다.
   책상 설계도가 클래스라면, 해당 설계도를 기반으로 만들어진 책상은 인스턴스이다.

결론적으로 클래스 역시 객체를 생성하기 위한 방식이다.

기본구조

// 클래스 정의
class (대문자로 시작하는 클래스명) {
    // 기본상태를 나타냄 ()
    constructor(매개변수){}
    // 동작을 나타냄
    메서드명 () {}
}
// 인스턴스 생성
const classTest1 = new (대문자로 시작하는 클래스명)(매개변수);
// 메서드 실행
classTest1.메서드명();

 

2-2. extends로 상속가능

// 상속 (Inheritance)
// Class -> 유산으로 내려주는 주요 기능!
// 부모 <-> 자식
// 동물 전체에 대한 클래스
class Animal {
    constructor (name) {
        this._name = name;
    }
    // 메서드 짖다.
    speak () {
        console.log(`${this._name} says!`)
    }
}
// extends > 상속
class Dog extends Animal {
    // 상속받은 메서드나 constructor를 재정의 할 수 있음
    // overriding 개념
    speak () {
        console.log(`${this._name} barks!!`);
    }
}
const cuttyPuppy01= new Dog('choco');
cuttyPuppy01.speak();

 

상속을 받을 때 constructor나 메서드를 오버라이딩 할 수 있다.

이 때 부모의 constructor을 의미하는 super()를 사용한다.

class Animal {
    constructor (name, age, bark) {
        this._name = name;
        this._age = age;
        this._bark = bark;
    }
    speak () {
        console.log(`${this._name} says!`)
    }
}
// extends > 상속
class Dog extends Animal {
    // bark 속성의 값은 모두 '멍멍'이기 때문에 constructor에서 제외
    // color라는 추가 속성을 주기 위해 constructor에 추가
    constructor (name, age, color) {
        // bark자리는 '멍멍'으로 고정된다.
        super(name, age, '멍멍');
        // 원래처럼 선언
        this._color = color;
    }
    speak () {
        console.log(`${this._name} barks!!`);
    }
}
const cuttyPuppy01= new Dog('choco');
cuttyPuppy01.speak();

 

2-3. static으로 인스턴스 생성없이 메서드 사용가능

// Static Method (= 정적 메소드)
// Class => 객체를 만들기 위해 사용한다
// 다량으로, 안전하고, 정확하게 제작
class Calculator {
    constructor(a,b){
        this.a = a;
        this.b = b;
    }
    // static을 사용하면 인스턴스 생성없이 Calculator.add(a,b) 형태로 사용가능
    static add (a,b){
        console.log("[계산기] 더하기를 진행합니다.");
        return a+b;
    }
    static substract(a,b){
        console.log("[계산기] 빼기를 진행합니다.");
        return a-b;
    }
}
console.log(Calculator.add(3,5));
console.log(Calculator.substract(3,5));

---

3. Closure

개념

렉시컬환경의 outer에서는 함수가 선언된(실행x) 렉시컬 환경 정보가 저장된다.

클로저 inner함수보다 outer함수가 더 오래 유지되며 inner함수에서는 outer 함수의 요소를 참조할 수 있다.

어디에 사용할까?

상태를 안전하게 변경하고 유지할 때 사용

상태를 안전하게 은닉한다.
의도적이지 않은 값 변경 방지

const increase = (function(){
    let num = 0; 
    // 클로저
    // return에 선언된 function은 외부함수의 렉시컬환경을 outer에 저장
    // let num 참조가능
    return function (){
        return ++num;
    }
})();
console.log(increase());
num = 100;
console.log(increase());
console.log(increase());