[JavaScript] The Modern JavaScript Tutorial - (1) An Introduction to JavaScript

An Introduction to JavaScript

JavaScript란?

자바스크립트에서는 프로그램을 스크립트라고 부른다. 이 스크립트는 웹 페이지의 HTML에 맞게 작성되었고, 페이지를 로딩할 때 자동으로 실행된다.

스크립트는 특별한 준비나 컴파일 과정 없이 일반 텍스트(plain text)처럼 제공되고, 실행된다.

자바스크립트는 브라우저에서만 아니라 서버, 나아가서는 자바스크립트 엔진이라고 불리는 프로그램이 있는 어떤 장치에서든 실행이 가능하다.

엔진 동작 과정

1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽는다. (parse)
2. 기계어로 스크립트를 변환한다. (compile)
3. 머신이 코드를 실행한다. 기계어로 전환되었기 때문에 속도가 빠르다.

엔진은 프로세스 각 단계마다 최적화를 진행한다.

 

브라우저에서 JavaScript가 할 수 있는 것은?

모던 자바스크립트는 안전한 프로그래밍 언어이다. 메모리나 CPU에 로우레벨(low-level)한 접근을 제공하지 않는다.

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

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

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

 

브라우저에서 할 수 없는 일

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

• 웹 페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있다. OS가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀 있다. 모던 브라우저를 사용하면 파일을 다룰 수는 있으나, 접근은 제한되어 있다.
• 카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 필요하다.
• 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. 단, 자바스크립트를 사용해서 한 창에서 다른 창을 열 때는 예외가 적용된다. 그러나 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없다. ⇒ 동일 출처 정책(Same Origin Policy)
• 자바스크립트를 이용하면 페이지를 생성한 서버와 정보를 쉽게 주고받을 수 있으나, 타 사이트나 도메인에서 데이터를 받아오는 건 불가능하다. 가능하더라도 원격 서버에서 HTTP 헤더 등을 이용한 명확한 승인이 필요하다.

 

자바스크립트만의 강점

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

 

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

• CoffeeScript - 자바스크립트를 위한 'syntactic sugar'. 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있다.
• TypeScript - 개발을 단순화하고 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)'에 집중하여 만든 언어.
• Flow - 자료형을 강조하나, TypeScript와는 다른 방식을 사용한다.
• Dart - 모바일 앱처럼 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어.

---

 

Manuals and specifications

ECMA-262 명세서

ECMA-262 명세서는 자바스크립트에 대한 가장 자세하고 심도 깊은 정보를 담고 있다.

ECMA-262 - Ecma International

ECMA-262 - Ecma International

 

매뉴얼

MDN JavaScript Reference에 다양한 예제와 정보가 있다. 특정 함수나 메서드에 대한 깊이 있는 정보를 얻고 싶다면 제격인 사이트이다.

JavaScript reference

JavaScript reference - JavaScript | MDN

MSDN 또한 자바스크립트(JScript)와 관련된 광범위한 정보를 얻기 좋은 사이트이다.

docs.microsoft.com/ko-kr/

개발자 도구, 기술 설명서 및 코딩 예제

 

호환성 표

자바스크립트는 새로운 기능이 정기적으로 추가되기 때문에, 특정 브라우저나 엔진이 해당 기능을 지원하는지 확인하는 사이트가 존재한다.

caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

kangax.github.io/compat-table/es6/

ECMAScript 6 compatibility table

 

Developer console

브라우저의 '개발자 도구'를 이용하면 에러를 확인할 수 있다.

ko.javascript.info/article/devtools/bug.html

https://ko.javascript.info/article/devtools/bug.html

F12를 누르면 개발자 도구를 열 수 있다. Mac은 Cmd+Opt+J 또는 Cmd+Opt+I를 누르면 된다.

에러 메시지 아래 파란색 기호 >가 있는 곳엔 자바스크립트 명령어(command)를 입력할 수 있다. 이를 커맨드 라인(command line)이라 부르며, 명령어를 입력한 후 Enter를 누르면 해당 명령어가 실행된다.

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial