우리는 자바스크립트 코드를 완성하면서 인라인(Inline), 임베디드(Embeded), 내부(Internal) 및 외부(External)이란 말을 자주 듣고 사용한다. 이들의 차이점은 무엇이고 무엇이 정말 다른 것인지 알아보고자 한다... 먼저 가장 흔히 쓰이고 있는 인라인 형식의 자바스크립트는 무엇인지 알아보자.


! 인라인 자바스크립트 코드
; 여기서 인라인(Inline) 자바스크립트 코드는 임베디드(Embeded)의 또 다른 의미임을 알아두자. 즉, 두개의 용어는 같은 뜻으로 둘 다 html 코드내의 태그 안에 사용되는 자바스크립트 코드를 의미한다. 사용되는 모습은 아래와 같다.

<input type="text" onClick="alert()" />
<input type="text" onMouseover = "alert();" />

매우 간단한 한줄 코드를 예로 들었다. 그만큼 간단하며 알기쉽기 때문이다. 인라인 방식을 사용하면 어떤 점이 있을까? 일단 등록된 이벤트를 구현할때 현재의 이벤트 요소(Context)를 this 구문을 사용해 간단하게 사용할 수 있는 점이 장점일 수 있겠다. 따로 context를 지정할 필요가 없다는 뜻으로 예를들면 다음과 같은 사용이 가능하다.

<input type="text" onClick="this.style.backgroundColor = 'red';" />

위 예제처럼 이벤트가 발생한 콘텍스트(Context)에 this를 사용하여 이벤트 처리가 가능한 점이다.


!! 내부(Internal) 자바스크립트 코드
내부 자바스크립트 코드는 html 코드가 있는 파일 내부에 script 태그를 사용하여 함께 선언한다. 예를 들어...

<div class="test">
   Easy Script !!
</div>

<script type="text/javascript">
   $(function() {
      .test {
         background-color: red;
      }
   })
</script>

위 코드는 div 태그의 배경색을 red로 변경한다. 이 코드가 인라인 방식과 다른 점이라면 태그 내부에 선언하지 않고 파일 내부의 한 영역에 선언되었다는 점이 차이점이라 하겠다. 이 방식은 파일 안, 즉 페이지 안에서는 어디서 실행되어도 무방하며 스크립트를 모아서 관리할 수 있기 때문에 인라인 방식보다 관리 및 디버깅이 용이하다는 매우 큰 장점을 갖는다...

또한 이 방식의 특징으로는 type 속성을 사용한 다른 스크립트 사용도 가능한 점인데... 예를들어 위에서는 자바스크립트를 사용했으나 아래처럼 VBScript를 사용할 수도 있다. 물론 같은 파일에서 말이다.

<script type="VBScript">
   ...
</script>




!!! 외부(Internal) 자바스크립트 코드
외부 자바스크립트는 동일한 파일이 아닌 다른 파일로부터 스크립트를 불러온 경우를 말한다... script 태그에서는 src 속성을 사용해 외부 파일을 불러올 수 있는데 아래와 같이 사용한다.

<script type="text/javascript" src="/js/test.js"></script>

위 예제는 가장 일반적인 외부 스크립트의 사용방법이다. 매우 간단하게 사용이 가능하다. 외부 스크립트의 장점은 무엇일까? 일반 내부 자바스크립트는 파일 안에서 관리가 가능하지만 외부는 파일을 폴더 단위로도 관리할 수 있어 관리 및 디버깅이 수훨할다.

게다가 다른 사람과 협업하는 경우를 생각해보자.. 예를들어 여러사람이 하나의 파일을 사용할 경우 버전(Version) 관리에 문제가 생기며 충돌(Conflict)가 발생가능하다. 이런 점에서 매우 큰 장점을 가질 수 있다. 특히 프로젝트가 클 수록 사용하는 사람이 많아질 것이므로 더욱 중요하다 하겠다.