1. 개요
JavaScript는 웹 문서에서 복잡한 기능을 구현할 수 있는 프로그래밍 언어이다.
그 중에서도 스크립트 언어에 해당한다.
단순하고 정적인 정보를 표시하는 것 외에 적절한 컨텐츠 업데이트, 대화형 지도, 2D·3D 애니메이션 그래픽 등
다양한 부분에 JavaScript가 관여한다.
HTML
문단, 제목, 데이터 표를 정의하거나 페이지에 이미지와 동영상을 삽입하는 등 컨텐츠를 구성하고 의미를 부여하는 데 사용되는 마크업 언어CSS
배경 색이나 글꼴을 설정하고 컨텐츠를 여러 열에 배치하는 등 HTML에 스타일을 적용하는 데 사용되는 스타일시트 언어JavaScript
동적으로 변경되는 컨텐츠를 만들고 멀티미디어를 제어하고 이미지에 애니메이션을 적용하는 등 다양한 작업을 수행할 때 사용되는 스크립트 언어
2. JavaScript의 역할
JS가 할 수 있는 일은 크게 아래와 같다.
변수에 값을 저장할 수 있다.
문자열을 다룰 수 있다.
특정 이벤트에 대한 응답으로 코드를 실행할 수 있다.
API를 다룰 수 있다.
JS의 가장 일반적인 용도는 DOM API를 통해 HTML, CSS를 동적으로 수정해 UI를 업데이트하는 것이다.
웹 문서는 일반적으로 문서에 표시되는 순서대로 로드되고 실행되는데, HTML이나 CSS보다 먼저 실행되면 오류가 발생할 수 있기 때문이다.
2.1. API란?
API(Application Programming Interface)는 서로 다른 소프트웨어 애플리케이션들이 데이터를 주고받고 소통할 수 있도록 정의된 규칙과 프로토콜의 집합이다.
일반적으로 JS에서 다루는 API는 두 가지 범주로 나눈다.
브라우저 API
웹 브라우저 자체에 내장되어 있어 웹 페이지나 웹 애플리케이션이 사용자의 웹 캠, 위치, 저장소, 화면 등 다양한 기기 기능이나 브라우저 환경에 접근하여
데이터를 읽고 쓸 수 있게 해주는 표준화된 인터페이스(기능 집합)이다.
- DOM API
HTML과 CSS를 조작하여 요소를 생성, 제거, 변경하고 페이지에 새 스타일을 동적으로 적용할 수 있다.
- Geolocation API
위치 정보를 가져올 수 있다.
- Canvas, WebGL API
애니메이션 2D·3D 그래픽을 만들 수 있다.
- HTMLMediaElement, WebRTC 등 오디오·비디오 API
웹 문서에서 오디오·비디오를 재생하거나 웹 캠을 다른 컴퓨터에 표시할 수 있다.서드파티 API
특정 기업이나 서비스 제공자가 개발자들을 위해 외부에 공개하여, 다른 개발자나 애플리케이션이 자신의 서비스에
가져다 쓸 수 있도록 만든 응용 프로그램 인터페이스이다.
구글 지도, 네이버 로그인 등 외부 서비스를 연결해 개발 효율을 높인다.
3. 브라우저에서의 샌드박스 정책
각 브라우저 탭에는 코드를 실행할 수있는 별도의 환경이 있다.
대부분의 경우 각 탭의 코드는 완전히 독립적이며, 한 탭의 코드가 다른 탭에 직접적인 영향을 끼칠 수 없다.
안전히 주고받는 방법도 제한적으로 존재한다. window.postmessage, Broadcastchannal API, Sharedworker, Storage 등등
4. 인터프리터와 컴파일러
프로그래밍 코드의 실행 방식은 크게 두 가지로 나눌 수 있다.
인터프리터
소스코드를 한 줄씩 기계어로 번역하며 바로 실행하는 방식이다. 개발 편의성이 높지만 속도는 느리다.컴파일러
소스코드를 기계어로 모두 변환하고 그렇게 생성된 파일을 실행하는 방식이다. 개발 편의성은 낮지만 속도가 빠르다.
JS는 인터프리터에 속한다.
대부분의 모든 JS 인터프리터는 낮은 속도를 보완하기 위해 JIT 컴파일 기술을 사용하는데,
스크립트 실행과 동시에 소스코드를 더 빠르게 실행할 수 있는 이진 형태로 변환해 최대한 높은 실행 속도를 얻는다.
5. 서버 사이드와 클라이언트 사이드
간단히 표현하면 최종적으로 사용자에게 보여질 웹 문서를 서버에서 렌더링하느냐 클라이언트에서 렌더링하느냐의 차이이다.
서버 사이드 렌더링
서버에서 문서의 렌더링을 수행하여 완성된 결과를 클라이언트에게 보낸다.클라이언트 사이드 렌더링
서버에서 HTML 골격과 CSS, JS 파일을 전송하여 클라이언트가 DOM을 조작해 문서를 완성한다.
각 렌더링 방법의 특징과 장단점이 있고 최근에는 두 방식을 적절히 혼용하여 개발하고 있다.
5.1. 동적인 문서와 정적인 문서
이 개념은 클라이언트 사이드와 서버 사이드를 구별하는 데 사용되는 개념은 아니다.
동적인 문서는 웹 문서·웹 앱의 보여지는 부분을 업데이트하여 필요와 상황(ex 사용자 요청)에 따라 컨텐츠를 생성하거나 업데이트하는 기능이 있는 문서를 말한다.
정적인 문서는 이러한 기능이 없는 문서를 말한다. 옛날 웹은 정적인 문서가 많았다.
6. 스크립트 로딩 전략
JS로 DOM을 조작하거나 할 때, 해당 요소가 로드되기 전에 JS 코드가 먼저 실행되면 제대로 동작하지 않는 문제가 생긴다.
브라우저는 기본적으로 JS를 가져와 실행하는 동안 HTML DOM 파싱을 중단시키기 때문이다(defer, async 제외).
따라서 일반적으로 JS는 문서 <body>의 가장 끝에 <script>를 배치하여 이 문제를 해결한다.
6.1. 의존성이 있는 스크립트 로딩 전략
실행 순서·환경·전제 조건을 이유로 의존성이 있는 스크립트를 <head>에 배치해야 하는 경우가 가끔 있다.
이 때는 다음과 같은 전략을 사용한다.
DOMContentLoaded 이벤트 이용하기
이 이벤트는 HTML 본문 전체를 불러와 읽기 전까지 해당 이벤트의 콜백 함수 내의 코드 실행을 유보한다.defer 속성 이용하기
<script>에 defer 속성을 추가하면 스크립트 다운로드만 미리 하고 DOM 파싱이 모두 완료될 때까지 기다렸다가 실행한다.
defer 속성이 추가된 <script> 요소끼리는 순서를 100% 보장한다.
<head>
<!-- DOM 파싱이 완료된 후, library.js -> main.js 순서로 실행을 보장 -->
<script src="library.js" defer />
<script src="main.js" defer />
</head>async는?
의존성이라는 개념이 언급되는 시점에서 코드 실행의 순서는 매우 중요한 문제이다.
async가 선언된 코드는 순서에 상관없이 다운로드가 완료되는 즉시 실행되는데 이는 의존성을 해치는 특성이 된다.
또한, async가 실행되는 순간에 HTML 파싱을 잠시 중단시키는 문제도 있다.
따라서 async는 다른 스크립트에 의존하지 않고 DOM 조작에 필수적이지도 않은 독립적인 스크립트에 사용한다.