[JavaScript] 자바스크립트란?

※ 해당 게시글은 영어로 된 글을 번역하여 올린 것으로 오역이나 의역이 있을 수 있습니다.

원글 : https://javascript.info/intro#what-can-in-browser-javascript-do

이번 글에서는 자바스크립트의 특이한 점, 이걸 통해 무엇을 얻을 수 있는지, 또 다른 기술과 잘 어울리는지에 대해 살펴보겠습니다.

자바스크립트가 뭔가요?

자바스크립트는 처음에 "웹페이지가 살아있는 것"처럼 만들기 위해 만들어졌습니다.

프로그래밍에서 이 언어를 스크립트(scripts)라고 부릅니다.

웹페이지의 HTML에서 바로 작성 가능하고 페이지가 로드되면 자동으로 실행됩니다.

스크립트는 평문으로 작성되고 실행됩니다. 이 말은 즉 실행되기 위해 특별한 준비나 컴파일이 필요하지 않다는 것입니다.

이러한 측면에서, 자바스크립트는 자바랑 완전히 다르다고 볼 수 있습니다.

 📌 그렇다면 왜 자바스크립트라고 불리나요?
자바스크립트가 처음 만들어졌을 때는 "LiveScript"라는 이름이었는데요.
그 당시에 자바가 인기 있어지면서 새로운 언어를 자바의 동생(younger brother)으로 위치시켜 자바의 도움을 받고자 하여 이름이 JavaScript가 되었습니다.

그러나 자바스크립트는 'ECMAScript 사양'(ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어)에 따라 독립적인 언어가 되었고 더 이상 자바랑은 관계가 없게 되었습니다. 

오늘날, 자바스크립트는 자바스크립트 엔진이라고 불리는 특별한 프로그램이 있는 모든 디바이스(브라우저, 서버 등)에 사용이 가능합니다.

브라우저에는 자바스크립트 가상머신이라고 불리는 엔진을 지니고 있습니다.

엔진마다 코드 이름이 다른데요.

• V8 - 크롬, 오페라, 엣지
• SpiderMonkey - 파이어폭스
• 차크라 - IE, 자바스크립트코어, 니트로
• Squireel Fish - 사파리 등등

 앞으로 문서에서 기술할 "기능 X는 V8에서 지원됩니다." 등의 문장이 있을 경우 기능 X는 크롬과 오페라, 엣지에서 작동하는 기술입니다.

📌 엔진은 어떻게 작동하나요?
엔진은 복잡합니다. 그러나 기초는 굉장히 쉽습니다.
1. 엔진(브라우저에 임베디드 되어 있는)이 스크립트(구문 혹은 낱말 등)를 읽습니다.
2. 그다음 스크립트를 기계어로 변환(컴파일)합니다.
3. 그리고 기계어가 실행됩니다, 꽤 빠르게.

엔진은 프로세스의 각 단계에서 최적화를 적용합니다. 심지어는 컴파일된 스크립트가 실행되는 동안 지켜보고, 스크립트를 통해 흐르는 데이터를 분석하고 분석된 데이터를 기반으로 머신 코드를 최적화합니다.

 

자바스크립트는 브라우저에서 무엇을 할 수 있나요?

모던 자바스크립트는 "안전한" 프로그래밍 언어입니다. 

모던 자바스크립트는 처음부터 브라우저를 위해 만들어졌기 때문에 메모리나 CPU 등 low-level에 대한 접근을 허용하지 않습니다.

자바스크립트의 기능은 실행 중인 환경에 따라 크게 달라지는데 예를 들어 Node.js의 경우, 자바스크립트가 임의로 파일을 읽고 쓸 수 있고, 네트워크 요청 등의 기능을 지원합니다.

브라우저 내에서 자바스크립트는 웹페이지 조작, 사용자와의 상호작용, 웹서버와 관련된 모든 것을 할 수 있습니다.

예를 들어, 브라우저 내에서 자바스크립트가 가능한 것들은

• 새로운 HTML을 페이지 내 삽입, 기존 내용 변경, 스타일 수정
• 사용자의 action에 따른 반응, 마우스 클릭 실행, 포인터 이동, 키 누르기
• 네트워크를 통해 원격 서버로 요청을 보내고, 파일을 다운로드 및 업로드 (AJAX와 COMET 기술)
• 쿠키들을 가지고 오고 세팅하고, 방문자에게 질문 및 메시지를 보여줌
• client-side에서(로컬 스토리지) 데이터를 기억

반대로 자바스크립트는 브라우저에서 무엇을 할 수 없나요?

자바스크립트의 브라우저 내 기능은 유저의 안전성 보호를 위해 제한됩니다.

악성 웹페이지가 개인정보에 접근하거나 사용자의 데이터를 손상시키는 것을 방지하기 위함입니다.

예를 들어,

• 웹페이지의 자바스크립트는 하드디스크의 임의 파일을 읽거나 쓰고, 복사하거나 프로그램을 실행할 수 없습니다. 운영체제 기능(OS function)에 접근할 수 없습니다. 현대 브라우저는 파일 작업을 허용하지만, 접근은 제한적이고 사용자가 브라우저 창에 파일을 드롭하거나 <inpit> 태그를 통해 파일을 선택하는 등의 특정 작업을 수행할 때만 가능합니다. 카메라/마이크 등 장치와 상호 작용할 수 있는 방법이 있지만 사용자의 명시적인 허가가 필요하고. 몰래 웹캠을 켜서 주변을 관찰하고 정보를 NSA에 전송하는 일은 불가능합니다.
• 멀티가 안됩니다. 가 아니라 열어놓은 다른 탭과 창은 서로 상호작용 하지 않습니다. 예를 들어, 한 창이 자바스크립트를 사용하여 다른 창을 여는 경우가 있습니다. 그러나 이 경우에도 한 페이지의 자바스크립트가 다른 사이트(다른 도메인, 프로토콜 또는 포트)에서 온 경우 다른 페이지에 액세스 하지 못할 수 있습니다.
  (본문이 아닌 추가정보) 렌더링엔진이 탭별로 실행되어 호환될 수 없는 구조입니다. 예를 들어 크롬 브라우저 정책 중 site isolation이라는 정책이 있는데 이것을 멀티프로세스아키텍처라고 부릅니다. 결론? 각 탭은 다른 사이트입니다.
  이것을 “동일 출처 정책(Same Origin Policy)”이라고 합니다. 우회하려면 두 페이지 모두 데이터 교환에 동의해야 하며, 이를 처리하는 특수 자바스크립트코드가 포함되어 있어야 합니다. 다시 돌아와서 이 제한점은 사용자의 안전을 위함입니다. 사용자가 열어둔 anysite라는 어떤 사이트에서 다른 탭에서 열린 gmail.com 페이지에 접근하여 정보를 훔치는 일이 없도록 하기 위함입니다.
• 자바스크립트는 현재 페이지가 온 서버(came from)와 쉽게 네트워크 통신을 할 수 있습니다. 하지만 다른 사이트/도메인에서 데이터를 받는 것은 제한적입니다. 가능하긴 하지만, 받으려고 하는 곳에서의 명시적 동의가 필요합니다.(HTTP 헤더로 표현) 이를 안전 제한이라고 합니다.

이러한 제한은 자바스크립트가 서버에서 사용되는 경우(브라우저 외부에서 사용될 경우)에는 존재하지 않습니다. 현대 브라우저는 확장 프로그램 / 플러그인을 허용하며, 확장된 권한을 요청할 수 있습니다.

자바스크립트의 특별점?

자바스크립트에는 3가지 뛰어난 점이 있습니다.

• HTML/CSS와의 완전한 통합
• 간단한 작업은 간단하게 처리 가능
• 모든 주요 브라우저에서 지원되며 디폴트로 활용됨

자바스크립트는 위 3가지를 모두 결합한 유일한 브라우저 기술입니다.

위 이유들이 브라우저 인터페이스를 만드는 데 가장 널리 사용되는 도구인 이유입니다.

그렇지만 자바스크립트는 서버나 모바일 애플리케이션 등을 만드는데도 사용할 수 있습니다.

 

자바스크립트 "위의" 언어들

자바스크립트의 문법이 모든 사람들의 요구를 충족하지는 못합니다. 사람들마다 원하는 기능이 다르기 때문입니다.

모든 사람마다 다른 프로젝트와 다른 요구사항이 있기 때문에 예상할 수 있는 일입니다.

그래서 최근에는 브라우저에서 실행되기 전 자바스크립트로 트랜스파일(변환)되는 새로운 언어들이 많이 등장했습니다.

현대 도구들은 트랜스파일을 매우 빠르고 알기 쉽게 만들어주어, 실제로 개발자들이 다른 언어로 코딩하고 이를 “내부적으로” 자동 변환할 수 있게 합니다.

예시로는 다음과 같습니다.

• CoffeeScript : 문법적으로 더 짧은 것을 도입하여 명확하고 정밀한 코드를 작성할 수 있게 해 주며 주로 Ruby 개발자들이 선호합니다.
• TypeScript : “엄격한 데이터 타입”을 추가하는데 중점을 둡니다. Microsoft에서 개발되었습니다.
• Flow
• Dart
• Kotlin

이외에도 더 많은 언어가 있습니다.

물론 자바스크립트를 알아야 트랜스파일된 언어를 사용하더라도 우리가 무엇을 하고 있는지 제대로 이해할 수 있습니다.

 

Summary - 요약

• 자바스크립트는 처음에는 브라우저 전용 언어로 만들어졌지만, 다른 환경에서도 사용됩니다.
• 오늘날, 자바스크립트는 브라우저 언어로서 가장 널리 채택되었으며, HTML/CSS와 완전히 통합된 독특한 위치를 차지하고 있습니다.
• 자바스크립트로 “트랜스파일”되어 특정 기능을 제공하는 많은 언어가 있습니다. 자바스크립트를 숙달한 후에 언어들을 간단히 살펴보는 것이 좋습니다.