[코어 JS] 1.1 - 자바스크립트란?

1.1 자바스크립트란?

정의

'웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어

JS로 작성한 프로그램을 스크립트(script)라고 부름, 스크립트는 웹페이지의 HTML내에 작성할 수 있고 웹페이지를 불러올 때 스크립트가 자동으로 실행됨

특별한 준비나 컴파일 없이 보통의 문자형태로 작성, 실행 가능

자바(Java)와는 매우 다른 언어

 

i 왜 자바스크립트인가?

처음 LiveScript로 불리다가 인기많은 Java의 이름을 이용해 홍보하기 위해 명칭이 바뀜, 자바와는 독자적인 언어, 꾸준한 발전으로 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어가 됨

 

JS는 브라우저뿐 아니라 서버에서도 실행 가능, 이 외에도 JS엔진(JS engine)이라 불리는 특별한 프로그램이 들어있는 모든 디바이스에서 동작가능

브러우저에는 'JS 가상머진'이라 불리는 엔진이 내장되어 있음

엔진의 종류는 다양하고 특유의 코드네임이 있음

- V8 : Chrome, Opera에서 쓰임

- SpiderMonkey : Firefox에서 쓰임

- Trident, Chakra : IE에서 쓰임

- ChakraCore : Microsoft Edge에 쓰임

- SquirrelFish : Safari에 쓰임

 

i 엔진은 어떻게 작동하는가?

1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽음(파싱, parsing)

2. 읽어들인 스크립트를 기계어로 전환(컴파일, compile)

3. 기계어로 전환된 코드 실행, 기계어로 전환되었기 때문에 실행속도가 빠름

엔진은 프로세스 단계마다 최적화 진행,

컴파일이 끝나고 실행중인 코드를 감시하면서 코드로 들어가는 데이터를 분석하고, 분석결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 함, 이런 과정에서 스크립트 실행 속도는 더 빨라짐

 

브라우저에서 할 수 있는 일

모던 JS는 '안전한' 프로그래밍 언어, 메모리나 CPU같은 저수준 영역의 조작을 허용하지 않음, 애초에 이러한 접근이 필요치않은 브라우저를 대상으로 만든 언어 이므로

JS의 능력은 실행 환경에 상당한 영향을 받음, Node.js 환경에서는 임의의 파일을 읽거나 쓰고 네트워크 요청을 수행하는 함수를 지원

브라우저 환경에서 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든일 가능

브라우저에서 JS로 할 수 있는 일

- 페이지에 새로운 HTML을 추가하거나 기존 HTML 혹은 스타일 수정

- 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응(이벤트)

- 네트워크를 통해 원격 서버에 요청을 보내거나 파일 다운로드, 업로드(AJAX, COMET과 같은 기술 사용)

- 쿠키를 가져오거나 설정하기, 사용자에게 질문을 건내거나 메시지 보여주기

- 클라이언트 측에 데이터 저장하기(로컬 스토리지)

 

브라우저에서 할 수 없는 일

브라우저는 보안을 위해 JS의 기능에 제약을 걸어놓음, 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상시키는 것을 방지하기위해서

- 디스크(컴퓨터 저장공간같은??)에 저장된 임의의 파일을 읽거나 쓰고 복사하거나 실행할 때, 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문에 제약을 받을 수 있음

모던 브라우저를 사용하면 파일을 다룰 수는 있지만 접근이 제한되어 있음, 사용자가 브라우저 창에 파일을 '끌어다 두거나' <input> 태그를 통해 파일을 선택할 때 등과 같은 특정 상황에서만 파일 접근이 허용됨

카메라, 마이크 같은 디바이스와 상호작용을 위해서는 사용자의 명시적인 허가가 필요, JS가 활성화된 페이지라도 사용자 몰래 웹 카메라를 작동시켜 수집한 정보를 전송할 수 없음

- 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없음, 하지만 JS를 사용해 한 창에서 다른창을 열 때는 예외적 적용되지만 이 경우에도 도메인, 프로토콜, 포트가 다르면 페이지에 접근할 수 없음 (=동일 출처 정책(Same Origin Policy))

이를 피하기 위해서는 두페이지는 데이터 교환에 동의해야 하고 동의와 관련된 특수한 JS코드를 포함하고 있어야함

사용자의 보안을 위해 만들어진 제약사항

- JS를 이용하면 페이지를 생성한 서버와 쉽게 정보 공유가 가능하나 타 사이트나 도메인에서 데이터를 받아오는 것은 불가능, 가능한 경우여도 원격 서버에서 명환한 승인 필요(HTTP 헤더 등을 이용), 보안을 위해 만들어진 제약사항

 

브라우저 환경 밖에서는 존재하지 않을 제약이며, 모던 브라우저에서는 추가 권한허가를 요청하는 플러그인이나 익스텐션 설치가 허용됨 ??????모던 브라우저는 무엇을 의미?

 

JS만의 강점

- HTML/CSS와 완전한 통합 가능

- 간단한 일은 간단하게 처리 가능

- 모든 주요 브라우저에서 지원하고 기본언어로 사용됨

이 모두를 지원하는 브라우저 연관 기술은 JS뿐, 이러한 특징으로 JS는 브라우저 인터페이스 생성시 가장 널리 사용, 이 외에도 JS를 이용해 서버나 모바일 앱 만들기도 가능

 

JS '너머의' 언어들

근래에 브라우저에 실행되기 전 JS로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어 등장, 최신 툴을 사용하여 트랜스파일을 빠르고 명확하게 수행가능, 최신도구는 JS이외의 언어로 작성한 코드를 '보이지않는 곳에서' JS로 자동변환해줌

- CoffeScript : JS를 위한 'syntactic sugar', 짧은 문법을 도입하여 명로하고 이해하기 쉬운 코드 작성, Ruby개발자 선호

- TypeScript : 개발을 단순화하고 복잡한 시스템을 지원하는 목적으로 '자료형의 명시화(strict data typing)'에 집중해 만든 언어, Microsoft 개발

- Flow : TypeScript와 다른 방식으로 자료형을 강제함, Facebook 개발

- Dart : 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어, Google 개발

 

요약

- JS는 브라우저에서만 쓸 목적으로 고안된 언어이나 다양한 환경에서 쓰임

- 오늘날 JS는 브라우저 환경에서 가장 널리 쓰이는 언어, HTML/CSS와 완전한 통합이 가능

- JS로 '트랜스파일'할 수 있는 고유의 기능을 가진 언어들이 존재함, JS 숙지 후 다양한 언어에 접근해보기