자바스크립트(JavaScript, JS)란?
자바스크립트(JavaScript, JS)는 스크립트 프로그래밍 언어다.
웹 페이지를 대화형으로 만들 수 있도록 하는 클라이언트 측과 서버 측 모두에서 사용되는 텍스트 기반 프로그래밍 언어이다. HTML과 CSS가 웹 페이지에 구조와 스타일을 부여하는 언어인 반면, 자바스크립트는 웹 페이지에 사용자를 참여시키는 대화형 요소를 제공한다.
모든 웹 브라우저에 인터프리터가 내장되어 있다.
현재 웹 브라우저는 어디에나 있으므로 어디에서나 실행 가능하다고 할 수 있다. 자바스크립트는 세계에서 가장 많이 사용되는 프로그래밍 언어이며 모든 웹사이트의 90% 이상이 클라이언트 사이드 프로그래밍 언어로 사용한다.
초기에는 HTML 문서에 동적인 기능을 추가하기 위해 사용되었으나 구글이 AJAX(Asynchronous JavaScript and XML)로 구현된 Gmail, 지도를 출시하면서 별도의 플러그인 없이도 높은 수준의 웹 애플리케이션 개발이 가능함을 보여주었다.
HTML을 다루는 클라이언트 사이드 언어에서 시작했지만 Node.js의 등장으로 서버 개발도 가능해졌다. 자바스크립트는 소프트웨어, 하드웨어 제어 및 서버와 같은 다양한 응용 프로그램에 사용할 수 있을 만큼 충분히 다재다능하다. 또한 스마트폰 앱, 데스크톱 앱 개발까지 가능하며 예술가들에게도 좋은 도구가 되고 있다. 자바 스크립트로 할 수 있는 것들을 하나씩 살펴보자.
1. 웹 페이지 만들기
자바스크립트와 문서 객체 모델(Document Object Model, DOM)을 통해 HTML 문서를 동적으로 변경할 수 있다. 자바스크립트 이전에는 웹 페이지가 HTML과 CSS로만 작성되었다. HTML과 CSS는 스타일을 지정할 수 있지만 하이퍼링크를 제외하고는 상호 작용할 수 없는 정적 페이지만 만들 수 있다. 자바스크립트로는 다음과 같은 기능 구현이 가능하다.
- 메뉴 또는 정보 표시 및 숨기기
- 마우스 위치에 따른 효과 추가
- 이미지 확대 또는 축소, 동적 갤러리 만들기
- 오디오 또는 비디오 재생
- 애니메이션
- 드롭다운 및 햄버거 스타일 메뉴 만들기
2. 웹 서버, 백 엔드 구축
Node.js의 등장으로 자바 스크립트로 서버 개발도 가능해졌다. 한 가지 언어로 서버-클라이언트 모두를 개발할 수 있는 것이다.
프런트엔드와 백엔드 모두에 대해 전체 스택에서 자바스크립트를 사용하는 것은 응집력 있는 애플리케이션을 생성하기 때문에 훌륭한 방법이다. 가능한 한 많은 코드가 모두 같은 언어로 되어 있으면 단일팀으로 유지 관리, 관리, 업데이트 및 빌드하기가 더 쉬워진다.
프런트 엔드에 사용될 때 자바스크립트는 웹 페이지를 동적이고 대화형으로 만든다. 제출 양식의 유효성을 검사하고, 전체 페이지를 업데이트하지 않고 페이지의 특정 콘텐츠를 업데이트하고, 메뉴를 표시하거나 숨기고, 애니메이션을 표시한다.
백엔드에 사용되는 경우 Node.js 프레임워크를 통해 서버는 프런트엔드 데이터 업데이트를 처리하고 동시 사용자 요청을 처리하기 위해 확장 가능한 네트워크 애플리케이션을 구축할 수 있다.
3. 웹 애플리케이션 만들기
동적인 웹 페이지와 웹 애플리케이션의 구분이 모호하긴 하다. 다만 데스크톱 용 애플리케이션에서나 가능할 것 같던 메일, 스프레드시트, 워드, 이미지 에디터, 동영상 재생, 3D 게임 등을 웹 사이트에 접속하는 것만으로 사용이 가능한 수준이 되었다.
널리 사용되는 자바스크립트 애플리케이션 프레임워크인 React는 Uber, Pinterest, Netflix, Instagram, Amazon, Twitter, Udemy 등과 같은 웹사이트에서 사용된다.
4. 모바일 앱 만들기
페이스북에서 개발한 React Native나 NativeScript, Ionic, Apache Cordova(예전 PhoneGap) 등으로 사용해 자바스크립트로 모바일 앱 만들기가 가능하다. 이런 프레임워크를 사용했을 때의 장점은 iOS, Android 용 앱을 각각 개발하지 않아도 된다는 것이다.
Facebook, Instagram, Shopify, Words with Friends, Skype, Pinterest, Discord, Tesla 및 Uber Eats는 React Native를 사용한다.
5. 데스크톱 앱 만들기
Electron을 사용해 자바스크립트로 데스크톱 앱 만들기가 가능하다. 다음과 같은 앱들이 Electron으로 제작되었다.
- Visual Studio Code
- 워드프레스(WordPress) 데스크톱 앱
- Ghost 데스크톱 앱
- Beaker Browser 데스크톱 앱
- Pexels 데스크톱 앱
- Slack 데스크톱 앱
- WhatsApp 데스크톱 앱
- Skype 데스크톱 앱
- Discord 데스크톱 앱
데스크톱 앱 개발의 위한 프레임워크는 일렉트론 말고도 NW.js, AppJS, Meteor 등이 있다.
6. 게임 만들기
자바스크립트는 브라우저 내 게임을 만드는 데 자주 사용된다. 개발자는 자바스크립트를 사용하여 2D 및 3D 퍼즐, 롤플레잉 게임, 레이싱 게임, 플랫폼 게임 등을 만들 수 있다.
간단한 브라우저 게임을 만드는 것은 초보자로서 자바스크립트 기술을 연습하기 시작하는 좋은 방법이 될 수 있다. 게임 제작을 위한 프레임워크를 제공하는 수백 개의 자바스크립트 게임 엔진 이 있으며 대부분은 무료이며 오픈 소스이다. 인기 있는 게임 엔진으로 Backbone, DarlingJS 및 JawsJS 등이 있다.
7. 예술
시각화, 이미지 및 인터랙티브 콘텐츠 작성을 위해 설계된 프로그래밍 언어 Processing은 Processing.js를 통해 자바 스크립트로도 사용 가능하다. 전문 프로그래머가 아닌 사람들을 위해 설계되었기 때문에 쉽게 웹상에서 애니메이션 구현이 가능하다.