자바스크립트는 애초에 웹페이지에 생동감을 주기 위해("make webpages alive")만들어졌습니다.
이름 그대로 스크립트 언어이며 HTML 문서 내에 바로 작성되어 페이지가 로드될 때 바로 실행될 수 있습니다. 스크립트는 실행 시 컴파일이나 특별한 준비 없이 일반 문서 형태로 작성되어 제공됩니다.
자바스크립트는 만들어질 당시 "LiveScript"라는 이름을 가지고 있었는데, 당시 Java가 크게 유행하고 있어 그 동생격으로서 도움을 줄 수 있는 언어라는 점을 알리기 위해 이름을 JavaScript로 개명합니다.
그러나 점차로 자바스크립트는 완전히 독립적인 언어로 진화하게 되고 ECMAScript라는 자체 사양을 가진 언어로 발전하여 현재는 Java와는 별개의 존재가 되었습니다.
현재는 브라우저 뿐만 아니라 서버나 장치 등 JavaScript Engine을 내장한 어느 곳에서나 사용 가능합니다. 그리고 이 엔진을 내장한 브라우저를 자바스크립트 가상 머신(JavaScript virtual machine)이라고 부르기도 합니다.
이 엔진이라는 것이 또 여러 종류가 있어서,
크롬, 오페라 브라우저에서는 V8
FireFox에서는 SpiderMonkey
IE에서는 Trident, Chakra
Edge에서는 ChakraCore
Safari에서는 Nitro, SquirrelFish 등의 이름으로 불립니다.
이 엔진의 내부 구조는 복잡합니다만 기본 원리만 보면 간단합니다.
- 엔진이 스크립트를 읽어서(parse)
- 스크립트를 기계어로 변환(compile)
- 기계가 코드를 실행
브라우저 내장 JavaScript에서 가능한 것
자바스크립트는 "안전한" 언어입니다. 왜냐하면 애초에 브라우저용으로 만들어졌으므로 메모리나 CPU에 대해 low level 접근을 허용하지 않기 때문입니다.
자바스크립트의 기능은 실행되는 환경에 따라 달라지는데, 예를 들어 Node.js는 자바스크립트가 임의의 파일을 읽고 쓰거나, 네트워크 요청을 수행하는 일을 할 수 있도록 해줍니다.
브라우저 내장 자바스크립트는 웹페이지의 조작, 사용자-웹서버간 상호작용에 대한 모든 작업을 수행할 수 있습니다.
- 웹페이지에 새로운 HTML을 추가하고, 기존 내용을 변경, 스타일 수정
- 사용자의 조작에 반응하고, 마우스 클릭, 포인터 이동, 키 누름과 같은 행동 시 실행
- 원격 서버로 네트워크를 통해 요청을 보내고 파일을 다우로드/업로드 할 수 있게 함(소위 AJAX나 COMET 기술을 말합니다)
- 쿠키를 가져오거나 설정하고 페이지 방문자에게 질문을 하거나 메세지를 보여줄 수 있음.
- 클라이언트 측의 데이터("local storage")를 기억할 수 있습니다.
브라우저 내장 JavaScript에서 불가능한 것
나쁜 의도를 가진 웹페이지가 사용자의 개인 정보에 접근하는 것을 막기 위해 브라우저에서의 기능은 제한되어 있습니다.
그 제한의 예는 아래와 같은 것들입니다.
* 웹페이지의 자바 스크립트는 하드 디스크 상 임의의 파일을 읽기/쓰기/복사가 원칙적으로 허용되지 않습니다. OS 시스템 기능에 직접 접근도 불가능합니다.
최신 브라우저에서 파일 작업을 할 수는 있지만 접근은 제한되며, 기본적으로 사용자가 직접 파일을 브라우저 창에 끌어다 놓거나 <input> 태그를 사용해서 직접 지정하는 경우에만 가능합니다.
마이크나 카메라와 같은 주변 기기들에 대한 접근도 사용자의 명시적 허용이 있을 때로 제한됩니다. 따라서 마음대로 웹카메라 같은 것을 조작하여 국정원으로 보내는 짓은 불가능합니다...(원문에 NSA로 되어 있습니다. National Security Agency. 미 국가안전보장기구 말입니다.)
* 서로 다른 창/탭은 서로에 대해 알지 못합니다. 예외는 하나의 창이 다른 창을 열거나 했을 경우인데 이 경우에도 열린 페이지가 다른 사이트(다른 도메인, 프로토콜, 포트)등에서 온 경우에는 접근하지 못할 수 있습니다.
이것을 "Same Origin Policy"라고 부릅니다. 이것을 해결하려면 두 페이지 모두가 데이터 교환을 위한 특별한 자바스크립트 코드를 가지고 있어야 합니다.
이것은 역시 사용자 안전을 위한 조치인데, 예를 들어 하나의 창에 어떤 사이트가 열려있고 다른 창에 이메일 창이 열려 있을 경우 다른 사이트에서 이메일 정보를 취득하는 것과 같은 일을 방지하기 위해서 입니다.
*자바스크립트는 페이지를 불러온 서버와는 쉽게 통신 가능하나 다른 사이트/도메인과 데이터를 주고 받는 것은 제한되어 있습니다. 가능한 경우는 원격지의 HTML 헤더에 명시적으로 동의되어 있는 경우 뿐입니다. 이 또한 안전 문제 때문입니다.
이런 제한들은 브라우저 외의 곳에서 자바스크립트가 사용될 경우에는 가해지지 않습니다.
에디터와 개발자 Console
자바 스크립트를 실행해볼 수 있는 것은 크게 두가지 방법이 있는데 하나는 에디터를 이용해서 코드 파일을 직접 만들고 브라우저로 열어 실행해보는 것이고, 다른 하나는 브라우저에 내장된 개발도구를 사용해서 간단히 적용해 보는 것입니다.
에디터
에디터는 Visual Studio Community, WebStorm, Netbeans 같은 통합개발환경(IDE)도 있고 그보다는 기능이 적지만 아주 가벼운 경량의 에디터들도 있습니다.
경량 에디터로는 Visual Studio Code, Atom, Sublime Text, NotePad++등이 있는데,
무엇을 사용해도 되겠으나 저는 생활코딩에서와 마찬가지로 Sublime Text 에디터를 사용하겠습니다. 호기심의 영역에서 간혹 Visual Studio Code도 써 볼 겁니다.
개발자 콘솔
코드는 에러를 만들기 마련입니다. 그런데 브라우저에서 사용자는 에러를 확인할 수가 없기 때문에 스크립트에 문제가 있어도 확인과 수정이 어렵습니다.
이 에러를 확인하고 유용한 정보를 얻기 위해 브라우저에 개발자 도구라는 것을 내장하기 시작했습니다.
그 도구가 잘 되어 있는 것이 크롬과 파이어폭스 브라우저입니다. 제가 사용하는 것은 크롬이므로 그것을 기준으로 살펴보겠습니다.
먼저 여기를 열어보도록 하겠습니다.
열어본 페이지의 자바스크립트에는 오류가 있습니다. 일반 유저의 눈에는 보이지 않으므로 F12 키를 눌러 개발자 도구를 엽니다.
사용 버전에 따라 조금씩 다르겠지만 기본적으로 위와 유사한 창이 뜰겁니다. 그리고 아래 Console이라 된 부분에 에러 메시지가 있습니다.
그 콘솔 창에 자바스크립트 커맨드를 입력하고 엔터를 치면 실행해볼 수 있습니다.(Shift+엔터는 여러줄 입력 가능)
자세한 내용은 추후 Debugging in Chrome 편에서 다룹니다.
이제 기본적인 환경설정은 끝났으니 본격적으로 시작해 보겠습니다.
댓글 없음:
댓글 쓰기