Introduction (JavaScript)

 

내용은 https://javascript.info/ 해당 링크를 참고하여 작성하였다. 

모두 영어라 못 알아듣는 부분도 생길 것 같아 번역과 수정을 같이 헀다.

 

JavaScript 소개

JavaScript의 특별한 점이 무엇인지 JavaScript를 사용하여 무엇을 할 수 있고 어떤 다른 기술이 JavaScript와 어울리는 지 살펴봄. 

 

자바스크립트란?

원래 JavaScript는  "웹 피이지를 살아 있게 만들기 " 위해서 만들어졌음.

이 언어의 프로그램은 스크립트라고 하고 스크립트는 웹 페이지의 HTML에 바로 작성하여 페이지가 로드될 때 자동으로 실행될 수 있음. 

스크립트는 일반 텍스트로 제공되고 실행됨.

실행하기 위해 특별한 준비나 컴파일이 필요하지 않음. 

 

이 부분에서 JavaScript 와 Java는 차이가 발생함.

 

 

그러나 왜 JavaScript라고 부르는가??

 

JavaScript가 만들어질 때 처음에는 LiveScript라는 이름이였지만 그 당시 Java가 매우 인기가 많아 Java의 동생느낌으로 새 언어를 포지셔닝하는 게 도움이 될 거라는 생각을 하고 이름을 JavaScript라고 결정함.

 

그러나 시간이 지나 JavaScript 자체가 발전하면서 ECMAScript라는 자세 사양을 갖춘 완전히 독립된 언어가 되었고 

현재는 Java와는 관련이 없음.

 

 

오늘 날 JavaScript는 브라우저에서만 실행되는 것이 아니라 서버에서도 실행 될 수 있고 사실상 JavaScript 엔진 이라는 특수 프로그램이 있는 모든 장치에서 실행 될 수 있음.

 

브라우저에는 " JavaScript 가상머신 " 이라고도 불리는 내장 엔진이 있음. 

 

엔진마다 이름이 다름.

 

예를 들어

v8 : Chrome이나 Opera , Edge에서 사용 

SpiderMonkey : Firfox 

IE의 경우 "Chakra", Safari의 경우 "JavaScriptCore", "Nitro" 및 "SquirrelFish" 등과 같은 다른 이름이 있음.

 

위의 용어는 개발자 기사에서 사용이 되니까 기억을 해두면 좋음. 

여기서도 사용하는데 에를 들어 기능 x를 V8이 지원을 한다면 Chrome , Opera , Edge에서도 작동할 가능성이 큼.

 

엔진은 어떤식으로 작동을 하나?

 

1. 엔진 ( 브라우저인 경우엔 내장형 ) 은 스크립트를 읽음. (parses the script)

2. 그 다음 스크립트를 기계어로 변환 ( 컴파일) 함. 

3. 기계어가 실행됨. 

 

엔진은 프로세스의 각 단계에서 최적화를 적용함. 

컴파일된 스크립트가 실행되는 것을 지켜보고 이를 통해 흐르는 데이터를 분석하고 해당 지식을 기반으로 기계어를 더욱 최적화함. 

 

아마 프로파일링을 이야기하는 게 아닌가 싶다. 

 

 

 

브라우저 내 JavaScript로 무엇을 할 수 있는가?

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

원래는 메모리나 CPU에 대한 저수준 액세스를 제공하지 않음. (아마 C나 C++ 과 같이 메모리에 접근할 수 있는지 없는지를 이야기 하는듯)

 

그 이유는 메모리나 CPU가 필요하지 않은 브라우저를 위해 만들어졌기 때문임. 

 

JavaScript의 기능은 실행되는 환경에 따라 크게 달라짐. 

예를 들어 Node.js는 JavaScript가 임의의 파일을 읽고 쓰고 네트워크 요청을 수행하는 등의 기능을 지원함. 

 

브라우저 내 JavaScript는 웹 페이지 조작 , 사용자와의 상호작용 , 웹 서버와 관련된 모든 작업을 수행 가능함. 

 

예를 들어 브라우저 내 JavaScript는 아래와 같은 내용을 수행할 수 있음. 

 

페이지에 새로운 HTML을 추가하고 , 기존의 콘텐츠를 변경하고 , 스타일을 수정함.

사용자 동작에 반응하고 , 마우스 클릭 , 포인터 움직임 , 키 누름등으로 실행됨.

네트워크를 통해 원격 서버에 요청을 보내고 파일을 다운로드 및 업로드함. (AJAX , COMET 기술)

 

AJAX , COMET

 

AJAX는 페이지의 현재 상태를 방해받지 않고 백그라운드에서 서버와 통신하는 웹 애플리케이션을 구현하는 데 사용할 수 있는 광범위한 웹 기술 그룹을 나타냄.

 

COMET은 HTTPS 요청을 통해 웹 서버가 브라우저에서 명시적으로 요청하지 않고도 브라우저에 데이터를 푸시할 수 있는 웹 애플리케이션 모델.

 

 

쿠키를 가져와 설정하고 방문자에게 방문자에게 질문하고 메시지를 표시함.

클라이언트 측의 데이터를 기억함. (로컬 스토리지)

 

브라우저 내 JavaScript로 할 수 없는 일 ?

브라우저의 JavaScript 기능은 사용자의 안전을 보호하기 위해 제한되어 있음.

목적은 악의적인 웹페이지가 개인 정보에 액세스하거나 사용자의 데이터를 해치는 것을 방지하기 위함임.

 

이러한 예시는 다음과 같음.

 

웹 페이지의 JavaScript는 하드 디스크의 임의 파일을 읽거나 쓸 수 없고 , 복사하거나 프로그램을 실행할 수 없음.

OS 기능에 직접 접근할 수 없음.

 

최신 브라우저에서는 파일을 처리할 수 있지만 액세스가 제한되며 사용자가 브라우저 창에 파일을 "놓아 놓기"나 <input> 태그를 통해 파일을 선택하는 등 특정 작업을 수행하는 경우에만 제공이 됨 .

 

카메라 / 마이크 및 기타 장치와의 상호 작용법은 존재하지만 사용자의 명시적 허가를 필요로 함. 그러므로 JavaScript가 활성화된 페이지는 몰래 웹 카메라를 활성화하여 주변을 관찰하고 정보를 NSA(  미국 국방부 산하 정보기관 )에 전송할 수 없음.

 

아마 NSA에서 정보 수집을 하려해도 JavaScript의 경우에 사용자의 허가를 필요로 하기 때문에 마음대로 접근하지 못한다라는 걸 이야기하고 싶은 것 같음.

 

다른 탭/창은 일반적으로 서로에 대해 알지 못함. 하지만 때로는 서로에 대해 알 고 있음. 

예를 들어 한 창이 JavaScript를 사용하여 다른 창을 여는 경우가 있음. 

하지만 이 경우도 한 페이지의 JavaScript가 다른 사이트(다른 도메인 , 프로토콜 , 포트)에서 온 경우 다른 페이지에 액세스하지 못할 수 있음.

 

이것을 "Same Origin Policy"라고 함. 이를 해결하기 위해선 두 페이지 모두 데이터 교환에 대해 동의해야 하며 이를 처리하는 특수 JavaScript 코드를 포함하고 있어야 함.  나중에 튜토리얼에서 다룸. 

 

이 제한은 사용자의 안전을 위한 것임. 만약 사용자가 연 페이지가 http://anysite.com일 때 다른 브라우저 탭에 액세스하여 거기에서 정보를 훔칠 수 없어야 함. 

 

JavaScript는 인터넷을 통해 현재 페이지가 시작된 서버와 쉽게 통신할 수 있음. 하지만 다른 사이트 / 도메인에서 데이터를 수신하는 기능은 제한적임. 가능하지만 원격 측에서 명시적인 동의 (HTTP헤더로 표현)가 필요함. 

이는 안전하기 위함임.

 

조금 더 이해하기 쉽게 이야기 해보면 

 

동일 출처 정책으로 웹 브라우저는 보안을 위해 현재 페이지를 제공한 서버 ( 같은 도메인)와의 통신은 자유롭지만 다른 도메인과의 통신은 제한함. 

 

CORS : 만약 JavaScript가 다른 도메인의 데이터를 받아오고자 하면 해당 도메인의 서버가 명시적으로 요청을 허용하는 HTTP 헤더를 ( 예: Access-Control-Allow-Origin) 포함해야 함.

이것은 보안상 외부 사이트로부터 무단 데이터 접근을 막기 위한 장치임.

 

브라우저 외부에서의 JavaScript를 실행했을 때 즉 Node.js와 같이 서버 측에서 JavaScript를 실행한 경우엔 이런 보안 제한이 적용되지 않음. 즉 서버 측에서는 임의의 다른 사이트나 도메인과 자유롭게 통신이 가능하다는 의미.

 

브라우저 확장 프로그램(플로그인 / 익스텐션)의 경우 기본 웹 페이지보다 더 넓은 권한 ( 다양한 도메인에 접근할 수 있는 권한)을 요청할 수 있음. 

만약 사용자가 이 권한을 승인하게 되면 확장 프로그램은 브라우저의 기본 보안 제한을 넘어 더 많은 기능을 수행할 수 있게 됨.

 

JavaScript를 독특하게 만드는 것은 ? (장점)

 

1.HTML/CSS와의 완벽한 통합. 

2.간단한 일을 간단하게 이루어짐.

3.모든 주요 브라우저에서 지원이 되며 기본적으로 활성화되어 있음.

 

JavaScript는 위의 3가지의 장점을 가지고 있는 유일한 브라우저 기술임. 

이것이 브라우저 인터페이스를 만드는데 가장 널리 퍼진 도구가 된 이유임.

 

즉 JavaScript를 사용하면 서버 , 모바일 애플리케이션 등을 만들 수 있음.

 

JavaScript를 넘는 언어

 

JavaScript의 구문은 모든 사람의 필요에 맞는 것은 아님. 사람마다 원하는 기능이 다름. 

 

그 이유는 프로젝트와 요구사항이 다 다르기 때문임.

그래서 최근에는 브라우저에서 실행되기 전에 JavaScript로 변환(트랜스 파일)되는 많은 새로운 언어들이 등장함.

 

A라는 언어가 있는데 이걸 원래는 웹 브라우저에서 실행을 하지 못하니 실행하기 전에 JS로 변환후(트랜스파일) 실행해주는 것을 이야기함.

 

최신 툴을 사용하면 변환이 매우 빠르고 투명하게 이루어져 개발자가 다른 언어로 코드를 작성하고 "내부적으로" 자동 변환할 수 있음.

 

예시로는 CoffeeScript , TypeScript , Flow , Dart , Brython , Kotlin 등등이 있음. 

 

우리가 이러한 언어들 중 하나를 쓰더라도 우리가 무엇을 하는건지 정확하게 알려면 JavaScript에 대해 알아야 함.