SECTION 0
<script 태그 defer, async>
이전에도 배웠던 내용이긴 한데 다시한번 복습해야겠당. (과거에 공부했던 내용 https://practice-c0ding.tistory.com/63)
<head> 태그 안에 js파일을 연결
html에다가 버튼을 생성하고, js파일에 쿼리셀렉터를 이용하여 html에서 작성한 버튼을 가져오고, 버튼을 누르면 경고창이 뜨는 코드를 작성했다고 하자. 그런다음 html문서를 열고 버튼을 클릭하면 오류가 뜬다.
그 이유는 html이 파싱(parsing)을 하다 멈추고 js를 가져온 다음 js코드를 실행하고 다시 파싱을 하게 된다. 근데 js에는 버튼을 가져오는 코드가 있었다. html이 다 파싱되기도 전에 js코드를 읽어들였기 때문에 오류가 나는 것이다. 그래서 js에 console.log를 이용하여 버튼을 가져온 변수를 출력해보면 null 값이 뜨는 걸 알 수 있다. (const btn = querySelector('button'); console.log(btn); => btn: null)
그래서 이를 보완하기 위한 방법으로 <body> 태그 내 최하단에 작성하는 방법이 있다.
<body> 태그 내 최하단에 연결
body태그 최하단에 선언함으로써 html문서가 먼저 다 파싱되고 js를 가져올 수 있게 한다.
load 이벤트 리스너 등록
-window.onload : html파싱, dom생성, 그리고 외부 콘텐츠(images, script, css...)가 모두 로드된 후 발생하게 하는 이벤트
하지만 모든 게 다 로드될 때까지 기다려야 하기 때문에 비효율적
-DOMcontentLoaded : HTML파싱, DOM생성 후 발생하는 이벤트 (외부 콘텐츠의 로드는 기다리지 않는다)
외부콘텐츠는 기다리지 않기 때문에 onload보다 더 빨리 실행된다.
하지만 이 방법들도 단점이 있음 -> 파싱을 할 때 스트립트 태그를 다운로드 못해서
이걸 해결하기 위해 async defer 나옴
async / defer
두 개의 공통점: html 파싱과 함께, 비동기로 js파일을 불러옴(html파싱을 멈추지 않고 js를 가져옴(병렬적) -> 비동기, 파싱 멈추고 js가져온 후 다시 파싱시작하는 것이 동기)
차이점
defer :
- html 파싱이 완료된 후, js코드 실행
async :
- html 파싱이 완료되지 않아도 먼저 로딩되는 js파일부터 실행 시작됨
- js파일 실행할 때는 html 파싱 중단
| defer | async | |
| 공통점 | html 파싱과 함께, 비동기로 js파일을 불러옴 | |
| 차이점 | -html 파싱 완료된 후, js코드 실행 | -html 파싱 완료 안 돼도 먼저 로딩되는 js파일부터 실행 시작 -js파일 실행할 때는 html 파싱 잠시 중단됨 |
async는 js가 실행될 때는 잠시 html 파싱이 중단되기 때문에 꼭 필요한 경우에만 사용하고 보통은 defer를 많이 사용함
<this란 무엇인가?>
학습 페이지
www.inflearn.com
this는 객체를 가리키는 키워드
this는 호출한 놈..?
호출한 것이 없을 때는 기본값으로 window 객체
예외:
-전역스코프에서 this는 window객체
-화살표 함수에서 this가 조금 달라짐
-Strict Mode에서는 this가 조금 달라짐
객체를 생성하고 안에 console.log(this)하는 메서드 만든다
person.printThis() 하여 콘솔에 어떤 것이 출력되는지 확인한다.
작성했던 객체가 출력되는 것을 확인할 수 있다.
=> 여기서 this는 person인 것을 알 수 있다.
동등연산자로 확인해보았을 때 true가 뜨는 것을 볼 수 있다.
person에 의해서 호출되어졌기 때문에 this는 person이다
this.fullname을 출력하면 "짐코딩"이 출력될 것이고, this.age를 출력하면 20이 출력될 것이다.
그런데 앞에 호출한 것이 없는 상태로
let printThis = person.printThis;
printThis()
해보면 false가 뜨는 것을 알 수 있다.
console.log(this === window) 는 true가 뜨는 것을 알 수 있다.
window 전역객체 => 브라우저 창
앞에 호출한 것이 없으면 디폴트로 this는 window전역객체가 된다.
bind
this를 설정할 수 있는 메서드
printThis 함수를 그냥 호출하면 앞에 호출한 대상이 없기 때문에 this는 window가 된다
하지만 bind함수를 이용하여 printThis.bind(person1) 과 같은 방식으로 바인딩해주면 window는 person1를 가리키는 것을 볼 수 있다.
bind는 단 한 번만 사용할 수 있다. 중첩사용xx
person 객체에 setTimeout을 이용하여 1초 뒤에 콘솔에 this관련한 함수를 실행하는 hello 메서드를 만들고,
person.hello()를 실행하면 undefined가 뜬다.
여기서 this는 window를 가리킨다.
여기서 this가 person를 가리키게 하려면 bind를 이용해 바인딩을 해줘야 한다.
화살표함수에서 this
바인딩하지 않고, 화살표 함수로 변경만 했을 뿐인데 this가 person이 되었다.
Strict Mode
strict mode(엄격 모드)에서는 호출한 것이 없을 경우 기본값이 window가 아닌 undefined가 된다.
❌화살표 함수를 사용하면 안되는 경우❌
1.객체 메서드를 선언할 때 사용하면 안된다.
let person = {
name: '짐코딩',
printThis: () => {
console.log(this); // window객체 출력
}
};화살표함수는 외부 스코프를 물려받기 때문에 이 상황에선 전역스코프에서 물려받는다.
전역스코프에서 this = window
2.addEventListener 함수의 콜백 함수에서 사용하면 this가 상위 컨텍스트를 가리킴
-화살표 함수로 등록하면 this -> window 객체
let btn = document.querySelector('button');
button.addEventListener('click', () => {
console.log(this === window); // => true
})-일반 함수로 등록하면 this -> button 요소
let btn = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this === button); // => true
})
'기타 > 코딩일기' 카테고리의 다른 글
| 프론트엔드 날개달기(SECTION 1 : API란 무엇인가?/동기와 비동기란?) (0) | 2023.09.27 |
|---|---|
| 프론트엔드 날개달기(SECTION 0: DOM이란?/BOM이란?) (0) | 2023.09.26 |
| swiper 복습 (0) | 2023.09.09 |
| slick 복습 (0) | 2023.09.08 |
| 코딩일기: 데이터 과학을 위한 파이썬 Numpy 5일차 (1) | 2023.07.05 |