RARRIT

기억을 너무 믿지 말자

:ledger: [mjt] 스크립트 태그에 대해 알아보자

스크립트 태그는 정말 많이 사용했다. 모던 자바스크립트 튜토리얼을 통해 추가적으로 알게된 내용을 정리해보도록 했다.

:one: 모던 마크업

<script> 태그에서는 몇가지 속성(attribute)가 있고 요즘은 잘 사용하지 않는데, 오래된 코드에서 종종 이 속성을 발견할 수 있다. 이전(HTML4)에서는 type을 명시하는게 필수였지만 지금은 안써도 된다. 모던 HTML 표준에선 이 속성의 의미가 변경되었고 type의 경우 모듈에 사용할 수 있다. 모듈 같은 경우는 심화 과정때 배우므로 정리해서 해당 글과 연결하도록 하겠다.

<script type="module"></script>

type과 마찬가지로 이제 사용하지 않는 속성이 있는데, <script language=..> 속성이 있다. 현재는 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색해서 더는 사용할 필요가 없어짐

  • <script> 태그에 여러가지 속성이 있는데, 요즘 잘 사용안하고 오래된 코드에서 볼 수 있음
  • 혹시라도 보게 되면 당황하지말고 아~ 오래된 코드구나 하고 넘어가셈
  • type은 모듈에 사용할 수 있으므로 심화 과정때 정리하려함

:two: 외부 스크립트

이번에 문서를 통해 알게 된 것은 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장한다는 것이었다. 이전에는 코드가 길어질 때와 구조화하는 용도로 외부 스크립트로 분리한다 생각했는데, 이 부분은 처음 안 사실이었다.

  • 여러 페이지에서 동일한 스크립트를 사용할 때 브라우저는 페이지가 변경될 때 마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져옴
  • 스크립트 파일을 한 번만 다운받으면 되기에 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라짐

:three: defer와 async 차이

스크립트 태그에 defer와 async 속성도 본 적이 있다. 이 부분은 문서에 없는 내용이지만, 글을 작성하는 김에 따로 찾아보고 정리해봤다.

:pushpin: 3-1) defer

  • HTML 파싱이 끝난 후 스크립트를 실행
  • 스크립트가 병렬로 로드되며, 실행 순서가 HTML에 선언된 순서를 따름
  • 파일이 순소대로 실행되어야 할 때 사용함
// 작성 예시
<script src="defer.js" defer></script>

:pushpin: 3-2) async

  • 스크립트를 병렬로 로드하고, 로드가 완료되면 HTML 파싱을 중단하고 즉시 실행함
  • 실행 순서가 보장되지 않음
  • 실행 순서가 중요하지 않은 독립적인 스크립트임 (광고같은 곳에 사용됨)
// 작성 예시
<script src="async.js" async></script>

:four: 스크립트 위치

  • 스크립트는 HTML 문서에서 위치하는 곳에 따라 브라우저 동작이 달라지므로 이해하고 사용해야 함.
  • 모던 프로젝트에서는 일반적으로 defer를 사용해 <head>에 배치하는 방식을 선호한다고함.

:pushpin: 4-1) <head> 내부

  • HTML 파싱 전에 스크립트를 로드하고 실행함 (DOM이 준비되지 않음)
  • defer 또는 async 속성과 함께 사용함
  • DOM이 준비되지 않으니 DOM을 조작하는 경우 에러남

:pushpin: 4-2) </body> 바로 앞

  • HTML 파싱이 완료 후에 스크립트를 로드함
  • DOM을 직접 조작하는 스크립트에 적합함

:five: CORS와 외부 스크립트

외부 스크립트를 사용할 때는 CORS 정책을 이해해야 함

  • CORS (Cross-Origin Resource Sharing 엄청 기네)는 외부 리소스 로드 시 보안과 관련된 제약을 설정함
  • 예를 들어, 외부 CDN에서 스크립트를 로드할 경우 crossorigin 속성이 필요할 수 있다함
<script src="https://example.com/library.js" crossorigin="anonymous"></script>

:fire: 회고

스터디 모임을 만들고 모던 자바스크립트 튜토리얼 문서를 통해 자바스크립트 부터 진행하기로 했다. 초반에는 알 던 내용 많을 거라고 생각했는데, 역시 찾을 수록 모르는 내용이 생겼다. 가장 충격이었던 것은 지금까지 외부 스크립트를 사용하는 이유에서 캐싱 처리에 대한것이었다. CORS는 리액트와 넥스트 프로젝트에서도 자주 듣던 단어인데, 이 또한 공부해봐야겠다고 생각이 들었ㄷ!

:pushpin: 참고 문서

참고