JavScript란 무엇인가?
JavaScript를 설명하기 전에 웹을 구성하는 요소를 설명하고자 한다. 만약 웹이 사람이라면 어떻게 표현될 수 있을까? 그것을 단적으로 보여주는 Dev Human의 사진을 참고하여 설명하도록 하겠다.
HTML(HyperText Markup Language)는 인체 자체의 뼈, 즉 큰 구조를 짜고 의미를 부여하는 마크업 언어이다. 페이지의 문단이 들어가는 위치나 데이터 표와 외부 이미지/비디오를 정의한다.
<head>
<face>
<eyes></eyes>
<nose></nose>
<mouse></mouse>
</face>
</head>
<!-- !!실제로 head에 이런 내용이 들어가진 않는다 -->
CSS(Cascading Style Sheets)는 정돈된 인간이다. 구조로 구성된 HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어로 배경색을 추가하거나, 글꼴을 바꾸고, 콘텐츠를 신문처럼 다열 레이아웃으로 배치할 수 있다.
eyes {
display: flex; /* 인터페이스의 공간을 flex로 정의 */
justify-content: center; /* 행으로 나열된 항목을 가운데에 배치 */
color: brown; /* 색은 brown */
}
JavaScript는 뇌이자 신경다발로 인간을 제어할 수 있다. 동적으로 움직이거나, 특정상황에서 다르게 행동할 수 있도록 하는 스크립팅 언어다. 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 JavaScript로 만들 수 있다.
const para = document.querySelector('eyes'); // para는 eyes 문단을 선택
para.addEventListener('click', blinkEyes); // para에게 이벤트 수신기 부착
function blinkEyes() { // 함수는 사용자에게 새로운 이름을 물어보고
let pain = prompt('You hurting me!');
para.painVoice = `Ouch, ${pain}`; // blinkEyes를 실행하게 함
}
// JavaScript가 익숙하지 않아서, 추후에 수정하도록 하겠음
// prompt에 다양한 인자를 넣는 법
이렇게 세가지 언어는 유기적으로 이루어져 있으며 모든 컴퓨터와 다양한 기기, 브라우저에 내장되어 있으므로 접근성이 뛰어나다. (물론 CSS는 구형 브라우저나 모던 브라우저 종류에 따라 보여지는 것이 상이하다) 특히 JavaScript는 프론트엔드 개발자가 사용할 수 있는 유일한 프로그래밍 언어이므로 다양한 프로그래밍 기능은 물론 디자인 기능인 (이전엔 플래쉬를 이용했던) 애니메이션, 심지어 3D까지 구현이 가능하다. 이건 정말 Crazy하다!
즉 JavaScript는
- 변수에 값을 저장할 수 있다. 위 예제에서 요청해서 받은 새로운 이름을 pain 이라는 변수에 저장했다.
- 프로그래밍에서 문자열(string)이라 불리는 텍스트 조각을 조작한다. 위 예제에서 'Ouch' 와 pain 변수의 값을 합쳐 온전한 텍스트 테이블 ('Ouch, You hurting me!') 를 생성했다.
- 웹 페이지에서 발생하는 어떤 이벤트에 코드가 응답하도록 한다. 위 예제에서 click 이벤트를 사용해서 레이블을 클릭하는 순간을 탐지하고, 그 후 텍스트 레이블을 업데이트 했다.
- 그 외 등등
하지만 위 목록보다 더 흥미진진한 건 클라이언트 사이드 JavaScript 언어 위에 올라가 있는 기능인 애플리케이션 프로그래밍 인터페이스(API, Application Programing Interface)이다.
API
API는 개발자가 직접 구현하기 어렵거나 불가능한 기능들을 미리 만들어서 제공하는 가구 DIY 키트 같은 것이다. 미리 재단된 판과 나사로 책장을 조립하는 게 직접 디자인 한 책장을 적합한 목재를 찾아서 올바른 크기로 재단하고 적합한 나사를 찾아 완성시키는 것보다 훨씬 쉬운 법이다.
브라우저 API 는 웹 브라우저에 내장된 API로 현재 컴퓨터 환경에 관한 데이터를 제공하거나 (위치, 시간, 날씨) 여러가지 유용하고 복잡한 일을 수행한다.
- DOM(Document Object Modal) API 는 HTML 콘텐츠를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등 HTML/CSS를 조작할 수 있다. 페이지 위에 뜨는 팝업창이나 (위 예제처럼) 새로운 컨텐츠가 나타나는 것을 본 적이 있으면 DOM가 동작한 것이다.
- Geolocation API 로 지리 정보를 가져올 수 있다. Google 지도 에서 위치를 찾아 지도에 그릴 수 있는 이유가 바로 이 API다.
- Cavas 와 WebGL API 로 애니메이션을 적용한 2D와 3D 그래픽을 만들 수 있다. Chrome Experiments 와 webglsamples 에서 다양한 예제를 볼 수 있다.
- HTMLMediaElement 와 WebRTC 를 포함하는 오디오와 비디오 API 로 멀티미디어를 자유롭게 사용할 수 있다. 예를 들어 오디오나 비디오를 웹 페이지에서 바로 재생하거나, 웹캠으로 비디오를 찍어 다른 사람의 화면에 보여줄 수 있다(스냅샷 데모).
서드파티 API 는 브라우저에 탑재되지 않은 API로 웹의 어딘가에서 직접 코드와 정보를 찾아야 한다.
- Twitter API 로 최신 트윗을 웹사이트가 보여주도록 구현할 수 있다.
- Google 지도 API 와 OpenStreetMap API 로 웹 사이트에 지도를 삽입하고 지도 관련 기능을 추가할 수 있다.
'TIL LIST > JavaScript' 카테고리의 다른 글
| [기초 이론] Data Type: Primitive (0) | 2022.06.09 |
|---|---|
| [기초 이론] Variable, Constant (0) | 2022.06.08 |
| [기초 이론] How to add the JavaScript to WebPage? (0) | 2022.06.07 |
| [기초 이론] What is the JavaScript doing on WebPage? (0) | 2022.06.06 |
| [기초 이론] 서론 (0) | 2022.06.04 |
