[JavaScript] JavaScript의 이해

안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.

비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.

온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.

저처럼 초보자 웰컴이에용.

 

지금까지 JavaScript 코드에 대해 블로그 글을 여러 개 작성했지만,

JavaScript에 대한 이해는 되짚지 못한 것 같습니다.

그래서 이번 포스트에서는 JavaScript의 개념을 상세히 정리하는 시간을 가져보도록 할게요.

 

---

 

[JavaScript란?]

Javascript는 1995년 Netscape Navigator라는 웹 브라우저에 처음으로 탑재되어 세상에 공개되었습니다. 

사람들이 JAVA와 JavaScript를 혼동하는 경우가 많은데,

JavaScript는 JAVA의 유명세를 이용하기 위해 JAVA 이름을 따서 JavaScript로 이름을 정했을 뿐

JAVA와 JavaScript는 전혀 관계가 없습니다. 

 

[ECMAScript와 ES6]

ECMAScript는 여러 브라우저를 만든 개발사에서 통일된 JavaScript의 기능을 구현할 수 있도록 문법과 기능을 세부적으로 정의해놓은 표준 명세서입니다. 

즉, 자바스크립트 언어의 표준이라 할 수 있습니다. 

ECMAScript는 자바스크립트를 이루는 코어 스크립트의 언어로, 웹환경에만 호스트 되는 언어가 아닙니다.

웹 환경은 ECMAScript가 호스트되는 환경들 중 하나일 뿐입니다. 

 

ECMAScript를 ES라 줄여부르고 버전에 따라서 ES뒤에 숫자가 붙는데 ES5는 2009년에 만들어졌고 ES6는 2015년에 만들어져 지금까지도 널리 사용중입니다. 

현재 자바스크립트의 기준은 ES5로 이루어져있지만 ES6에서 새로운 기술들이 도입되면서 보다 효율적인 코드작성이 가능해졌습니다.

 

[크로스 브라우징_Cross-Browser Compatibility]

브라우저의 종류에는 Internet Explorer, IE edge, Chrome, FireFox, Safari 등 수많은 브라우저가 있습니다.

그래서 어느 브라우저에는 동작하지만 어느 브라우저에서는 동작하지 않는 경우도 있습니다.

그래서 어떤 브라우저를 사용하든 잘 동작하도록 JavaScript 코드를 짜는 것을 브라우저 간 호환성을 확보한다고 말합니다. 

이러한 호환성 문제를 극복하기 위해서 브라우저 간 호환성 문제를 해결해주는 라이브러리들이 개발되었고,

각 브라우저 개발사들이 ECMAScript 표준을 따라 브라우저를 구현하기 시작했습니다. 

 

ES6가 공개된 후 부터는 브라우저 간 호환성 문제가 조금씩 해결되기 시작했습니다. 

 

---

5초에 하나씩 JavaScript의 기능이 새로 생성된다는 말이 있을 정도로 JavaScript는 빠르게 발전하고 있습니다. 

그러나 JavaScript를 지원하지 않는 브라우저는 항상 존재하고

개발자들은 이러한 문제를 해결하기 위해 항상 고민합니다. 

 

이러한 문제를 해결하기 위해 사용하는 두 가지 도구가 있는데,

바로,

트랜스파일러(Transpiler)와 폴리필(Polyfill) 입니다. 

 

[트랜스파일러_Transpiler]

 

→ 언어 자체의 레벨을 다운그레이드 하는 것

ES6 문법은 IE, mobile, 옛날 모델인 갤럭시 S3의 삼성 브라우저를 지원하지 않습니다.

그러나 이러한 옛날 모델을 사용하는 사용자는 생각보다 매우 많습니다. 

예를 들어서,

ES7코드를 작성 > 크롬에서 동작하지만, IE에서는 동작하지 않습니다.

그러면 개발자들은 IE를 위해 ES5로 불편하게 코드를 작성해야 할까요? 

 

그래서 이를 해결하기 위해 트랜스파일러를 사용합니다. 

ES6코드를작성하고 > 트랜스파일러로 > ES5로 변환하여 웹에다 적용시킵니다. 

즉, 트랜스파일러는 ES6를 ES5로 변환시켜 주는 도구입니다.

 

이전에 우리가 browserify를 통해 bundle.js를 만들어 index.js에서 호출하여 사용한 것처럼

모든 브라우저에서 동일하게 상요할 수 있도록 하는 것이 트랜스파일러입니다. 

 

 

[폴리필_Polyfill]

→ 어떤 신규 기능에 대해 기능을 사용할 수 있도록 기능을 내리는 것

2013년에 출시된 갤럭시 s3,

2019년에 출시된 갤럭시 s10

 

2013년의 갤럭시 s3에서 2019년에 출시된 갤럭시s10으로 갈 동안 브라우저가 여러 번 업데이트되었을 것입니다.

또한 개발자들은 2019년에 출시된 갤럭시 s10의 브라우저에 맞추어 개발하는 것이 더 쉬울 것입니다. 

 

최신 기능에 맞추어 2013년 갤럭시s3 브라우저의 지원이 끊길 경우

s10에 맞추어 개발된 기능은 갤럭시 s3사용자들은 새롭게 개발된 기능을 사용할 수 없습니다.

 

이 문제를 해결하기 위해 폴리필 도구를 이용하여

최신 기능으로 코딩해도 구버전 기기에서도 사용할 수 있도록 합니다. 

 

즉, 최신 기능으로 쉽게 코딩하고 구버전에서도 사용할 수 있도록 하는 도구를 폴리필이라 합니다.