TIL (Today I Learned)

TIL) [JavaScript] JavaScript 선언 위치

Won's log 2023. 8. 25. 19:11

메인 페이지 템플릿을 intellij에 가져오기 위해 템플릿 웹사이트에서 html, css, js 코드를 가져왔다. 그러나 외부 스크립트로 지정한 js 기능이 연결되지 않았다.

현재 내가 넣은 js코드는 <script src="/js/index.js"></script>로 <body> 안에 위쪽에 구현해놓았다. 그랬더니 js코드가 동작하지 않았다.

 

이번에는 <head> 안에 구현해놓았다. js코드가 역시 동작하지 않았다.

 

이번에는 <body> 안에 위쪽에 구현해놓았다. js코드가 정상적으로 동작하였다.

<script>의 위치에 따라 js코드가 동작/비동작이 된다니, 

html에서 js코드를 사용할 때 <script>의 위치, 즉 javascript의 선언위치를 어디에 해야할 지 궁금해졌다.

 

알아보니 JavaScript 코드를 HTML 파일에서 사용할 때, `<script>` 태그의 위치는 여러 가지 방법으로 설정할 수 있다. 일반적으로는 아래 두 가지 방법 중 하나를 선택하여 사용한다.

1. `<head>` 섹션 내에 위치시키기:

이 방법은 스크립트가 페이지의 `<head>` 태그 내에 위치하는 것을 의미한다. 보통 외부 스크립트 파일을 로드하거나 페이지 초기화 작업을 수행하는 데 사용된다.

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <script src="/js/myscript.js"></script>
</head>
<body>
    <!-- 페이지 컨텐츠 -->
</body>
</html>


 이 방법은 스크립트를 페이지 컨텐츠보다 먼저 로드하기 때문에 스크립트 실행 전에 초기화 작업을 수행할 수 있다. 즉 순차적으로 실행되며 <body> 안에 코드를 실행하기 전에 <script>를 먼저 동작시킨다. 이때 head에 기타 stylesheet, script의 사이즈가 크다면 head의 코드를 해석하고 bod의 코드가 해석되는 순으로 가기 때문에  페이지 로드가 느려지는 것을 체감하게 된다. 스크립트가 무거운 경우 페이지 로딩 속도를 저하시킬 수 있다는 의미이다. 따라서 먼저 실행되어야 하는 script가 있다면 head의 선언하는 것을 추천한다.


2.`<body>` 섹션 끝 부분에 위치시키기:

이 방법은 스크립트가 페이지의 `<body>` 태그의 끝 부분에 위치하는 것을 의미한다. 보통 페이지 컨텐츠를 로드한 후 스크립트를 로드하고 실행하는 데 사용된다. 

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <!-- 페이지 컨텐츠 -->
    <script src="/js/myscript.js"></script>
</body>
</html>


이 방법은 페이지 컨텐츠를 먼저 표시한 후 스크립트를 로드하여 사용자 경험을 개선한다. body 안에 html 코드, script 코드가 먼저 실행되기 때문에 클라이언트가 페이지 로딩 속도가 빠르다고 느끼게 된다는 의미이다. 그래서 페이지 로딩 속도에 더 긍정적인 영향을 미칠 수 있다.

이 두 가지 방법 중 어떤 것을 선택할지는 스크립트의 역할, 성능 요구 사항 및 사용자 경험에 따라 다를 수 있다. 보통은 스크립트가 초기화 작업이 필요한 경우나 로딩 시간을 최적화해야 할 경우에는 `<head>` 섹션 내에, 사용자 경험을 우선시하는 경우에는 `<body>` 섹션 끝 부분에 위치시키는 것이 일반적이다.

 

나의 경우, <head> 섹션에서는 모종의 이유로(아마도 다른 스크립트와의 충돌 또는 로딩 시 우선순위에서 밀려났기 때문으로 짐작된다) 동작을 하지 않았으나 `<body>` 섹션 끝에서는 원활하게 동작하는 것을 확인하였다.