無제

HTML에서 JavaScript를 배치하는 가장 좋은 위치 본문

<script>

HTML에서 JavaScript를 배치하는 가장 좋은 위치

yo-u-loo 2026. 5. 26. 10:53

 

◼️ HTML에서 JS를 배치하는 가장 좋은 위치

JavaScript는 HTML 구조에서 보통 </body> 바로 위에 배치하는 것이 기본 권장 방식.

 

1️⃣ body 중간에 삽입 (비권장)

<body>
  <h1>Hello</h1>

  <script>
    console.log("JS 실행");
  </script>

  <p>World</p>
</body>
  • HTML을 해석하는 도중에 스크립트가 실행.
  • 구조가 복잡해질수록 유지보수가 어렵다.
  • 화면 렌더링 흐름이 끊길 수 있다.

 

2️⃣ </body> 바로 위에 삽입 (권장 방식)

<body>
  <h1>Hello</h1>
  <p>World</p>

  <script>
    console.log("JS 실행");
  </script>
</body>
  • HTML이 먼저 모두 렌더링된 후 JS 실행.
  • DOM 요소 접근 오류 방지.
  • 구조가 깔끔하고 유지보수 쉽다.

 

❓ 왜 이 위치가 좋은가 ❓ 

document.getElementById("box") // null 오류 가능
  • 브라우저는 기본적으로 위 → 아래 순서로 HTML을 읽는다.

👉 JS가 먼저 실행되면 아직 존재하지 않는 요소를 찾을 수 있다.

 

📌 최신 추가 개념 (중요)

현대 개발에서는 아래 방식도 많이 사용한다.

🔹 defer (가장 권장)

<script src="app.js" defer></script>
  • HTML을 모두 읽은 뒤 실행.
  • </body> 위에 둔 것과 거의 같은 효과.
  • 외부 JS 파일에 가장 적합하다.

 

🔹 async

<script src="app.js" async></script>
  • HTML과 JS가 동시에 실행.
  • 순서가 보장 안 된다.
  • 독립적인 스크립트에 사용.

 

 

🔗 출처 🔗

https://wikidocs.net/162413

 

3-09 수정과 삭제 기능 추가하기

* `[완성 소스]` : [https://github.com/pahkey/sbb3/tree/v3.09](https://github.com/pahkey/sbb3/tree/v3.09…

wikidocs.net

 

'<script>' 카테고리의 다른 글

Data Types (데이터 타입)  (0) 2026.05.28
Variables (변수)  (0) 2026.05.28
ECMAScript (ES6)  (0) 2026.05.26
JS coding rule and style guide  (0) 2026.05.26
console.log()  (0) 2026.05.26
'<script>' Related Articles more