[JS Deep Dive] 2장 - 자바스크립트란?

 

1.  📌 자바스크립트란? 

 

자바스크립트는 이름만 들었을 때 '자바(JAVA) ' 와 혼동이 될 수 있다.

하지만 자바스크립트와 자바는 매우 다른 언어이며 

자바스크립트는  ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다.

 

맨 처음 등장했을 때에도 웹페이지의 보조적인 기능을 수행하기 위해 등장했고 처음 웹브라우저인 넷스케이프 네비게이터에 탑재되어 탄생하였고 "모카" , "라이브스크립트" 라는 이름들을 거쳐 "자바스크립트" 라는 이름으로 탄생하게 되었다.

 

자바스크리트로 작성한 프로그램을 스크립트(script) 라고 부른다.

스크립트는 웹페이지의 HTML 안에 작성할 수 있는데 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.

스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고 실행도 할 수 있다.

 

 

2. Ajax

Ajax 란 비동기 자바스크립트와 XML 을 말한다. 

즉 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하여 XML, 일반 텍스트 형식 등을 포함한 다양한 포맷을 서버와 브라우저가 데이터를 교환할 수 있는 기능이다.  

 

이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML 코드를 서버에서 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다.

따라서... 화면이 전환되면 서버로부터 새로운 HTML 전송받아 웹페이지 전체를 !! 처음부터 다시 렌더링해야했다.

따라서 이러한 방식은 변경할 필요가 없는 부분까지 포함된 HTML 코드를 서버로부터 다시 전송받기 때문에 불필요한 데이터 통신이 발생하고 홤녀이 전환되면 화면이 순간적으로 깜빡이는 현상까지 발생했다.

 

Ajax 의 도입으로 인해 비동기 방식이 되면서 불필요한 전체 렌더링이 줄어들 수 있어 획기적인 패러다임이 되었다.

Ajax 를 사용하면 요청과 관련된, 정말 필요한 부분만 부분적으로 갱신하여 필요한 데이터와 자원만 받아올 수 있고

새로고침하지 않고도 웹에서 무언가를 부르거나 데이터를 조회하고 싶은 경우에 사용한다.

 

 

 

 

3. 자바스크립트의 특징

자바스크립트는 HTML, CSS, 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 *인터프리터 언어이다.

 

3-1 인터프리터 와 컴파일러 언어 

🤔 인터프리터가 멀까 ? ? 
인터프리터 언어는 소스 코드를 한 줄 씩, 즉 변역과 실행을 동시에 실행하는 것이다. 

 

 

 

우리 이 사진을 봐보자. 위에가 인터프리터 언어, 밑에는 컴파일 언어이다.

 

⏯️ 인터프리터 언어

• 인터프리터 언어는 소스코드를 한 줄 씩, 변역과 실행이 동시에 일어난다.
• 명령어 한 줄 씩 컴파일링이 되기 때문에 명령어 한 줄 한 줄이 중요하다.
• 따라서 Markdown 형식의 Jupyter 노트북 같은 것이 개발 된 것이다.
• 코드가 실행될 때마다 인터프리터 과정이 반복 수행되어 속도가 느리다.
• 대표적인 예시로는 Python, R, JavaScript 가 있다.

 

⏯️ 컴파일 언어

• 컴파일 언어는 내가 작성한 소스 코드 전체를 기계어로 번역하여, 이 번역된 코드를 한번에 실행하는 두 단계를 거쳐서 진행되어 번역과 실행이 완전히 따로 이루어진다.
• 한 번에 컴파일링 하는 것이기 때문에 구조가 중요하다.
• 따라서 구조가 중요하기 때믄에 "객체지향성 언어" 가 발전이 된 것이다.
• 컴파일 언어는 단 한 번 실행이 되기 때문에 속도가 빠르다. 
• 대표적으로는 C, C++, Go 등이 있다.

 

 

 

4. ES6 라는게 무엇일까? 

먼저 ES 가 무엇인지를 알아보자.

ES는 ECMAScript 의 약자이다.

ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다.

 

넷스케이프 커뮤니케이션즈로 부터 Javascript가 개발되고 나서 MS로 부터 JScript 개발되었다.

두 언어는 호환되지 않는 경우가 있어, 기능이 모든 브라우저에서 동일하게 동작하지 않는 '크로스 브라우징 이슈' 가 나타났다.

 

이 크로스 브라우징 이슈를 해결하기 위해 Javascript를 표준화 한 것이 ECMAScript이다.

우리가 흔히 사용하는 ES5, ES6은 버전 숫자를 붙여 ECMAScript를 줄여쓰는 말이다.

차이점을 간단하게 말해보자!

특징	ES5	ES6
변수선언	var 키워드로 변수 선언	-let 과 const 키워드로 변수 선언할 수 있음 -블록 스코프 가짐
클래스	-클래스 개념 x -함수와 프로토타입을 사용해 객체지향 프로그래밍 구현	-클래스 개념이 추가되어 정의할 수 있음
함수표현식	전통적인 함수 선언식(function) 사용	화살표함수 (=>) 문법이 추가되어 간결하게 표현가능
템플릿리터럴	문자열 연결시 + 연산자 사용	백틱 (` ` ) 을 사용하여 문자열 간결하게 표현
모듈	외부라이브러리 사용	import , export 키워드로 모듈 기본적으로 지원

 

1.  

이외에도 많은 기능들이 ES6 에 추가되었담

 

 

 

 

 

 

 

reference

https://wikidocs.net/13875