DOM 소개

1-1. javascript가 왜 생겼는데?

a. 브라우저에서 쓰려고 만들어진 JS
넷스케이프라는 회사가 동적인 웹 페이지를 만들기 위해서
브라우저에서 동작하는 가벼운 프로그래밍 언어를 만들기로 한다.

현재는 범위가 너무 커져서 서버나 몽고DB에서도 쓰이지만
원래는 브라우저에서 쓰이기로 한 언어입니다. (본연의 역할)

본연의 역할 : 웹 페이지를 동적으로 만들어주기 위한 역할

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

a. www.naver.com 주소를 입력하면?
사용자 = 브라우저 = 클라이언트, 같은 의미로 생각하기
우리가 크롬을 통해 클라이언트의 역할을 하는 것이다.

b. HTML 문서를 서버로부터 수신합니다.
네이버 서버는 우리(= 브라우저 = 클라이언트) 에게 응답을 줬습니다.
그 응답이 HTML 문서 (document) 입니다.

c. 브라우저가 HTML 파일을 해석 (parsing 파싱)
브라우저에 기본적인 rendering 엔진이 있는데
렌더링의 번역 뜻중 번역이라는 뜻이다.

왜 해석이 필요할까?
서버로 받아온 문서 javascript는 이해할 수 없기 때문에
javascript로 알아들을 수 있는 방법으로 해석하는 과정이 필요하다

d. javscript가 알아들을 수 있는 방식으로 해석한 내용을 토대로
DOM Tree를 구성합니다.

e. DOM Tree랑 CSSOM Tree를 묶어서 Render Tree를 구성

5-2. DOM_API 실습

그래서 DOM이 뭐라고?
Document(html 파일)를 Javascript가 알아먹을 수 있는 Object형태로 Modeling 한 것이다.
그래서 DOM이다.

DOM은 브라우저에서 기본적으로 내장되어 있는 API 중 하나다.
만약 버튼을 클릭했을 때 이벤트가 일어나거나 애니메이션 일어났다면
이런 동작이 DOM 요소를 제어하면서 일어나게 하는 것이다.

우리가 달라서 그런게 아닌 DOM이 그렇게 할 수 있도록 허락해준 것이다.
DOM이 자기 자신을 컨트롤할 수 있느 방법을 우리에게 제시하는 것
이게 바로 API다.

API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 합니다.

1. document는 브라우저가 아닌 환경에서도 돌아갈까?

a. chrome browser 개발자 도구 -> console.log(document)가 했을 때 document가 뜸
b. node 환경 -> console.log(document) 했을 때 undefined가 뜸
항상 브라우저 환경에서만 돌아간다.

2. 런타임(런타임 환경)

c. DOM이 브라우저에 내장되어있기 때문에 우리는 HTML의 내용을 javscript로
접근 할 수 있고, 제어 할 수 있습니다.

d. 모든 DOM의 node들은 '속성' 과 메서드를 갖고 있다.

DOM의 node?
DOM 요소 하나 하나를 노드라고 할 수 있다.

DOM 요소의 속성과 메서드를 구분한다면
document.getElementById("demo").innerHTML = "Hello World!";
웬만하면 동사로 쓰이는건 메서드 명사로 쓰이는건 속성이다.
(getElementById -> get은 가져오다의 동사 || innerHTML 내부의 명사)

DOM에 접근 및 제어해보기

DOM 구조는 위에서 아래로 아래에서 위로
계층구조로 되어있기 때문에 부모 자식 관계가 있습니다.

DOM의 접근은 브라우저 환경에서만 가능하다.
그 안에서 DOM의 내장된 API의 성능이 어느정도냐면
getElementsByTagName에서 태그 element 라고 단일로 쓰면
읽지 못하는 걸 확인할 수 있다.

한가지 느낀점이 document 방식으로 접근하는게
이게 DOM에 접근 및 제어하는 방법이였구나
단순히 꾸미고 바꾸는걸 눈에 보여준다고 생각했다.

5-3. 클래스 소개 및 간단 예제

javascript는 객체지향 언어이지만 , 대표적인 객체지향 언어 class 와 인스턴스들
같은 문법은 ES6에서야 도입됐습니다.

객체지향 언어에서는 클래스 기반 프로그래밍 언어로 개발을 한다
개발자들이 시대가 지나면서 점점 자바스크립트로 넘어오고,
그 내부에서도 설계 기법들을 사용하게 된 것이다.

기초개념 클래스와 인스턴스의 일반적 개념

클래스는 학교에서 다양한 종류의 책상을 만드는 설계도와 비슷합니다.
설계도가 있어야 규격대로 만들어 냈을 때 기능 , 색깔 등등 명세해놓은 설계도.

클래스를 기반으로 만들어진 실제 사물은 무엇이냐 => 인스턴스 입니다.

인스턴스는 이 설계도를 보고 만들어진 실제 책상이라고 생각해볼 수 있다.
이러한 책상들은 모두 다른 인스턴스가 됩니다.

객체를 생성해내기 위한 방법이 클래스고,
프로그래밍 세계에서 설계도를 설계하는게 클래스인 느낌이다.

// 클래스라는 설계도를 만들어봅시다!
class Person {
    // 우리는 사람이기 때문에 필수요소
    // name, age
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
}

여기서 this.name 과 this.age가 인스턴스 (만들어진 부분의 this)
name 과 age는 설계도에서 제공하는 필수요소
이 두 가지 순서와 역할을 잘 기억해야 한다.

const person1 = new Person("홍길동", "30");
const person2 = new Person("홍길순", "25");
이렇게 아래 name과 age만 추가해서 새롭게 추가가 계속 가능하다.

console.log(${this.name}님 안녕하세요!);
이런식으로 백틱을 사용해 선택자로 가져오는 방법도 있다.

또한 MDN에서 확인해보면 class Person => constructor을 생성하고
아래처럼 new Person => 즉 새롭게 값을 할당하는 문법이라
new를 꼭 붙여주어야 한다고 명시되어 있음.

5-4 클래스 생성 연습

쉽고 빠르고 대량으로 만들기 위해서 class Car를 생성한다.

printModelYear () {
console.log(this.modelYear + '년식입니다.');
}

그리고 이런식으로 this.modelYear를 지칭하는 이유는
지칭하고 있는 해당 인스턴스 객체를 지칭해야하기 때문에
this를 반드시 붙여줘야 합니다.