728x90
1. script 로드 해결 방법
HTML에서 script를 언제, 어떻게 불러오냐에 따라 페이지 성능과 동작이 크게 달라져.
아래처럼 크게 3가지 방식이 있어.
1) body 최하단에 script 넣기
- HTML 태그들 다 그린 후 JS 실행
- 가장 기본적이고 안전한 방식
- 단점: JS가 많아지면 로드 느림
- 예시:
<body>
<h1>Hello</h1>
<script src="main.js"></script>
</body>2) load 이벤트 리스너 등록
- window.onload → 모든 리소스(img, css 등) 로딩 완료 후 실행
window.onload = function() {
console.log("모든 리소스 로드 완료!");
};- DOMContentLoaded → HTML 파싱 완료 시점에 실행 (이미지, css는 기다리지 않음)
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM 준비 완료!");
});- 비유:
- window.onload → 집 짓고 가구까지 다 들어온 후 집에 들어감
- DOMContentLoaded → 집은 다 지었는데, 가구는 아직 옮기는 중
3) HTML5 script 속성
✅ defer
- HTML 파싱과 JS 다운로드 동시에 진행
- 단, 실행은 HTML 파싱 끝난 뒤
- 여러 개 defer 스크립트 → 작성 순서대로 실행
- 비유: “집 짓는 동안 가구 주문해 두고, 집 완공되면 가구 설치 시작”
예시:
<script src="main.js" async></script>✅ async
- HTML 파싱과 JS 다운로드 동시에 진행
- 다운로드가 끝난 순간 바로 실행 (HTML 파싱 멈춤)
- 여러 개 async 스크립트 → 실행 순서 보장 안 됨
- 비유: “누가 먼저 도착하든 바로 가구 들이밀기 → 순서 뒤죽박죽”
예시:
<script src="main.js" async></script>✅ defer vs async 한눈에 정리
| 속성 | 다운로드 | 실행 시점 | 순서 보장 |
| defer | HTML 파싱 중 | HTML 파싱 끝나고 | O |
| async | HTML 파싱 중 | 다운로드 끝나면 즉시 | X |
2. this 개념 정리
this는 “누가 불렀냐”에 따라 달라진다
- 기본적으로 this는 호출하는 주체를 가리킨다
- this가 가리키는 대상은 상황별로 달라진다
✅ this의 여러 예시
1) 전역에서 this
console.log(this); // window (브라우저 기준)- 비유: “밖에서 혼자 말하면, 집 전체(윈도우)가 들음”
2) 함수 안에서 this
- 엄격 모드(use strict) 여부에 따라 다름
- strict 모드 → undefined
- 비 strict 모드 → window
function foo() {
console.log(this);
}
foo(); // window (비 strict)3) 객체의 메서드에서 this
- this → 해당 객체
const user = {
name: "Alice",
sayHello: function() {
console.log(this.name);
}
};
user.sayHello(); // Alice4) 이벤트 리스너에서 this
- 기본적으로 this → 이벤트가 걸린 HTML 요소
<button id="btn">클릭</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
console.log(this); // <button> 요소
});
</script>5) 화살표 함수에서 this
- 화살표 함수는 자신만의 this를 가지지 않는다 → 바깥 스코프의 this를 물려받음
const user = {
name: "Alice",
sayHello: () => {
console.log(this.name);
}
};
user.sayHello(); // undefined- 비유: 화살표 함수는 “나는 this를 새로 안 만들고, 부모님 따라갈래~”
✅ this의 디폴트는 window
- 전역에서 this는 window
- 하지만 함수나 객체 안에서 상황에 따라 달라지니 주의!
✅ 마무리
script 로딩 전략을 잘 선택하면 웹페이지 속도가 달라지고,
this 개념을 이해해야 자바스크립트를 제대로 다룰 수 있다!
defer와 async, this는 프런트엔드 개발 필수 개념이니 꼭 정리해 두자.
728x90
'개발자 성장 로드맵 > 프론트엔드' 카테고리의 다른 글
| NPM 기초 완전 정리 (2) | 2025.07.11 |
|---|---|
| 자바스크립트 모듈 시스템 완전 정리 (2) | 2025.07.11 |
| Front-End 개발 필수: 이벤트 버블링·캡처링, JS 모듈, 배열 메서드 총정리 (1) | 2025.07.11 |
| DOM + BOM 구조 설명 (0) | 2025.07.10 |
| 프론트엔드 개발자 입문 로드맵 (2) | 2025.06.21 |
