1. 자바스크립트란 | 예열

도비김·2024년 2월 22일

JS

목록 보기

2/5

'웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그램언어
JavaScript, JS = ECMAScript, ES
모던 자바스크립트는 안전한 프로그래밍 언어로 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않는다.

스크립트

자바스크립트로 작성한 프로그램을 스크립트(scrip)라 부르며, 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행 할 수 있다.

엔진

자바스크립트는 자바스크립트 엔진이 있는 모든 디바이스에서 동작한다. 브라우저에는 '자바스크립트 가상 머신' 엔진이 내장되어 있다. 엔진별로 지원 기능이 다를 수 있다.

v8 : Chrome & Opera
SpiderMonkey : Firefox
chakraCore : Edge
SquirrelFish : Safari

엔진은 파싱(엔진이 스크립트 읽음), 컴파일(스크립트 기계어로 전환), 실행 순으로 동작한다. 각 단계마다 최적화 하고, 컴파일이 끝나면 감시하며 분석해 다시 최적화하기도 한다.

브라우저에서 가능한 일

JS는 환경의 영향을 많이 받는다. Node.js에서 환경에서는 임의의 파일을 읽고 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.

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

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

브라우저에서 불가능한 일 - 보안을 위해

웹페이지 내 스크립트는 디스크에 저장된 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받는다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못한다. 모던 자바스크립트는 다를 수 있지만 접근은 제한된다.
사용자가 끌어다 두거나 <input> 태그를 통해 파일을 선택하는 등 특정 상황에만 파일 접근 허용한다.
카메라, 마이크 같은 디바이스와 상호작용하려면 사용자의 명시적 허가가 있어야한다.
브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. JS로 한창에서 다른 창을 열때는 예외가 적용되나, 이 경우에도 도메인, 프로토콜, 포트가 다르면 다른 페이지에 접근할 수 없다. 다른 사이트가 정보를 훔처가는 것을 막기 위함이다.
이런 제약을 '동일 출처 정책(Same Origin Policy)'라 부른다. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 js코드를 포함해야 한다.
js를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고 받을 수 있다. 하지만 타 사이트나 도메인에서 데이터를 받아오는건 불가능하다. 가능하더라도 원격 서버에서 승인을 해줘야한다.(HTTP헤더 등으로).
브라우저 밖에선 이런 제약이 없지만, 모던 브라우저에선 추가 권한 허가를 요청하는 프러그인이나 익스텐션 설치가 허용된다.

JS의 강점

HTML/CSS와 완전 통합할 수 있다.
간단한 일은 간단하게 처리
모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

JS가 완벽하진 않기 때문에, 브라우저에서 실행되기 전에 JS로 트랜스파일 할 수 있는 새로운 언어가 등장했다.

CoffeeScript : js를 위한 'syntactic sugar'. 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드 작성
TypeScript : 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 '자료의 명시화(strict data typing)'에 집중해 만든 언어
Flow : 자료형 강제
Dart : 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어

이런 언어들도 결국엔 js를 알아야 한다.