[JavaScript] 자바스크립트란? (개념 및 특징)

📢 들어가기 전에

본 포스팅에선 모던 JavaScript 튜토리얼을 학습/복습한 내용을 다룬다.

💛 자바스크립트란?

자바스크립트는 웹 페이지에 생동감을 붙어넣기 위해 만들어진 프로그래밍 언어이다.

스크립트

자바스크립트로 작성한 프로그램을 스크립트라고 부른다.

스크립트는 웹페이지의 HTML안에 작성할 수 있는데, 웹 페이지를 불러올 때 스크립트가 자동으로 실행된다.
스크립트는 컴파일러 없이 보통의 문자 형태로 작성/실행할 수 있다.

"자바"스크립트라고 불리는 이유

위 스크립트의 특징을 보면, 자바(JAVA)랑은 매우 다른 언어임을 알 수 있다.
하지만 왜 자바스크립트라고 불리는걸까?

 

처음 자바 스크립트가 만들어졌을 때는, LiveScript 라는 이름으로 불렸다.
그런데 그 당시 자바의 인기가 아주 높은 상황이었고,
관련인들은 자바스크립트를 자바의 동생 격인 언어로 홍보하면 도움이 될 것이라는 의사결정을 내리고 이름을 바꾼 것이라고 한다. 😅

💛 자바스크립트 엔진

자바스크립트는 브라우저 뿐만 아니라 서버에서도 실행할 수 있다.
이 외에도 자바스크립트 엔진이라 불리는 특별한 프로그램이 들어있는 모든 디바이스에서도 동작한다
자바스크립트 엔진은 자바스크립트 가상 머신이라고 불리기도 한다

브라우저에도 자바스크립트 가상 머신이 내장되어 있다.

브라우저	자바스크립트 가상 머신
Chrome, Opera	V8
Firefox	SpiderMonkey
IE	Trident, Chakra
Microsoft Edge	ChakraCore
SquirrelFish	Safari

엔진 동작 과정

1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽는다.(파싱)
2. 읽어들인 스크립트를 기계어로 전환한다(컴파일)
3. 기계어로 전환된 코드가 실행된다. 기계어로 전환되었기 때문에 실행속도가 빠르다

엔진은 프로세스 각 단계마다 최적화를 진행한다.
심지어 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 한다.
이런 과정을 거치면 스크립트 실행 속도는 더욱 더 빨라진다.

 

🚨 참고
스크립트 부분에서 자바스크립트는 컴파일 없이 작성/실행 가능하다고 했었는데, 자바스크립트 엔진에선 컴파일을 한다고 한다.

그래서 자바스크립트는 인터프리터 언어인가 컴파일 언어인가?

 

결론적으론 둘 다 가능하다.
자바스크립트는 기본적으로 컴파일이 필요없는 인터프리터 언어이다.
하지만 자주 반복되는 코드들은 최적화 하기 위해 엔진이 컴파일을 한다.
이렇게 우선 인터프리터 방식으로 실행하고 필요할 때 컴파일 하는 방법을 JIT(Just-In-Time) 컴파일 이라고 한다.
대부분 브라우저의 자바스크립트 엔진이 같은 방법을 사용하고 있다.

💛 자바스크립트가 브라우저에서 하는 일

자바스크립트는 브라우저에서 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있다.

• 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
• 마우스 크릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
• 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
• 쿠키를 가져오거나 설정하기, 사용자에게 질문을 건네거나 메시지 보여주기
• 클라이언트 측에 데이터 저장하기(로컬 스토리지)

💛 자바스크립트가 브라우저에서 할 수 없는 일

브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았다.
이런 제약은 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 만들어졌다.

• 웹 페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있다.
  운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문.
  카메라나 마이크 같은 디바이스와 상호작용하려면 사용자의 명시적인 허가가 있어야한다.
• 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다.
  그런데 자바스크립트를 사용해 한 창에서 다른 차을 열 때는 예외가 적용된다.
  하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르면 페이지에 접근할 수 없다.
  이런 제약 사항은 동일 출처 정책(Same Origin Policy)이라고 부른다.
  이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야한다.
• 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고 받을 수 있다.
  하지만 타 사이트나 도메인에서 데이터를 받아오는 건 불가능하다.
  가능하다 할 지라도 원격 서버에서 명확히 승인을 해줘야한다.(HTTP 헤더 등을 이용)
  이 역시 보안을 위해 만들어진 제약 사항이다.

💛 자바스크립트만의 강점

• HTML/CSS와 완전히 통합할 수 있음
• 간단한 일은 간단하게 처리할 수 있게 해 줌
• 모든 주요 브라우저에서 지원하고 기본 언어로 사용됨
• 서버나 모바일 앱 등도 제작 가능

💛 자바스크립트 너머의 언어들

근래 브라우저에서 실행되기 전에 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어들이 등장하였다.

• CoffeeScript
  • 자바스크립트를 위한 syntactic sugar
  • 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있다.
• TypeScript
  • 자료형의 명시화(strict data typing)에 집중해 만든 언어
  • Microsoft가 개발
• Flow
  • TypeScript와는 다른 방식으로 자료형을 강제
  • Facebook이 개발
• Dart
  • 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어
  • Google이 개발