자바 스크립트 기본 - Hello

anonymous·2023년 3월 10일

모던 자바스크립트

목록 보기

1/5

<script> 태그는 웹 페이지에 자바스크립트 코드를 추가하는 데 사용.
'유형' 및 '언어' 속성과 같은 여러 속성이 있지만 필수는 아냐.
외부 스크립트 파일은 절대 또는 상대 경로 또는 전체 URL이 될 수 있는 'src' 속성을 사용해 HTML과 연결할 수 있어. 브라우저가 파일을 다운로드하고 캐시하여 트래픽을 줄이고 웹 페이지 속도를 높여 더 나은 성능을 위해 긴 스크립트는 별도의 파일로 저장하는 게 좋아. 'src' 속성이 있는 경우 <script> 태그 안의 코드는 무시해.

브라우저에서 <script> 태그에 자바스크립트 코드가 들어가고. 이 태그를 만나면 안의 코드를 자동으로 처리해.

모던 마크업 <script> 태그엔 몇 가지 속성(attribute)이 있어

type 속성: <script type=…>

HTML4에선 스크립트에 type을 명시하는 것이 필수였어 그래서 type="text/javascript" 속성이 붙은 스크립트를 볼 수 있어. 그치만 타입 명시 이제는 안해도 돼!.
현재 HTML 표준에선 이 속성의 의미가 바꼈는데 이 속성은 자바스크립트 모듈에 사용할 수 있어. 모듈은 심화 내용이기 때문에 다른 파트에서 다시 설명할거야,

language 속성: <script language=…>

스크립트 전후에 위치한 주석

<script type="text/javascript"><!--
    ...
//--></script>

모던 자바스크립트에선 이렇게 안해.
태그 옆에 붙은 주석은 <script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했었는데. 지난 15년간 출시된 브라우저는 <script> 태그를 처리할 수 있으므로, 이런 형태의 주석을 보면 아주 오래된 LEGACY 코드라고 보면돼!.

자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있어.
이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입해.
<script src="/path/to/script.js"></script>
여기서 /path/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로고.
현재 페이지에서의 상대 경로를 사용하는 것도 가능해.
같은 폴더 내에 있는 파일인 "script.js"를 src="script.js"로 참조하거든.

물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있어.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 돼.

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

주의:

HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용하고, 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋아.
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있어.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용해. 스크립트 파일을 한 번만 다운받으면 되거든. 그럼 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라져.

src 속성이 있으면 태그 내부의 코드는 무시된다는 점 기억해.
<script> 태그는 src 속성과 내부 코드를 동시에 갖지 못해!

실행 안되는 코드

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

요약

기술블로거입니다