[JavaScript] 01. Javascript란?

01. Javascript

- 프로그래밍적으로 웹브라우저를 제어하기 위한 언어였음.

- 탈웹브라우저화 되고있음.

- 웹서버를 동작하기 위한 도구로써 사용이됨.

- 자바스크립트를 웹서버에서도 사용할 수 있도록 하는 기술들 등장 -> Node.js

- 탈웹 -> Google Apps Script 

- ECMAScript 사양을 준수하는 버용 스크립팅언어.

 

* ECMA-262 : Ecma 인터내셔널에 의해 제정된 하나의 기술 규격의 이름. 범용 목적의 스크립트 언어에 대한 명세.

* ECMAScript : Ecma 인터내셔널에의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어.
 -> 'Ecma 인터내셔널 - 국립국어원', 'ECMA-262 - 표준어', ' ECMAScript - 맞춤법과 같은 규칙'

* Javascript 엔진 : Javascript 코드를 이해하고 실행하는 프로그램 또는 인터프리터. 
 -> Google Chrome의 V8, Mozilla Firefox의 SpiderMonkey, Microsoft Edge의 Chakra 등 
 -> 수행능력(Performance) - 속도의 차이가 있음. 지원되는 ECMAScript 버전이 다름. 

* ECMAScript6(ES6) : ECMA-262 표준의 제 6판. ECMAScript 사양의 주요 변경 사항 및 개선사항을 명세함. 

* 바벨(Babel)
-> 개발자들은 ES6에서 새로 도입된 새로운 기술들을 사용할 수 있었지만, 다양한 브라우저 종류로 발생하는 호환성(Cross Browser) 문제 때문에 기술을 손쉽게 사용하기가 쉽지 않았습니다.
특히 Microsoft의 낡은 브라우저인 Internet Explorer가 ES6의 사양을 준수하지 않고 있죠.
->  바벨은 ES6 사양으로 작성된 코드를 함수적으로 동일한 ES5 코드로 바꿔줌.
대부분의 주요 브라우저는 ES5까지는 지원을 하기 때문에, 개발자들은 브라우저 간 호환성 걱정을 덜 수 있었습니다.

 

02. Javascript의 환경

- Javascript 언어를 가지고 환경에 따라 각각 다르게 제어해야함.
- 브라우저 뿐 아니라 서버에서도 실행할 수 있음. 

(1) 웹브라우저    : alert("Hello world");  alert창 출력 /클라이언트 언어

(2) Node.js        : write("Hello world"); 웹페이지에 출력 / 서버 언어

(3) SpreadSheet : msgBox("Hello world"); 메세지박스 출력 / 구글 제품에 대한 언어

 

 

03. Javascript engine

- 자바스크립트 엔진(JavaScript engine)이라 불리는 프로그램이 있어서 모든 디바이스에서 동작 가능.

- 자바스크립트 코드를 실행하는 프로그램. 인터프리터

- 브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어있음.

- 엔진마다 특유의 코드네임

 (1) V8 - Chrome과 Opera에서 쓰임
 (2) SpiderMonkey - FireFox

 (3) Trident, Chakra - IE 버전에 따라 다름

 (4) ChakraCore - Microsoft Edge

 (5) SquirrelFish - Safari

엔진은 프로세스 각 단계마다 최적화를 진행.
컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석, 분석결과를 토대로 기계어로 전환된 코드를 다시 최적화.

1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱)
2. 읽어들인 스크립트를 기계어로 번역 (컴파일)
3. 기계어로 전환된 코드 실행. (기계어이기때문에 실행 속도가 빠름)

 

04. Javascript 장점

- HTML/CSS와 완전히 통합할 수 있음.

- 간단한 일은 간단하게 처리할 수 있게 해줌

- 모든 주요 브라우저에서 지원하고, 기본언어로 사용됨. 

 

05. 코드에디터 (Code Editor)

(1) 통합 개발환경 (IDE - Integrated Development Environment)

- '프로젝트 전체'를 관장하는 다양한 기능 제공

- '개발환경'을 쾌적하게 해주는 통합 환경을 의미.

- 여기에 더해 git과 같은 버전 관리 시스템, 테스팅 환경 등, '프로젝트 수준'의 작업도 지원.

- Visual Studio Code (크로스 플랫폼, 무료) 
- WebStorm (크로스 플랫폼, 유료)

(2) 경량 에디터(lightweight editor)

- IDE 만큼 많은 기능을 제공하진 않지만, 속도가 빠르고 단순.

- 파일을 열고 바로 수정하고자 할때 주로 사용

- IDE와 차이점은 IDE는 '프로젝트' 레벨에서 작동. 하나의 파일만 수정하고 싶다면 경략 에디터가 빠름

- 다양한 플러그인을 지원함 (디렉터리 레벨 문법 분석기, 자동완성 기능 등)

- Atom (크로스 플랫폼, 무료)

- Visual Studio Code (크로스 플랫폼, 무료)

- Sublime Text (크로스 플랫폼, 셰어웨어)

- Notepad++ (Windows, 무료)

- Vim이나 Emacs

 

06. Javascript 시작

- <script>는 웹브라우저에게 지금부터는 자바스크립트 코드이므로 자바스크립트 문법에 따라 해석해 실행하라고 알려주는 구문(태그).

<script>
	alert("hello world");
</script>

 

07.  <script> </script>

- 웹페이지에 자바스크립트 코드를 추가하기 위해 <script> 태그 사용.

- type과 language 속성은 필수가 아님.

- 외부 스크립트 파일은 <script src="path/to/script.js"></script>와 같이 삽입.

- HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단한 파일일 때만 사용.

- 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는게 좋음.

- 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cashe)에 저장하기 때문에, 성능상의 이점이 있음.

- 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와서 사용. 스크립트 파일을 한번만 다운받으면됨. 트래픽이 절약되고 웹 페이지 실제 속도가 빨라짐.

 

08. 주석

- 주석을 달면 코드의 전체적인 길이가 증가.

- 프로덕션 서버에 배포하기 전에 코드를 압축해주는 도구가 많이 있고, 이 도구들은 주석을 삭제해줌.

- 실행 중인 스크립트엔 주석이 들어가지 않으므로, 주석은 최종으로 배포되는 코드에 부정적인 영향을 끼치지 않습니다.

 

09. 엄격모드(strict mode) 

- "use strict"; 이 지시자가 스크립트 최 상단에 오면 스크립트 전체가 "모던한" 방식으로 동작.

- "use strict"; 이 지시자가 함수 본문 앞에오면, 오직 해당 함수만 엄격 모드로 실행됨.

- "use strict"의 위에는 주석만 사용할 수 있음.

- 코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됨.

"use strict";

// 이 코드는 모던한 방식으로 실행됩니다.
...