[JavaScript] 스크립트 태그 사용 시 주의점

먼저 스크립트 태그의 사용법을 알아보자면

 

먼저 JS 코드의 양이 많은 경우엔, 파일로 나눠서 저장 가능.

이렇게 나눠놓은 각 파일을 src속성을 사용해서 HTML에 삽입한다

<script src="/path/to/script.js"></script>

경로는 상대 경로 또는 절대경로로 나타낼 수 있는데

위에 코드는 절대 경로이고 같은 폴더의 파일을 불러오게 되면

단순하게 src="파일이름.js"로 나타낼 수도 있다

 

파일이 아니라면 외부 링크에서도 가져올 수 있다. 예로 

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

 

여러개도 가져올 수 있다

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

 

당연하게도 HTML안에  JS코드를 넣어 실행시킬 수 있지만,

이런 방식은 스크립트가 간단할 때만 쓰자. 

왜냐면 별도의 파일에 작성하게 되면 브라우저가 스크립트를 다운받아서

캐시에 저장하기 때문에 성능상의 이점이 있다!

예로 여러페이지에서 동일한 스크립트를 사용하면 브라우저는 페이지가 바뀔 때마다

스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용합니다. 

한번만 다운받으면 된다는 말! 이를 통해서트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.

 

src 속성이 있으면 태그 내부의 코드는 무시.

<script> 태그는 src속성과 내부 코드를 동시에 가지지 못합니다.

<script src="file.js">
  alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>

예시로 이렇게 되어있으면 중간에 alert(1)은 무시되고

file.js의 스크립트들이 실행된다는 것.

 

당연하게도 따로 작성을 하면 실행가능.

<script src="file.js"></script>
<script>
  alert(1);
</script>