1️⃣ DOM
Document Object Model
- HTML 문서를 트리 구조로 표현하여 JavaScript가 조작 가능하게 만든다
- JavaScript는 DOM을 통해 웹 요소를 변경할 수 있다 (같은 개념이 아님)
✔️DOM?
문서 객체 모델(The Document Object Model)
HTML, XML 문서 프로그래밍 인터페이스(사용자가 기기를 쉽게 동작시키는데 도움 주는 시스템)
= 웹 브라우저가 웹 문서를 인식하는 방식
tree 형식 자료구조(여러 HTML 요소 계층을 반영해서 만든 객체)
최상위 노드 → 다른 자식 노드들이 뻗어나가는 구조
자바스크립트와 같은 스크립팅 언어로 DOM 수정 가능
DOM은 프로그래밍 언어는 아니다
하지만 DOM 이 없으면 JavaScript 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못한다
= 웹페이지와 스크립트 사이에 위치하며, 웹 개발자들은 동적인 웹 페이지와 인터랙티브한 사용자 경험을 제공할 수 있다
❗️마크업 언어로 작성된 문서를 프로그래밍 언어가 조작할 수 있도록 하는 API이다
✔️Virtual DOM
실제 DOM과 같은 내용을 담고 있는 복사본 느낌이다
객체 형태 가상 DOM을 통해 변형된 부분만 찾아내서 실제 DOM에 적용
2️⃣<script> 태그의 위치 & 속성
async vs defer
https://ko.javascript.info/script-async-defer
HTML 파싱 중간에 script 태그를 만나면? 파싱 중간에 파싱 일시 중단한다
모던 웹브라우저에서 돌아가는 스크립트들은 대부분 HTML보다 무겁다
스크립트를 비동기적으로 로드할 수 있도록 하는 script 태그 속성
✔️async vs defer
async는 독립적 스크립트,defer는 종속적 스크립트에 적합
1. 동기식 (synchronous js)
DOM 렌더링과 같은 다른 작업 진행하기 전에 js 코드 완료
<!DOCTYPE html>
<html>
<head>
<title>Sync JavaScript Example</title>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>2. 비동기식 - async
<!DOCTYPE html>
<html>
<head>
<title>Async JavaScript Example</title>
<script src="script1.js" async></script>
<script src="script2.js" async></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>스크립트가 로드되는 즉시 실행
스크립트 로드 순서 상관없을 경우
- 스크립트 순서가 보장되지 않는다(다운로드 된 파일 우선 실행)
- 광고, 방문자 수 카운터 등 실행 순서가 중요하지 않은 경우 적용
3. 비동기식 - defer
<!DOCTYPE html>
<html>
<head>
<title>Defer JavaScript Example</title>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
</head>
<body>
<!-- Page content here -->
</body>
</html>HTML 문서 파싱 완료 후 실행
스크립트 실행 순서가 중요할 경우
- 외부 스크립트에만 유효하다
<body> 끝에 위치하는 것이 일반적
type="module": ES6 모듈 사용 가능async: HTML 파싱과 병렬로 실행defer: HTML 파싱 완료 후 실행 (순서 보장됨)
async는 독립적 스크립트,defer는 종속적 스크립트에 적합
