웹 페이지 구성 3요소
웹 페이지는 3가지 언어를 이용해 작성된다.
HTML, CSS, JavaScript이다. HTML은 웹 페이지의 구조와 내용을, CSS는 웹 페이지의 모양, JavaScript는 웹 페이지의 동적 변경과 응용 프로그램을 작성한다.
자바스크립트란?
자바스크립트는 웹을 풍부하게 만들어주는 작고 가벼운 언어다.
(미국의 넷스케이프 커뮤니케이션즈사(Netscape Communications)가 개발한 스크립트 언어이다.)
작고 빠르기 때문에 웹문서를 동적으로 꾸밀 때 가장 많이 사용된다. 스크립트는 HTML 문서 속에 직접 기술하며, <script>라는 태그를 사용한다.
자바스크립트 코드 위치
자바스크립트는 4가지 위치에 작성할 수 있다.
- HTML 태그의 이벤트 리스너 속성
<Script></Script>- 자바스크립트 파일
- URL 부분
자바스크립트의 용도
자바스크립트의 일반적인 용도는 웹 페이지에 기능을 더해 HTML 웹 페이지를 동적으로 움직이게 만드는 것이다.
자바스크립트는 다음의 일들을 할 수 있다.
-
HTML 페이지 변경 및 HTML 엘리먼트와 콘텐츠의 추가/제거
-
CSS 및 HTML 엘리먼트의 스타일 변경
-
사용자와의 상호작용, 폼의 유효성 검증
-
마우스와 키보드 이벤트에 대한 스크립트 실행
-
웹 브라우저 제어, 쿠키 등의 설정과 조회
-
AJAX 기술을 이용한 웹 서버와의 통신
-
동적인 효과, 이미지, 롤오버, 상태표시줄에 문자열 표시 등의 작업
-
웹 사이트의 기능적인 면 : 쿠키처리, 새로운 Window 열기 등.
자바스크립트의 특징
-
자바스크립트는 소스 코드 형태로 HTML 페이지에 내장된다
-
자바스크립트 소스 코드는 컴파일 과정을 거치지 않고 브라우저 내부의 인터프리터(자바스크립트 처리기)에 의해 바로 실행된다.
-
자바스크립트는 C언어 구조를 차용해 단순화되어 있어 배우기 쉽다.
자바스크립트의 장단점
장점
컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있다. 자바스크립트 코드 안에서는 변수, 클래스 및 메소드를 선언하지 않아도 되며, 메소드가 public, private, prottected인지 구분하지 않아도 된다. 또한 자바스크립트는 웹에 특화된 기술로 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성도 높다.
단점
성능이나 보안 측면에서 떨어진다. HTML 소스코드에 함께 작성되기 때문에 소스코드가 외부로 공개된다. 이 과정에서 보안적인 부분에서 취약점이 발생할 수 있다.
싱글 스레드 언어
자바스크립트의 엔진은 싱글 스레드이다.
이에 대한 내용은 다음 글에서 정리해 보겠다.
- 스레드(thread) : 프로세스 내 실행 단위. 하나일 경우 싱글 스레드(Single thread), N개일 경우 멀티 스레드(Multi thread)라고 한다.
- 동시성(Concurrency) : 여러 작업이 마치 동시에 일어나는 것처첨 보이는 것.
- 병행성(Parallelism) : 여러 작업이 동시에 일어나는 것.
- 브라우저 엔진 : 크롬과 같은 웹 브라우저 엔진으로 다양한 작업을 수행.
- 호출 스택(Call Stack) : 자바스크립트에서는 수행해야 할 함수를 순차적으로 호출 스택에 담아 처리함.
- 콜백 큐(Callback Queue) : 자바스크립트 런타임 환경에서 처리해야 하는 명령어를 임시로 저장하는 대기 큐. ( = Task Queue = Event Queue )
- Web API : 웹 브라우저에서 제공하는 API로, Browser API라고도 한다.
Web Worker
HTML 페이지에서 스크립트를 실행할 때 해당 페이지는 스크립트가 완료될 때까지 응답하지 않게 된다. 이를 해결하기 위해 Web Worker를 사용하게 된다. Web Worker는 페이지의 퍼포먼스에 영향을 주지 않고 다른 스크립트와는 독립적으로 백그라운드에서 실행되는 자바스크립트이다. (서비스워커와 비슷한 것인가..?)
기존의 웹은 멀티 스레드가 불가능했기 때문에 스크립트의 작업이 끝나기 전까지 UI가 멈춰버리는 경우가 발생했다. 하지만 Web Worker를 통해 웹에서의 멀티 스레드 구현이 가능해진다.
브라우저에서 Web Worker를 사용하기 전에 해당 브라우저가 Web Worker를 지원하는지 체크할 수 있다.
if (window.Worker) { // 웹 워커 사용 가능 } else { // 웹 워커 사용 불가능 }
어떤 상황에서 Web Worker를 사용할까?
- 매우 큰 문자열의 암호화 또는 복호화
- 복잡한 수학계산 (이미지, 비디오 처리 포함)
- 매우 큰 배열의 정렬
즉, 로딩이나 실행이 오래 걸리는 자바스크립트 파일을 실행할 때 Web Worker를 사용하면 매끄러운 웹 페이지의 구현이 가능해진다.
💡 요약
자바스크립트는 HTML, CSS와 함께 웹 페이지를 구성하는 3가지 언어 중 하나이다. 웹을 풍부하게 만들어주는 가벼운 언어로, 웹문서를 동적으로 꾸밀 때 가장 많이 사용된다.자바스크립트는 여러 위치에 위치할 수 있다. HTML 태그의 이벤트 리스너 속성에 작성할 수 있고,
<script></script>태그를 이용해 작성할 수 있으며, 별도의 자바스크립트 파일을 생성해 작성할 수도 있다.자바스크립트의 일반적인 용도는 웹페이지에 기능을 더해 동적으로 움직이게 만드는 것이다. 이 외에도 여러 일들을 수행할 수 있다.
HTML 페이지를 변경할 수 있고, CSS와 HTML엘리먼트의 스타일 변경이 가능하며, 마우스/키보드 이벤트에 대한 스크립트를 실행할 수 있다. 또한, 웹 브라우저를 제어하고 쿠키 등을 설정하고 조회할 수 있으며, AJAX를 이용해 웹 서버와 통신도 가능하다.
자바스크립트는 HTML파일 내에 작성되기 때문에 별도의 컴파일 과정이 필요없다. 따라서 다른 언어에 비해 빠른 시간안에 스크립트 코드 작성이 가능하다.
하지만 HTML 내에 함께 작성되기 때문에 소스코드가 외부로 공개되며, 이 과정에서 보안적인 취약점이 발생할 수 있다.
Q. 자바스크립트는 싱글레이드언어인데 멀티스레드처럼 작동하는 이유는?
A. 자바스크립트 자체가 싱글 스레드 언어임에도 불구하고 웹 사이트를 끊김없이 여러 작업을 할 수 있는 이유는 브라우저가 web API 등을 제공해 비동기 작업을 가능하게 해주기 때문에 멀티 스레드처럼 사용할 수 있는 것이다.
Q. Web API??
A. DOM에 접근해서 사용할 수 있는 메소드들. 예를 들면, setTimeout 등...
참고
