front 개념정리 및 복기 (출처: 짐코딩 GYM CODING)

DOM Document Object Model 

: 문서 객체 모델

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

 

BOM Browser Object Model 브라우저 객체 모델

: 브라우저를 제어하기 위한 인터페이스

• window : 모든 객체가 소속된 객체(최상위 객체)
  https://developer.mozilla.org/ko/docs/Web/API/Window
• document : 현재 문서에 대한 정보를 가지고 있는 객체
• history : 현재의 브라우저가 접근했던 URL history를 제어할수있음
• location : 문서의 주소와 관련된 객체로 window 객체의 프로퍼티인 동시에 document의 프로퍼티, 문서URL 변경하며 다양한 정보를 얻을수 있음.
• screen : 사용자의 디스플레이 화면에 대한 다양한 정보를 가지고 있는 객체
• navigator : 실행중인 애플리케이션(브라우저)에 대한 정보를 알 수 있다. 

Window - Web API | MDN

---

script 로드 해결 방법 (2가지)

• body 태그 최 하단에서 script 로드 (html 파싱 후 script 로드)
• load 이벤트 리스너 등록 : window.onload (html 파싱 DOM생성 그리고 외부콘텐츠가 로드된 후 발생하는 이벤트)

출처 : 짐코딩의 CODING GYM

HTML5 script 로드 해결방법 (feat. defer, async)

• defer 속성 : HTML 파싱과 함께, 비동기로 javaScript 파일을 불러온다. (일반적인 경우)

출처 : 짐코딩의 CODING GYM

• async 속성 : HMTL 파싱과 함께, 비동기로 javaScript 파일을 불러온다. 단, script가 실행될경우 html 파싱을 중지한다.

출처 : 짐코딩의 CODING GYM

 

* 동기,비동기 설명 https://www.youtube.com/watch?v=sN4E9_u7xQk

---

' this ' 란 무엇인가?

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다고 한다.. (this는 호출한 놈?이라고 이해하며, 호출한 행위가 없을경우 기본값으로는 window객체 라고한다.) 단, 위의 경우와 달리 아래와 같이 예외적인 상황도 존재한다. 

1. 전역스코프에서 this는 window 객체
2. 화살표 함수*( Arrow Function)에서는 조금 달라짐..
3. strict Mode 에서도 this 는 조금 달라짐.

* window객체 : 브라우저에서 제공하는 전역 객체

 

default this = window 객체, 함수를 호출한적이 없을 경우 기본적으로 this는 window 객체

---

220906 추가내용 : 

bind()

bind() 메서드 : this를 설정할수있는 메서드 단, bind는 단 1번만 this를 설정할 수 있다.

---

화살표 함수(arrow function)

화살표 함수(arrow function)는 자신을 포함하고 있는 외부 Scope에서 this를 계승받는다.  (화살표 함수에서 this는 자신을 감싼 정적 범위)

화살표 함수가 나오기 전 this를 사용방식

---

Strict Mode

엄격모드?(Strict Mode)에서는 함수를 호출한적이 없을 경우 기본값을 window로 하지않고 undefined로 정의 한다.

 

 

 

출처 : https://www.youtube.com/c/gymcoding

짐코딩의 CODING GYM