웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
우리는 자바스크립트 코드를 완성하면서 인라인(Inline), 임베디드(Embeded), 내부(Internal) 및 외부(External)이란 말을 자주 듣고 사용한다. 이들의 차이점은 무엇이고 무엇이 정말 다른 것인지 알아보고자 한다... 먼저 가장 흔히 쓰이고 있는 인라인 형식의 자바스크립트는 무엇인지 알아보자.
; 여기서 인라인(Inline) 자바스크립트 코드는 임베디드(Embeded)의 또 다른 의미임을 알아두자. 즉, 두개의 용어는 같은 뜻으로 둘 다 html 코드내의 태그 안에 사용되는 자바스크립트 코드를 의미한다. 사용되는 모습은 아래와 같다.
매우 간단한 한줄 코드를 예로 들었다. 그만큼 간단하며 알기쉽기 때문이다. 인라인 방식을 사용하면 어떤 점이 있을까? 일단 등록된 이벤트를 구현할때 현재의 이벤트 요소(Context)를 this 구문을 사용해 간단하게 사용할 수 있는 점이 장점일 수 있겠다. 따로 context를 지정할 필요가 없다는 뜻으로 예를들면 다음과 같은 사용이 가능하다.
위 예제처럼 이벤트가 발생한 콘텍스트(Context)에 this를 사용하여 이벤트 처리가 가능한 점이다.
내부 자바스크립트 코드는 html 코드가 있는 파일 내부에 script 태그를 사용하여 함께 선언한다. 예를 들어...
위 코드는 div 태그의 배경색을 red로 변경한다. 이 코드가 인라인 방식과 다른 점이라면 태그 내부에 선언하지 않고 파일 내부의 한 영역에 선언되었다는 점이 차이점이라 하겠다. 이 방식은 파일 안, 즉 페이지 안에서는 어디서 실행되어도 무방하며 스크립트를 모아서 관리할 수 있기 때문에 인라인 방식보다 관리 및 디버깅이 용이하다는 매우 큰 장점을 갖는다...
또한 이 방식의 특징으로는 type 속성을 사용한 다른 스크립트 사용도 가능한 점인데... 예를들어 위에서는 자바스크립트를 사용했으나 아래처럼 VBScript를 사용할 수도 있다. 물론 같은 파일에서 말이다.
외부 자바스크립트는 동일한 파일이 아닌 다른 파일로부터 스크립트를 불러온 경우를 말한다... script 태그에서는 src 속성을 사용해 외부 파일을 불러올 수 있는데 아래와 같이 사용한다.
위 예제는 가장 일반적인 외부 스크립트의 사용방법이다. 매우 간단하게 사용이 가능하다. 외부 스크립트의 장점은 무엇일까? 일반 내부 자바스크립트는 파일 안에서 관리가 가능하지만 외부는 파일을 폴더 단위로도 관리할 수 있어 관리 및 디버깅이 수훨할다.
게다가 다른 사람과 협업하는 경우를 생각해보자.. 예를들어 여러사람이 하나의 파일을 사용할 경우 버전(Version) 관리에 문제가 생기며 충돌(Conflict)가 발생가능하다. 이런 점에서 매우 큰 장점을 가질 수 있다. 특히 프로젝트가 클 수록 사용하는 사람이 많아질 것이므로 더욱 중요하다 하겠다.
! 인라인 자바스크립트 코드
; 여기서 인라인(Inline) 자바스크립트 코드는 임베디드(Embeded)의 또 다른 의미임을 알아두자. 즉, 두개의 용어는 같은 뜻으로 둘 다 html 코드내의 태그 안에 사용되는 자바스크립트 코드를 의미한다. 사용되는 모습은 아래와 같다.
<input type="text" onClick="alert()" />
<input type="text" onMouseover = "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>
Easy Script !!
</div>
<script type="text/javascript">
$(function() {
.test {
background-color: red;
}
})
</script>
위 코드는 div 태그의 배경색을 red로 변경한다. 이 코드가 인라인 방식과 다른 점이라면 태그 내부에 선언하지 않고 파일 내부의 한 영역에 선언되었다는 점이 차이점이라 하겠다. 이 방식은 파일 안, 즉 페이지 안에서는 어디서 실행되어도 무방하며 스크립트를 모아서 관리할 수 있기 때문에 인라인 방식보다 관리 및 디버깅이 용이하다는 매우 큰 장점을 갖는다...
또한 이 방식의 특징으로는 type 속성을 사용한 다른 스크립트 사용도 가능한 점인데... 예를들어 위에서는 자바스크립트를 사용했으나 아래처럼 VBScript를 사용할 수도 있다. 물론 같은 파일에서 말이다.
<script type="VBScript">
...
</script>
...
</script>
!!! 외부(Internal) 자바스크립트 코드
외부 자바스크립트는 동일한 파일이 아닌 다른 파일로부터 스크립트를 불러온 경우를 말한다... script 태그에서는 src 속성을 사용해 외부 파일을 불러올 수 있는데 아래와 같이 사용한다.
<script type="text/javascript" src="/js/test.js"></script>
위 예제는 가장 일반적인 외부 스크립트의 사용방법이다. 매우 간단하게 사용이 가능하다. 외부 스크립트의 장점은 무엇일까? 일반 내부 자바스크립트는 파일 안에서 관리가 가능하지만 외부는 파일을 폴더 단위로도 관리할 수 있어 관리 및 디버깅이 수훨할다.
게다가 다른 사람과 협업하는 경우를 생각해보자.. 예를들어 여러사람이 하나의 파일을 사용할 경우 버전(Version) 관리에 문제가 생기며 충돌(Conflict)가 발생가능하다. 이런 점에서 매우 큰 장점을 가질 수 있다. 특히 프로젝트가 클 수록 사용하는 사람이 많아질 것이므로 더욱 중요하다 하겠다.
아래의 글도 찾고 계시지 않나요?