1.1 모던 자바스크립트 - 자바스크립트란?

https://ko.javascript.info/intro

자바스크립트란?

 

# 자바스크립트란?

자바스크립트 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어다.
자바스크립트로 작성한 프로그램을 스크립트(script)라고 부른다. 
스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됨.

스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있다.
이런 관점에서 자바스크립트는 자바와 매우 다른 언어라고 할 수 있다.

```
왜 자바스크립트인가?

처음 자바스크립트는 'LiveScript'라는 이름으로 불렀다. 
그런데, 당시 잘나가던 자바의 유행에 편승하기 위해 이름을 바꿨다.

이름은 자바에서  차용했지만 독자적인 언어이다. 꾸준히 발접을 거듭하면서 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어가 됐다.
자바와는 아무런 연관이 없다.

```

## ECMAScript 란?

다양한 브라우저 에서 웹 페이지 의 상호 운용성 을 보장하기 위한 JavaScript 표준
Node.js 및 기타 프레임워크 를 사용하여 서버 측 애플리케이션 및 서비스를 작성하는 데 점점 더 많이 사용되고 있다.

[ECMAScript](https://en.wikipedia.org/wiki/ECMAScript)


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

브라우저엔 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어있다.
엔진의 종류는 다양한데, 엔진마다 특유의 코드네임이 있다.

- V8 - Chrome과 Opera에서 쓰임
- SpiderMonkey - Firefox에서 쓰임
- IE는 버전에 따라 'Trident’나 'Chakra’라 불리는 엔진을 사용
- ChakraCore는 Microsoft Edg
- SquirrelFish는 Safari

V8정도는 기억하자. 튜토리얼에서도 코드네임을 사용할 에정. ex) 머시기 라는 기능은 V8에서만 지원함
그럼 크롬과 오페라에서만 기능을 지원한다고 이해하면 됨.

## 엔진의 동작원리

엔진 동작의 기본원리

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

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

## 브라우저에서 할 수 있는 일

모던 자바스크립트는 안전한 프로그래밍 언어임.
미모리나 CPU같은 저수준 영역의 조작을 허용하지 않음.
애초에 이러한 접근이 필요치 않은 브라우저를 대상으로 만든 언어이기 때문.

자바스크립트의 능력은 실행 환경에 상당한 영향을 받음. Node.js  환경에선 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원함.
브라우저 환경에선 자바스크립트로 할 수 있는 일은 다음과 같음.

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

## 브라우저에서 할 수 없는 일

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

- 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고 복사하거나 실행할 때 제약을 받을 수 있음.
(운영체제가 지원하는 기능을 브라우저가 직접쓰지못하게 막혀있기 때문임
파일은 다룰 순 있음. 하지만 접근은 제함되어있음. 사용자가 브라우저 창에 파일을 끌어다두거나 인풋 태그를 통해 선택할 때와 같은 특정 상황에서만 파일 접근 허용함)
카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야함.
- 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없음. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열때는 예외가 적용됨. 하지만 이 경우도 도메인이나 프로토콜, 포트가 다르면 페이지에 접근할 수 없음.

이런 제약사항을 동일 출처 정책(Same Origin Policy) 라고 부름. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야함.
동의와 관련된 특수한 자바크립트 코드를 포함하고 있어야함. 

이 제약사항은 사용자의 보안을 위해 만들어짐.

자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있음.
하지만 타 사이트나 도메인에서 데이터를 받아오는 건 불가능함.
가하다해도 원격 서버에서 명확히 승인해줘야함.
HTTP 헤더 등을 이용). 이 역시 보안을 위해 만들어진 제약사항

브라우저 환경 밖, 예를 들어 서버라면 이러한 제약은 존재하지 않을 것임.


## 자바스크립트만의 강점

자바스크립트엔 다양한 장점이 있지만 여기선 세가지만 언급하겠음

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

이 세가지를 모두 지원하는 브라우저 연관 기술은 자바스크립트뿐.
이래서 브라우저 인터페이스 만들 때 자스가 널리 사용됨
이 외에도 자스를 이용해 서버나 모바일 앱을 만드는 것도 가능함.


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

근래엔 브라우저에서 실행하기 전에 자바스크립트로 트랜스파일(변환) 할 수 있는 새로운 언어들이 많이 등장함.
최신 툴을 사용하면 트랜스 파일을 빠르고 명확하게 수행할 수 있음.
최신 도구는 자바스크립트 이외의 언어로 작성한 코드를 '보이지 않는 곳'에서 자바스크립트로 자동 변환해줌

- CoffeeScript 
자바스크립트를 위한 syntactic suga. 짧은 문법을 도입해 병료하고 이해하기 쉬운 코드 작성가능 (Ruby 개발자들이 좋아함)

- TypeScript
자료형의 명시화(strict data typing)에 집중한 언어.(Microsoft가 개발)

- Flow 
자료형을 강제하는데, TypeScript와는 다른 방식을 사용. Facebook이 개발

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



자바스크립트로 트랜스파일 할 수 있는 언어는 다양함. 
개발 언어로 이런 언어 중 하나를 택한다고 하더라도 자신이 무엇을 하고 있는지 이해하려면 결국엔 자바스크립트를 알아야 함.

## 요약

- 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어지만 다양한 환경에서 쓰이고 있다.
- 오늘날 자스는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김함. HTML/CSS와 완전한 통합이 가능함.
- 자스로 트랜스파일 할 수 있는 언어는 많음. 각 언어마다 고유한 기능을 제공함. 자스에 숙달한 뒤에 이 언어들을