자바스크립트란?, 매뉴얼과 명세서, 코드 에디터, 개발자 콘솔
자바스크립트란?
정의
자바스크립트(JavaScript)
- 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
JavaScript Engine이라 불리는 특별한 프로그램이 있는 모든 디바이스(브라우저, 서버 등)에서도 동작- 브라우저에는
자바스크립트 가상 머신이라는 엔진 내장 - ECMAScript라는 고유한 명세를 갖춘 독립적인 언어
스크립트(script)
- 자바스크립트로 작성한 프로그램
- 웹페이지의 HTML 안에 작성 가능하며, 웹페이지를 불러올 때 자동으로 실행
- 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성하고 실행할 수 있음
엔진의 동작
- 파싱: 엔진(브라우저의 경우, 내장 엔진)이 스크립트를 읽음
- 컴파일: 읽어들인 스크립트를 기계어로 전환
- 실행: 기계어로 전환된 코드 실행
- 프로세스 각 단계마다 최적화가 진행되어 실행 속도가 더욱 빨라짐
브라우저에서 할 수 있는 일
HTML, CSS
- 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
이벤트
- 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등의 사용자 행동에 반응하기
서버 요청, 응답
- 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기 (AJAX, COMET)
쿠키
- 쿠키를 가져오거나 설정하기
사용자 상호작용
- 사용자에게 질문을 건네거나 메시지 보여주기
데이터 저장
- 클라이언트 측에 데이터 저장하기 (local storage)
브라우저에서 할 수 없는 일
메모리, CPU 등 저수준 영역의 조작 불가
- 모던 자바스크립트는 안전한 프로그래밍 언어이기 때문
특정 상황에서만 파일 접근 가능
- 사용자가 브라우저 창에 파일을 끌어다 두는 경우
<input>태그를 통해 파일을 선택할 때- 카메라, 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적 허가 필요
브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없음
- 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외 적용
동일 출처 정책(Same Origin Policy)
- 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근 불가
자바스크립트를 이용해 페이지를 생성한 서버와 쉽게 정보를 주고 받을 수 있음
- 그러나 원격 서버에서 명확히 승인을 해주지 않는다면 타 사이트나 도메인에서 데이터를 받아올 수 없음
자바스크립트만의 강점
- HTML/CSS와 완전히 통합 가능
- 간단한 일은 간단하게 처리
- 모든 주요 브라우저에서 지원하고, 기본 언어로 사용
자바스크립트 너머의 언어들
브라우저에서 실행되기 전에 자바스크립트로 트랜스파일(transpile, 변환)할 수 있는 언어 등장
- 최신 도구는 자바스크립트 이외의 언어로 작성한 코드를 보이지 않는 곳에서 자바스크립트로 자동 변환
- CoffeeScript, TypeScript, Flow, Dart 등
매뉴얼과 명세서
명세서
ECMA-262 명세서(specification)
- 자바스크립트와 관련된 가장 심도 있고 상세한 정보를 담고 있는 공식 문서
- 이 명세서에서 자바스크립트라는 언어를 정의
- 새로운 버전이 매년 나옴
매뉴얼
MDN Javascript Reference
- Mozilla 재단이 운영
- 다양한 예제와 정보 제공
호환성 표
특정 브라우저나 엔진이 내가 사용하려는 기능을 지원하는지 확인하는 것이 필요
코드 에디터
통합 개발 환경(IDE), 경량 에디터(lightweight editor)
개발자 콘솔
Chrome
Cmd+Opt+J(Cmd+Opt+I)