Today
-
Yesterday
-
Total
-
  • [JavaScript] JavaScript란?
    Web/JavaScript 2021. 4. 28. 23:14

    자바스크립트? ECMAScript? Node.js?

    웹을 처음 접했을 때 사실은 Node.js와 JavaScript의 차이를 그냥 서버에서 쓰는 자바스크립트정도로만 알고있었다. 자바스크립트에 대한 첫 포스트인 만큼 오늘은 확실하게 정리를 하고 가야겠다.

     

    웹이 빠른 속도로 발전하면서 많은 개발자들은 본인들의 웹페이지에 동적인 요소를 추가하고자 하는 니즈가 생기기 시작했다. 그렇게 자바스크립트(JavaScript)는 넷스케이프(Netscapte) 웹 브라우저에서 웹 페이지에 동적인 요소를 구현하기 위해 처음 발명되었다. 그 후 다른 웹 브라우저들이 이 언어를 탑재하기 시작하면서 이 수많은 브라우저들에서 자바스크립트가 동일하게 잘 작동하기 위한 표준 규격이 필요해졌다. 이 때문에 ECMA 국제기구에서 "ECMAScript Standard"라 불리는 스크립트 표준이 만들어졌다.

     

    JavaScript = ECMAScript + BOM(Browser Object Model) + DOM(Document Object Model)

     

    더보기

    ES6(ECMAScript 6)에 추가된 기능

    1. Block Level Scope  let, const 

    2. Arrow Funciton  ( ) => { }

    3. Template String, Grave Accent  `${ }`

    4. Module export, import

    5. Class

    6. Spread Syntax [...], {...}

    7. Ternary Operator ? :

    ES11에 추가된 기능 (나중에 좀 더 알아봐야겠다)

    1. BigInt

    2. Dynamic Import

    3. Optional Chaining console.log(person?.job?.manager?.name);

    4. Nullish Coalescing Operator   const userName = name ?? 'Guest';

    5. Promise.allSettled

    6. matchAll

    7. globalThis

    JavaScript 엔진(JavaScript Engine)

    자바스크립트를 설명할 때 브라우저에 내장되어있는 자바스크립트 엔진을 빠뜨릴 수 없는데 가장 대표적인 엔진이 바로 크롬브라우저의 V8 엔진이다. (엔진의 작동 원리도 다음에 한번 알아봐야겠다)

    자바스크립트는 소스코드를 바이너리 코드로 변환(컴파일)시켜 작동시키는 컴파일러 언어와 다르게 소스를 컴파일과정 없이 한줄 곧바로 해석하여 바로 명령어를 실행하는 인터프리터언어(스크립트언어)다. 이렇게 소스를 해석하는 역할을 바로 자바스크립트 엔진이 담당한다. 정말로 중요한 친구다. 그렇기 때문에 어떤 자바스크립트 엔진이냐에 따라 성능의 차이도 나고, 지원되는 ECMAScript 버전이 다르다. (특히 국내에서 아직도 가장 많이 사용되고 있는 IE는 2015년에 업데이트된 ES6조차 지원을 안한다고 한다...)

     

    웹 호환성 

    이 때문에 브라우저를 신경쓰지 않고 최신 문법의 ECMASciprt를 활용해서 웹서비스를 개발하게 된다면 IE같은 브라우저에서는 내 서비스가 동작을 하지 않을 수도 있다. 하지만 국내에서는 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 (완벽하게 동일하지는 않더라도 모든 기능과 동작이 동일하게 지원되는) 웹 서비스를 누릴 수 있도록 규정을 두고있다.

     

     

    트랜스파일러 (Transpiler)

    웹 호환성의 벽에 가로막혀 ES 최신 문법을 쓸 수 없다고 좌절할 필요는 없다. A라는 프로그래밍 언어로 작성 된 소스 코드를 B라는 언어로 작성 된 소스코드로 변환하는 것을 트랜스파일이라고 하고, 이를 수행하는 것을 트랜스파일러라고 한다. 마침 ES 최신 문법을 구형 브라우저가 이해할 수 있는 ES5로 변환 해주는 다양한 트랜스파일러들이 있다. 바벨, TypeScript등의 트랜스파일러를 이용해서 ES6이상의 문법을 동일한 ES5문법으로 변환해 모든 브라우저에서 작동하는 웹앱을 만들 수 있다. (엄밀히 말하면 TypeScript는 트랜스파일러가 아니라 JavaScript의 상위 호환인 프로그래밍 언어이다. 이 TypeScript로 작성 된 파일을 내 앱에 배포할 때 TypeScript에 내장 된 트랜스파일러를 통해 JavaScript로 변환시켜준다)

     

    컴파일(Compile) & 트랜스파일(Transpile)

    컴파일은 특정 언어로 작성 된 소스코드(High Level Programming Language)를 로우 레벨 언어(기계어 등)로 변환하는 것을 말하고,
      ex) C => 기계어 / Java => Byte Code

    트랜스파일은 특정 언어로 작성 된 소스코드를 다른 언어의 소스코드로 변환하는 것을 말한다.
      ex) C++ => C / ES6 => ES5 / TypeScript => ES5

    Node.js

    앞서 살펴봤듯 JavaScript는 원래 웹 브라우저 위에서만 동작할 수 있는 스크립트언어였다. 하지만 Node.js가 나오고 나서부터는 JavaScript가 브라우저 밖에서도 작동을 하게 되었고, 이를 통해 JavaScript로 웹 서비스 뿐만아니라, 서버, PC등 다양한 분야에서 프로그램을 제작할 수 있게 되었다! Node.js는 구글의 오픈소스 자바스크립트 엔진 V8으로 빌드 된 JavaScript Runtime이다. 이 글은 용어에 대한 개념만 정리하는 포스팅이니 상세한 내용은 다음에 또 다뤄보도록 하겠다.

     

    다음에는 JavaScript의 동작 원리에 대해서 한번 정리를 해보자!

     

     

     

     

     

    * 혹시 잘못 된 부분이 있다면 댓글로 남겨주시면 감사하겠습니다!

    댓글 0