JS 라이브러리를 호스트하는 곳은 어디일까요?

지난번 토크 스루 (Talk through)에 나왔던 슬라이드쇼 JS 라이브러리를 웹페이지에 포함시킬 때, 이 URL을 입력했습니다: https://cdn.rawgit.com/pamelafox/a8b77c43f56da1753348/raw/slideshow.js

이 URL은 "절대" URL입니다. 해당 URL 이 프로토콜과 도메인을 포함한다는 뜻입니다. 만약 JS 라이브러리를 칸아카데미 환경에 포함시킨다면, 환경이 라이브러리의 전체 경로를 알 수 있도록 하기 위해서 꼭 절대 URL을 사용해야 합니다.

만약 자신의 컴퓨터에서 웹 페이지 작업을 하고 있고 모든 파일을 내려받았다면, slideshow.js 나 lib/slideshow.js 처럼( lib 폴더 안에 있다면), 간단하게 "상대" 주소를 사용할 수 있습니다. 로컬에서 작업한다면, 브라우저 네트워크 패널을 열어서 브라우저가 JS 파일이나 CSS 파일같은 모든 로컬 리소스들을 찾았는지 확인하세요. 만약 브라우저가 리소스를 찾지 못한다면, 404 페이지를 보게 될 것이며, URL과 파일 위치를 디버깅해야 합니다.

이제 다시 이 URL 을 살펴봅시다: https://cdn.rawgit.com/pamelafox/a8b77c43f56da1753348/raw/slideshow.js

프로토콜은 https 입니다. 보안된 URL 이라는 뜻입니다. 칸아카데미는 여러분이 검증된 리소스만을 갖고올 수 있도록 하며, 이는 웹 개발을 할 때 가지고 있기에 가장 좋은 습관입니다. 아직 모든 서버가 가용한 SSL을 갖고 있는 것이 아니기 때문에, 프로젝트에서 종종 http로 시작되는 URL을 갖게 될 수도 있습니다.

서버는 cdn.rawgit.com인데, 이는 "CDN" - "content delivery network" 의 한 예입니다. CDN 은 JS 라이브러리와 같은 정적 파일을 제공하는데 최적화되어 있으며 파일을 매우 빠르게 전달합니다. 여러 JS 라이브러리들을 제공하는 (Google's CDN 과 cdnjs와 같은) 몇 가지 큰 CDN 이 있고, 전용 CDN 을 갖고 있는 라이브러리도 여럿 존재합니다.

웹 페이지에 CDN을 이용해 JS 라이브러리를 가져왔을 때나 자기 소유가 아닌 서버로부터 가져왔을 때는 이용하는 서버를 믿지 않아야 합니다. 악의적인 서버는 JS 라이브러리를 이용해 데이터를 훔치고 어딘가로 전송하는 코드로 대체할 수도 있는데, 분명 그런 일이 일어나길 원치 않겠죠!

칸아카데미에서는, 오직 신뢰할 수 있는 서버로부터만 웹 페이지 환경에 리소스를 가져올 수 있도록 CSP 라고 불리는 보안 메커니즘을 사용합니다: bootstrapcdn.com, rawgit.com, googleapis.com, jsdelivr.net, cdnjs.com.

여러분만의 웹 사이트를 만들 때 JS 라이브러리를 자신의 서버에서 제공할 것인지 또는 외부 CDN 으로부터 포함시킬지 결정할 필요가 있습니다. 대부분의 큰 웹 사이트들은 라이브러리를 자신의 서버에서 제공합니다. 이는 더 많은 컨트롤을 가능하게 하고, 더 빠른 로딩 속도를 위해서 여러 라이브러리를 단일 JS 라이브러리 파일로 결합하는 등의 최적화 작업을 가능케 합니다. 모두 여러분에게 달린 일입니다. 다만 여기서 다뤄본 내용을 기억하세요!