자바스크립트 작성 위치

소스코드 위치

자바스크립트는 기본적으로 HTML 문서의 <head></head> 사이에 위치 한다. 그러나 그 외 위치에 둘수도 있고 외부파일이나 다른 서버를 통해 참조하는 방식으로도 사용할 수 있다.

자바스크립트의 소스가 위치하는 몇몇 유형에 대해 살펴 보자.

1) 내부 자바스크립트

HTML 문서 내부에 자바스크립트 소스코드를 두는 유형 입니다. <head></head> 혹은 <body></body> 에 둘 수 있으며 양쪽에 모두 있어도 상관 없다.

<script>
  alert('Hello World);
</script>

현재 HTMl 파일의 문서구조(DOM)에 쉽게 접근이 가능.
현재 화면에 동적인 요소를 부여하는 자바스크립트가 같은 소스파일에 위치하기 때문에 코드 관리와 이해가 쉬움.
자바스크립트 소스가 복잡해지는 경우 관리가 어려움.
공통된 기능을 만들기 어렵고 코드의 재활용이 어려움.

2) 외부 자바스크립트

HTML 문서 외부에 별도의 파일을 생성하고 HTML 에서 불러와 사용하는 방식이다. 이때 자바스크립트의 파일의 위치는 HTML과 동일한 서버 혹은 외부 서버일수도 있다.

웹의 HTML코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리할 수 있음.
HTML과 자바스크립트 코드의 읽기가 수월해지고 유지 보수가 간편함.
공통기능의 모듈화와 코드 재활용이 가능해 짐.
소스가 분리되어 있고 HTML, 자바스크립트 모두 복잡한 경우 소스 이해가 어려울 수 있음

//example.js
function FnEvent() {
  alert('Hello World!');
}

<head>
  <script src="./example.js"></script>
  <!-- 외부 서버의 js파일 참고인 경우 다음과 같이 사용 -->
  <script src="https://www.cdn.com/myjs/example.js"></script>
</head>

3) 소스파일 위치 결정

브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될때까지 브라우저 렌더링을 멈추게 된다. 자바스크립트의 삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미치기 때문에 다음 사항을 고려해 적절한 위치선정이 필요하다.

<head></head>

브라우저 렌더링에 방해가 될 수 있으며 무거운 스크립트가 실행되는 경우 오랫동안 화면이 보여지지 않을수 있음
문서를 초기화하거나 설정하는 가벼운 스크립트들을 주로 사용.
문서의 DOM(Document Object Model) 구조가 필요한 경우 HTML이 모두 로드 된 이후 실행되어야 하므로 Window.onload와 같은 로드 이벤트가 추가되어야 함

<body></body>

태그내 모든 위치에 둘 수 있음.
웹페이지 로딩이 완료된 다음 실행하기 위해 일반적으로는 </body> 바로 앞에 위치.
이경우 문서의 DOM 구조가 완료된 시점에 실행되기에 별다른 추가설정이 필요없음.

내부 자바스크립트 VS 외부 자바스크립트

비교적 간단한 코드로 구성되며 현재 파일에만 적용되는 경우 내부 자바스크립트를 사용.
공통기능 구현이나 소스가 길어지면 외부 자바스크립트로 관리함.
공통 라이브러리로 개발된 경우 CDN을 통해 외부 서버로 부터 참조해서 사용함.

소스코드 위치