이제 대단히 인기있는 클라이언트 스크립트 라이브러리인 제이쿼리를 페이지에 불러올 겁니다.
제이쿼리는 거의 어디에서나 쓰이는 라이브러리이며 웹 코드를 작성할 때 거의 항상 가장 먼저 불러오는 라이브러리이기도 합니다.
지금 당장은 제이쿼리가 필요하지 않지만, 제이쿼리 코드에 빨리 익숙해질수록 좋습니다.
바디 마지막, main.js를 불러온 행 바로 앞에 제이쿼리 링크를 삽입합시다.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js"></script>
인터넷 URL을 통해 제이쿼리를 불러 왔으므로 인터넷에 연결되어 있지 않다면 페이지가 정확히 동작하지 않습니다.
컨텐츠 전송 네트워크(CDN)에서 서비스하는 제이쿼리를 링크했습니다.
이렇게 하면 불러오는 속도가 더 빨라집니다.
오프라인으로 프로젝트를 만든다면 제이쿼리 파일을 내려받아 컴퓨터에서 불러와야 합니다.
이제 제이쿼리의 장점을 활용하도록 main.js 파일을 수정합시다.
$(document).ready(function () {
'use strict';
console.log('main.js loaded');
})
제이쿼리를 다뤄본 적이 없다면 이 코드는 괴상망측해 보일 겁니다.
사실 이 코드는 대단히 많은 일을 하지만, 아직은 이 코드가 하는 일을 이해할 수 없을 겁니다.
여기서 제이쿼리가 하는 일은 자바스크립트 코드를 실행하기 전에(비록 지금은 console.log
하나뿐이지만)
브라우저가 HTML을 전부 불러왔는지 확인하는 겁니다.
바른 습관을 들이기 위해, 브라우저 기반 자바스크립트를 만들 때마다 이렇게 할 겁니다.
앞으로 만드는 자바스크립트 코드는 모두 $(document).ready(function() {});
이 안에 들어갑니다.
use strict;
라는 행도 있습니다.
이 명령에 대해서는 나중에 더 자세히 배우지만, 간단히 말해 이 명령은 자바스크립트 인터프리터에서 코드를 더 엄격하게 처리하라는 뜻입니다.
처음에는 엄격하다는 표현이 별로 좋지 않다고 생각하겠지만,
코드를 엄격하게 처리하다 보면 더 나은 자바스크립트 코드를 쓸 수 있게 되고,
자주 발생하기 어려운 문제를 방지할 수 있습니다.
이 책에서는 매우 엄격한 자바스크립트를 배우게 될 겁니다.