1. JavaScript란?
브라우저 전용의 스크립트 언어이다.
현재에는 Google, Chrome, FireFox, Safari, Microsoft Edge 등 주요 브라우저에 탑재되어 있다.
Java 언어와 이름이 비슷하지만 전혀 다른 별개의 언어이며 호환성도 없다.
2. JavaScript의 특징
1) 스크립트 언어 : 간편한 코딩을 목적으로 만든 프로그래밍 언어
2) 인터프리터 언어 : 프로그램을 처음부터 일일이 상세하게 해석해 컴퓨터가 이해할 수 있는 형식으로 번역하면서 실행해나가는 언어
3) 여러 환경에서 이용 가능 : 브라우저상에서 동작하는 것을 고려해 만든 언어지만 브라우저 이외에도 Node.js, windows Script Host, Java Platform, Standard Edition, Android/iOS(WebView) 등 여러 환경에서도 동작
| 환경 | 개요 |
|---|---|
| Node.js | 서버 측 용도를 중심으로 한 JavaScript 실행환경 |
| Windows Script Host | Window 환경의 스크립트 실행 환경 |
| Java Platform, Standard Edition | Java 언어의 실행 환경 |
| Android/iOS(WebView) | 웹 페이지를 표시하기 위한 내장형 브라우저 |
3. ECMAScript 2015
표준화 단체 ECMA International이 표준화한 JavaScript 이며
최신판은 ECMAScript2015(ES2015) = ECMAScript 6(ES6)이다.
여러가지 제공되는 사양은 많지만 그중에서 class 명령의 도입으로 java/C#과 같은 클래스 정의가 가능해졌다. 즉, 객체지향 프로그래밍이 직접 가능하게 되었다.
하지만 주요 브라우저가 최신 사양에 대응하려면 시간이 좀 걸리기 때문에
ES2015를 이용할면 트랜스 컴파일러의 도움이 필요하다.
트랜스 컴파일러는 ES2015의 코드를 종래의 ES5 사양의 코드로 변환하기 위한 도구이다.
4. 브라우저의 개발자 도구
브라우저에 표준으로 탑재되어 있는 개발자 도구는 JavaScript/스타일 시트의 개발에 반드시 필요한 강력한 도구이다.
주요 브라우저에서 개발자 도구 시작하는 방법은 다 다르지만 나는 Google Chrome으로 시작하겠다.
1) [설정] - [도구 더보기] - [개발자 도구] 
2) 단축기로 윈도우 <ctrl+shift+I> 맥 <command+option+I>
두가지 방법으로 실행하면 나오는 개발자 도구 화면이다.
Elements : html/CSS 상태 확인
Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등)
Network : 브라우저에서 발생하는 통신 상태
Performance(예전 Timeline패널) : 성능 측정
Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색.
Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집
Audits : 페이지를 분석하고 최적화를 위한 팁 나열
Security : Mixed content 이슈, 인증서 문제 등을 디버깅
4-1 [Elements]탭
[Elements]탭에서는 현재 웹페이지의 소스를 보여줍니다. JavaScript로 동적으로 조작한 결과가 반영되어 있기 때문에 스크립트의 실행 결과를 확인할때 유효하다. 소스나 스타일 역시 마찬가지다.
① Select an element in the page to inspect it : 누르면 웹 페이지의 영역을 선택 할 수 있고 대응 하는 소스가 선택 영역으로 보여진다.
② Styles : 그 요소에 적용된 스타일을 확인 할 수 있다.
③ Computed : 선택한 태그의 최종 CSS가 표시되는곳 이다.
4-2 [Network]탭
브라우저상에서 발생한 통신을 확인할 수 있다. 웹페이지와 웹페이지에 포함된 모든 리소스들이 로딩되는 시간, 리소스 파일크기, 상태 코드, 리소스 타입, 파일 명 등 리소스의 네트워크 전송 정보 확인 및 올바른 요청을 보내고 있는지, 의도한 데이터를 수신하고 있는지를 확인하기 쉽다.
Waterfall : 다운로드 걸린 시간 = 언제, 얼마만큼의 시간이 소요되며 도달하는지에 대한 정보이며 클릭하면 더 자세한 사항을 볼 수 있다.
4-3 [Sources]탭
JavaScript를 이용한 개발에서 가중 중요한 탭이다. CSS, JavaScript 소스 파일 외에 이미지, 동영상 등 웹페이지에 포함된 모든 리소스를 열어볼 수 있는 기능탭이다.
코드 왼쪽의 행 번호를 클릭하면 브레이크 포인트를 설정할 수 있다.
브레이크 포인트는 실행 중에 스크립트를 일시 정지시키기 위한 기능, 정지시킨 포인트를 말한다.
4-4 [Application]탭
현재 웹 페이지를 구성하는 파일 이외에도 스토리지/쿠키, 캐시 사용 정보를 확인 할 수 있다.
4-5 [Console]탭
[Sources]탭과 마찬가지로 JavaScript의 디버그에 [Console]탭은 필수적인 기능이다. 웹 브라우저에서 발생하는 모든 메시지를 표시하는 콘솔이다.
1) 오류 메시지나 로그 확인
2) 콘솔에서 JavaScript의 코드를 직접 입력해서 실행 및 웹페이지 제어
