`defer` 🚀

defer는 <script> 태그에 추가하는 특별한 속성입니다. JavaScript 초보자에게 매우 중요한 개념이지만, 처음에는 이해하기 어려울 수 있어요.

`defer`가 하는 일

간단히 말해서:

<script defer src="myscript.js"></script>

이렇게 하면 "HTML을 다 그린 후에 자바스크립트를 실행해 주세요"라고 브라우저에 지시하는 것입니다.

`defer`가 없을 때 vs 있을 때

`defer` 없이 스크립트를 사용할 때:

<script src="myscript.js"></script>

브라우저: "잠깐! 자바스크립트 파일을 다운로드하고 실행할 때까지 HTML 페이지 그리는 것을 멈춰야지!"
사용자: "왜 페이지 로딩이 느리지...?"

`defer`를 사용할 때:

<script defer src="myscript.js"></script>

브라우저: "HTML을 계속 그리면서 동시에 자바스크립트 파일을 다운로드할게. HTML 다 그린 후에 자바스크립트 실행할게!"
사용자: "와, 페이지가 빨리 로드되네!"

왜 `defer`가 중요한가요?

1. 성능 향상

페이지 로딩 속도가 빨라져서 사용자 경험이 좋아집니다.

2. DOM 접근 오류 방지

// defer 없이 이 코드를 실행하면 오류 발생 가능
const button = document.getElementById('myButton');
button.addEventListener('click', () => alert('clicked!'));

위 코드가 실행될 때 HTML이 아직 로드되지 않았다면, myButton 요소를 찾지 못해 오류가 발생합니다. defer를 사용하면 이런 문제를 방지할 수 있어요.

데이터 입출력 예제에서 `defer`의 중요성

데이터 입출력 예제에서는 보통 HTML 폼, 입력 필드, 버튼 등 DOM 요소와 상호작용합니다. defer를 사용하면 이런 요소들이 모두 로드된 후에 JavaScript가 실행되므로 훨씬 안전합니다.

<!DOCTYPE html>
<html>
<head>
  <title>데이터 입출력 예제</title>
  <!-- defer 속성 사용 -->
  <script defer src="data-handler.js"></script>
</head>
<body>
  <input type="text" id="userName">
  <button id="submitBtn">제출</button>
  <div id="output"></div>
</body>
</html>

// data-handler.js
// 이 스크립트는 HTML이 모두 로드된 후 실행됩니다
const submitBtn = document.getElementById('submitBtn');
const userNameInput = document.getElementById('userName');
const output = document.getElementById('output');

submitBtn.addEventListener('click', () => {
  const name = userNameInput.value;
  output.textContent = `안녕하세요, ${name}님!`;
});

초보자를 위한 `defer` 사용 팁

외부 스크립트를 불러올 때는 항상 defer 속성을 추가하세요:
```
<script defer src="myscript.js"></script>
```
HTML 내부에 직접 작성하는 스크립트는 defer가 필요 없습니다. 그냥 <body> 태그 끝에 넣으세요:
```
<body>
  
  <script>
    // 여기에 자바스크립트 코드
  </script>
</body>
```
DOM 요소에 접근하는 코드가 있다면 defer는 필수입니다!

기억하세요!

defer는 마치 "HTML을 모두 준비한 다음에 스크립트를 실행해 주세요"라고 브라우저에게 말하는 것과 같습니다. 데이터 입출력 같은 DOM 상호작용이 많은 코드에서는 더욱 중요합니다.

[JS] defer

[JS] defer

defer 🚀

defer가 하는 일

defer가 없을 때 vs 있을 때

defer 없이 스크립트를 사용할 때:

defer를 사용할 때:

왜 defer가 중요한가요?