오늘은 자바스크립트의 기본 중에 기본을 공부해보겠습니다.
모던 스크립트 튜토리얼을 참고하였습니다.
Hello, world!
이 파트는 실행 환경에 독립적인 코어 자바스크립트(core JavaScript)를 다룬다.
코어 자바스크립트를 다루고 있긴 하지만, 학습을 위해선 스크립트를 실행할 수 있는 환경이 필요하다. 본 튜토리얼은 온라인으로 제공되기 때문에 실행환경으로 브라우저를 사용한다.
Node.js와 같이 브라우저 이외의 환경에 주력하는 학습자를 위해, 브라우저 한정 명령어(alert 등)는 최소한으로 사용한다. 이런 명령어를 학습하는데 시간을 보내지 않도록 말이다.
'script' 태그
<script>태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.
<script> 태그엔 자바스크립트 코드가 들어간다. 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리한다.
모던 마크업
<scirpt> 태그엔 몇 가지 속성(attribute)이 있다. 요즘엔 잘 사용하지 않지만, 오래된 코드에서 종종 이 속성을 발견할 수 있다고 한다.
type 속성: <script type =...>
HTML4에선 스크립트에 type을 명시하는 것이 필수였다. 따라서 type="text/javascript"속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었다. 이젠 타입 명시가 필수가 아니다. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀌었다. 이제 이 속성은 자바스크립트 모듈에 사용할 수 있다.
language 속성: <script language=...>
이 속성은 현재 사용하는 스크립틀 언어를 나타낸다. 지금은 자바스크립트가 기본 언어이므로 속성과 의미가 퇴색된 상황이다. 더는 사용할 필요가 없다.
스크립트 전후에 위치한 주석
아주 오래된 책과 가이드에서는 다음과 같이 <script> 태그 안에 주석이 존재하는 걸 볼 수 있다.
모던 자바스크립트에선 이런 트릭을 사용하지 않는다. 태그 옆에 붙은 주석은 <script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했었다. 지난 15년간 출시된 브라우저는 <script> 태그를 처리할 수 있으므로, 이런 형태의 주석을 보면 아주 오래된 코드라는 사실을 알 수 있다.
외부 스크립트
자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있다.
이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입한다.
여기서 /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에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 된다.
TMI-주의 :
HTML 안에 직접 스크립트를 작성하는 방식은 대게 스크립트가 아주 간단할 때만 사용한다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다.
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 스크립트 파일을 한 번만 다운받으면 된다.
이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.
