자바스크립트 입문하기. - javascript.info

    JavaScript ?    

- 웹페이지에 살아있는 것 같은 동적인 요소를 넣기 위해 생긴 언어.

HTML 페이지 내에 작성되거나, 별도의 파일로 작성되어 웹 페이지가 로딩될 때 자동으로 실행되게 할 수 있다.

 

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

자바 스크립트와 자바
자바 스크립트가 만들어질 당시 초기 이름은 'LiveScript'이었으나, 당시 자바의 인기에 편승하여 자바의 동생 같은 느낌으로 포지셔닝하려고 이름을 '자바'스크립트로 변경하였다.
사실상 자바와 관계 없음!

 

자바 스크립트는 브라우저에서 뿐만 아니라 자바스크립트 엔진이 있다면, 서버에서도 동작 가능하다.

자바 스크립트 가상 머신이라고 불리는 엔진이 웹 브라우저에 내장되어 있음.

- V8 : Chrome, Opera, Edge

- SpiderMonkey : Firefox

- JavaScriptCore, Nitro, SquirrelFish : Safari

etc.

 

How do engines work?
1. 브라우저에 내장된 엔진이 스크립트의 'parses'를 읽어 들임.
2. 스크립트를 컴파일함
3. 컴파일된 코드를 실행. 
각 단계에 최적화를 실행하고, 컴파일된 스크립트를 실행할 때 데이터 흐름을 분석한 후 다시 컴파일된 코드를 최적화함.

 

    In-Browser 자바스크립트가 할 수 있는 것?    

자바스크립트는 메모리나 CPU 같은 low-level접근은 불가능하다. 

노드 js 환경에서 자바스크립트를 사용 시 파일 읽기/쓰기와 네트워크 요청 수행 기능이 지원된다.

- 웹 페이지에 새로운 HTML 추가, 기존 내용, 스타일 변경.

- 사용자가 일으킨 action에 대한 반응 생성 ex) 사용자가 클릭 시 색상 변경하기 등.

- 원격 서버의 네트워크에 요청을 보내거나, 파일 다운 및 업로드( 예) Ajax, Comet 기능 )

- 쿠키 데이터 get, set 및 사용자에게 메시지 전송.

- 로컬 스토리지(client-side) 데이터 기억.

 

브라우저 안에서 자바스크립트가 할 수 없는 것?

- 브라우저상에서 자바스크립트가 할 수 있는 것은 제한적이다(유저의 정보 보호를 위해서). 이는, 잘못된 목적을 갖고 만들어진 웹 페이지에서 사용자의 정보에 접근하거나 사용자의 데이터에 해를 입히는 것을 방지하기 위해서이다.

 

제한되는 부분은 다음과 같다. :

- 웹 페이지의 자바스크립트는 하드 디스크에 arbitrary file을 하드디스크에 읽기/쓰기 불가, 프로그램 복사 또는 실행 불가.

( arbitrary file = 시스템을 수정할 수 있는 파일 )

  최신 웹 브라우저는 브라우저에서 파일에 접근하는 것을 제한적으로 허용한다. 예를 들어, 파일을 브라우저 창에 "drop" 한다던지 <input> 태그 내에서 선택하는 등의 특정 동작을 통해서만 허용.

  카메라/마이크 또는 다른 기기와 연결되어 작동하는 것도 가능하지만, 이 경우 사용자의 명백한 허용이 있어야만 사용 가능. 따라서, 자바스크립트가 활성화된 웹 페이지에서 웹-카메라를 몰래 켜 주변을 감시하거나 정부기관에 정보를 보내는 것은 불가능하다.

 

- 통상 다른 탭/창은 서로를 인지하지 못한다. 단, 만약 유저가 한 창에서 자바스크립트를 활용해 다른 창을 켜는 경우 등의 경우는 서로 인지 가능. 이경우에도 다른 창/탭이 (다른 도메인, 프로토콜 또는 포트로부터 온) 다른 페이지라면 자바스크립트가 다른 페이지를 접근하지 못한다.

"Same Origin Policy"라는 정책으로, 만약 두 페이지가 함께 작동되게 하려면 특별한 자바스크립트 코드를 포함하여 데이터 ㅇ교환이 가능하게 만들어 줘야 한다.

이러한 제한은 사용자의 보안 안전을 위해서라는 것을 분명히 해둔다. 유저가 만약 http://anysite.com이라는 페이지를 열었다면, 이 페이지는 다른 창에서 연 http://gmail.com페이지에 접근, 특히나 정보를 갈취할 수 없어야 한다.

 

- 자바 스크립트는 현재 웹 페이지의 서버와 네트워크를 통해 쉽게 통신할 수 있어야 하지만, 다른 사이트/도메인으로부터는 데이터를 전송받는 능력은 제한된다. 가능은 하지만, 다른 서버로부터 명백하게 상호 협의되었다는 증명을 (HTTP 헤더에 표시되어 있다던지) 요구한다.

 

브라우저 외의 공간에서(예를 들어 서버로) 자바스크립트를 사용할 경우 위의 제한은 무효.

최근의 브라우저는 더 광범위한 권한을 요청하는 플러그인/확장 프로그램을 허용하고 있다.

 

 

     자바스크립트를 특별하게 만드는 것 ?      

- HTML/CSS와 완전히 통합 가능.

- 간단한 작업들을 쉽게 작성 가능.

- 대부분의 인기 브라우저들이 기본 제공하거나 지원됨.

자바스크립트로 서버 생성이나 모바일 애플리케이션 작성 등도 가능하다.

 

      자바스크립트 기반 언어들      

 자바스크립트가 모두의 기호에 맞지 않을 수 있고, 각자의 다양한 요구사항에 맞추어 브라우저가 자바스크립트를 실행하기 전 자바스크립트로 번역되어 사용할 수 있는 수많은 새로운 언어들이 생겨났다.

 새로운 툴을 이용하면 개발자들이 다른 언어로 코드를 작성하더라도 상관없게 자동으로 잘 변환시켜준다.

 

해당 언어 예:

CoffeeScript : "syntactic sugar". 구문을 더 짧게 작성할 수 있어, 더 명확하고 정확한 코드를 작성할 수 있다. Ruby 개발자들이 선호.

TypeScript : 복잡한 시스템의 개발 및 운영보수를 더 쉽게 하기 위해 "엄격한 데이터 타입"을 더한 언어.

Flow : TypeScript와 다른 방식으로 데이터 타입을 더한 언어. Facebook이 개발한 언어.

Dart : 자기 엔진을 가진 독자적인 언어로, 모바일 앱과 같은 브라우저 외 환경에서 실행된다. 구글이 개발한 언어.

Brython : 파이썬을 자바스크립트로 변환하여 온전히 파이썬으로만 애플리케이션을 작성할 수 있게 만든 언어.

Kotlin : 브라우저 또는 노드를 타깃으로 하는 현대화된 간결하고 안전한 프로그래밍 언어.

** 등등 여러 언어가 있다. 위 언어를 사용하더라도 자바스크립트를 알아야 제대로 무슨 일이 일어나고 있는 것인지 이해 가능!

 

        요약      

- 자바스크립트는 브라우저용 언어로 생겨났으나, 지금은 다른 여러 환경에서도 사용되고 있다.

- 오늘날의 자바스크립트는 브라우저 언어로 가장 넓게 사용되고 있으며, HTML/CSS와 완전히 통합하여 사용 가능.

- 자바스크립트로 변환되는 많은 언어들이 있음. 

 

---

해당 내용은 다음의 웹사이트 내용을 번역하며, 공부한 내용을 정리해놓은 것입니다.

https://javascript.info/intro

An Introduction to JavaScript