0. 자바스크립트 입문 강좌
0.1 DOM이란?
- Document Object Model
- 웹 문서를 제어하기 위해 웹 문서를 객체화 한 것
- 웹 문서, 즉 HTML을 객체화 함으로써 문서를 제어할 수 있음
0.2 BOM이란?
- Browser Object Model
- 웹 브라우저를 제어하기 위해 브라우저를 객체화 한 것
0.3 script 태그 defer, async
- HTML에서 자바스크립트 파일을 사용할 때, <script> 태그로 자바스크립트 파일을 불러옴
- 브라우저에서는 HTML 파일의 위부터 아래로 순차적으로 파싱
-> HTML이 파싱 되기도 전에 DOM 요소에 접근하려고 할 때,
DOM 요소에 접근하려고 했기 때문에 발생한 문제
생성되지 않은 객체에 대한 문제 발생
[ 해결방법 1 ]
body 태그 최 하단에서 script 로드
[ 해결방법 2 ]
load 이벤트 리스너 등록
1. window.onload
HTML파싱, DOM 생성, 외부 컨텐츠(images, script, css 등)가 로드된 후 발생하는 이벤트
2. DOMContentLoaded
HTML파싱, DOM생성 후 발생하는 이벤트
◎ defer / async 속성을 통해 비동기 script 로드 가능 ◎
1. defer 속성
- HTML 파싱과 함께, 비동기로 JavaScript 파일을 불러옴
- HTML 파싱이 완료된 후, JavaScript 코드를 실행
2. async 속성
- HTML 파싱과 함께, 비동기로 JavaScript 파일을 불러옴
- HTML 파싱이 완료되지 않았더라도, 먼저 로딩되는 JavaScript 파일부터 실행 시작
- JavaScript 파일을 실행할 때에는 HTML 파싱이 중단
0.4 this란 무엇인가?
- 대부분의 경우 this의 값 = 함수를 호출한 방법에 의해 결정
- 호출한 놈?!!
- 호출한 놈이 없을 경우에는 기본값으로 window 객체가 됨
[ 예외 ]
- 전역 scope에서 this = window 객체
- 화살표 함수(Arrow Function)에서 this가 조금 달라짐
** bind 함수를 사용해 this를 별도로 설정할 수 있음 **
[무료] 프론트엔드 날개달기: Vuejs, React 배우기 전에 꼭 알아야하는 지식 - 인프런 | 강의
이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다., - 강의 소개 | 인프런...
www.inflearn.com
'JavaScript' 카테고리의 다른 글
| [JS] JS에서 함수(function)란? (0) | 2023.07.26 |
|---|---|
| [JS] Webpack 기초 (0) | 2023.01.20 |
| [JavaScript] JavaScript의 모듈들 (0) | 2023.01.20 |
| [JavaScript] JavaScript의 API들 (0) | 2023.01.20 |
| [JavaScript] IT 용어들 (API, 동기, 비동기, 프론트엔드, 백엔드) (0) | 2023.01.20 |