[24.05.14] HTML/CSS/JavaScript_문서 객체 모델

01. 바닐라코드

1. 문서 객체 모델 (DOM)

바닐라 코드는 프로그래밍 언어에서 추가 기능이 없거나 외부 라이브러리를 사용하지 않은, 다른 추가사항이 없는 순수한 코드를 의미합니다.

2. 라이프사이클

• How does browser page lifecycle sequence work?
  사이클 설명 그림있음

• HTML Standard
  시간날때 읽어보기

3. 이벤트

• [자바스크립트] 이벤트의 동작 원리

• 이벤트 캡처링(Event Capturing)

DOM 트리를 따라서 부모 -> 자식 방향으로 이벤트가 전파된다.
document.getElementById("divBox").addEventListener("click", clickDiv, true);

• 이벤트 버블링(Event Bubbling) > 디폴트 (false)

이벤트 버블링은 캡처링과 반대의 개념이다. 특정 요소에서 발생한 이벤트가 DOM 트리를 타고 쭉 위로 전파되는 것이다.
document.getElementById("divBox").addEventListener("click", clickDiv, false);

4. 돔트리 확장프로그램

• HTML Tree Generator
  정적 생성 돔

• innerHTML
  보안에 취약함 / 잘안씀

02. 라이브러리

1. jQuery

• 전통적인 기법으로 분리해서 생각

2. Angularjs

• 구글
• 데이터중심 > 데이터바뀌면 바뀌도록

3. React

• 페이스북
• angular 단점 극복

4. Vue

• 구글직원이만듬
• 를 배울거임
• 쉽고, 직관적임
• 노드 사용할 줄 알아야함

5. Node.js

• 맥,리눅스 등 환경에 맞게 쓸 수 있음 (파이썬처럼)
• 브라우저 X , 일반 어플리케이션처럼 만듦

6. Js

• 웹브라우저에는 얘밖에 없음 > 한계이기도함 (내에서만 쓸 수 있으니까)
• 오픈소스이다

7. JS > node.js > Vue 순서로 감

03. 스코프와 클로저

1. 스코프

• 스코프 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
  var : 전역함수 내에서
  const,let : 블럭레벨 내에서 동작 > 이게 스코프다

• Bubbl.es - 3 pillars project 레벨 볼 수 있는 사이트

• 렉시컬 스코프 : 작성했을 당시의 범위

2. 클로저

클로저 - JavaScript | MDN

04. 함수

1. Arrow function 문법

• [자바스크립트] arrow function과 this
  

• Arrow function의 특징 : 자신의 상위로 넘어감 (제일 중요한 특징)
  

05. 브라우저 엔진

• JS Visualizer 9000
  ※ 엔진이란? 자동으로 돌아가는 프로그램 (자동화되어있는)
• 자바스크립트가 돌아가게 만드는 자바스크립트 엔진이 있는거다.

1. 스택 / 큐

1) 스택 : 후입선출

• 먼저 나가면 들어오고, 순서대로 쌓이는
• 함수는 스택으로 실행된다
  

2) 큐 : 선입선출

• 들어와서 바로 나감
• 비동기가 큐로 들어감 > 스택으로 뽑아와서 스택에서 실행됨
  

자바스크립트 : 원래 병렬처리 불가/ 싱글스레드임 > 근데 이벤트루프가 계속 돌면서 큐에서 비동기 찾아서 스택으로 가져와서 처리하니까 병렬이 가능해짐

이 원리가 브라우저의 원리임

06. 자바스크립트 정하는 곳?

1. TC39 사이트

• TC39 - Specifying JavaScript.

07. array-like objects(유사배열)

• 배열은 객체일까요? 맞음

• 배열은 유사배열일까요? 맞음

• 노드리스트 : $$(’div’) > document.querySelectorAll의 축약 ←얘도 유사배열로 되어있음
  

• 클래스도 쓸 수 있음