클라이언트 사이드 자바스크립트
- 클라이언트 사이드
웹 브라우저에서 실행하도록 작성한 자바스크립트를 뜻함.
웹 서버에서 실행되는 '서버 사이드' 코드의 반대말이다.
클라이언트 사이드와 서버 사이드를 각각 '프론트엔드', '백엔드'라고 부르기도 한다.
script 태그의 src 속성
src 속성이 있는 <script> 태그는 자바스크립트 파일 콘텐츠를 <script>와 </script\> 태그 사이에 직접 쓴 것과 똑같이 동작한다.
src 속성의 장점
- 방대한 자바스크립트 코드를 HTML 파일에서 제거해 단순화한다.
즉, '내용'과 '동작'을 분리한다. - 여러 개의 웹 페이지에서 같은 자바스크립트 코드를 공유할 때
src속성을 쓰면 코드 하나만 관리해도 된다. - 자바스크립트 코드를 여러 페이지에서 공유한다면 한 번만 내려받으면 된다.
처음 코드를 내려받으면 다른 페이지는 브라우저 캐시에서 가져올 수 있다. src속성은 임의의 URL을 값으로 받으므로 한 서버에 있는 자바스크립트 프로그램이나 웹 페이지가 다른 웹 서버에 있는 코드를 가져올 수 있다. 인터넷 광고는 대부분 이를 바탕으로 만들어진다.
스크립트 타입 지정
<script> 태그에 language="javascript", type="application/javascript" 같은 속성이 있었다.
자바스크립트는 웹의 기본 언어이자 유일한 언어이다.
language 속성은 폐기됐고 type 속성을 사용하는 경우는 단 두 가지뿐이다.
- 스크립트가 모듈일 때
- 웹 페이지에 데이터를 가져오지만 표시하지는 않을 때
스크립트 실행 시점: async와 defer
<script> 태그에 defer, async 속성을 써서 스크립트 실행 방식을 바꿀 수 있다.
boolean 속성이며 값이 없어 <script> 태그에 존재하기만 하면 된다. 단, 이 속성은 src 속성과 함께 사용해야한다.
<script defer src="deferred.js"></script>
<script async src="async.js"></script>-
defer속성
문서를 완전히 내려받고 분석해서 조작할 준비가 끝날때까지 스크립트 실행을 지연(defer)하라는 의미이다. -
async속성
브라우저가 스크립트를 가능한 빨리 실행하되 스크립트를 내려받는 동안 문서 분석을 계속해도 된다는 뜻이다.
<script> 태그에 두 속성이 모두 존재한다면 async 속성이 우선순위를 갖는다.
지연된 스크립트는 문서 출처 순서대로 실행되고 비동기 스크립트는 불러오는 즉시 실행되므로 문서 출처대로 실행되지 않을 수도 있어 주의해야한다.
type="module" 속성이 있는 스크립틑 기본적으로 defer 속성이 있는 것처럼 문서 로딩이 끝난 후 실행된다. async 속성을 쓰면 문서 로딩이 끝날 때까지 대기하지 않고 가져온 모듈 전부를 불러오는 즉시 실행한다.
