프론트엔드 스쿨을 수료하고 새롭게 자바스크립트 스터디가 열렸다.
이 스터디를 진행하며,
'초심자를 위한 JavaScript 핵심 정리' 라는 무료책을 출판하기로 한다.
총 17개 chapter로 내가 맡은 part는 총 3개로 아래와 같다.
- 초심자가 알면 좋은 JS 생태계
- 비동기
- 예외처리
첫 번째 파트의 초고(?)를 완성했다.
다른 스터디에 참여했을 때는 아무래도 습득한 내용을 공유하는 데에 치중이 되어 있으니 이해의 비중 80%, 발표내용 정리 20% 였는데,
이번 스터디는 출간으로 남는 자료라고 생각하니 한줄 한줄 작성하는게 어려워졌다.
이해의 비중 120%, 내용 정리 100% 정도로 향상된 듯 하다.
행여나 잘못 작성할까 한 문장에 해당 내용을 다룬 5-6 페이지의 사이트를 들여다 보고 책이며 위키피디아를 찾아가며 cross-check 한다.
논문을 다시 쓰는 기분이고 너무나 좋다.
스터디가 끝나기 전까지 계속 수정하고 추가해야 겠다.
오늘은 간단히 첫 번째 파트를 공유해 본다!
팀원 : 유현세, 맹하령
초심자라면 알아두어야 할 JS 생태계
자바스크립트를 공부하다보면 ES6, v8, node.js, npm, jquery 등등 자주 접하는 개념들이 있다. 문법을 배우기 전에 초심자가 꼭 알아두어야할 주요 개념들을 ‘ECMA Script, JavaScript Runtime, Frameworks, Library, CSS in JavaScript, Module Bundlers’ 여섯 개의 자바스크립트 생태계로 분류하고 소개한다. 이 자바스크립트 생태계에 대한 큰 개념을 이해하고 나면 이후 소개하는 문법을 습득하거나 향후 다른 프레임워크를 공부할 때에 도움이 될 것이다.
1. ECMA Script 의 등장
1-1. ECMA Script의 탄생 배경
1996년 3월, 당시의 웹브라우저 시장 점유율 90%를 차지하던 넷스케이프 커뮤니케이션즈 (이하 넷스케이프 사) 는 네비게이터 2.0을 출시하면서 자바스크립트를 지원하기 시작했다. 이후 웹 페이지 동작을 향상시키는 경량의 프로그래밍 언어가 인기를 끌자 Microsoft사 에서 IE 3.0에서 동작하는 ‘JScript’라는 매우 비슷한 언어를 만들어 냈고 IE 이외에도 다양한 브라우저들이 자바스크립트 문법을 만들어 내게 된다.
이로인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 빈번하게 발생하면서 표준화된 자바스크립트의 필요성이 대두되기 시작했다. 이를 위해 1996년 11월, 넷스케이프 사는 ECMA 인터네셔널에 자바스크립트의 표준화를 요청한다. 그 결과 1997년 7월, 자바스크립트의 표준화 초판이 완성되었고 2015년도 부터는 매 해 새로운 문법이 추가되어 배포되고 있다.
한마디로 ECMA Script는 ECMA 인터내셔널에서 정의한 ECMA-262 기술 규격을 토대로 만든 표준 스크립트 프로그래밍 언어이며, 자바스크립트의 뼈대를 구성하는 언어이다.
- ECMA 인터네셔널 (Ecma International) : 정보와 통신 시스템의 표준을 관리하는 비영리 표준화 기구
1-2. ECMA Script version
개발을 공부하다보면 ‘ES6부터 도입된 문법입니다~’ 라는 말을 많이 듣게 되는데, 왜 유독 ES6에 대한 언급이 많은 것일까?
사실 ES6 (ECMA Script6의 줄임말) 이전 버전의 문법에는 크고작은 불편함이 많았다. 하지만, ES6 부터 ES5이하 명세에서 문제가 되던 부분들을 속 시원히 해결하는 let, const ,Promise , Class , Arrow function 등의 문법들이 대거 추가되면서 가독성이나 유지보수성이 크게 향상되었다. 이러한 변화를 가져온 덕에 ES6에 대한 언급이 많다는 점을 알아두자.
ECMA Script는 현재까지 ES2022/ES13 버전이 배포 되었고 계속 업데이트 되고 있다. 2022년에는 class 속성과 관련된 내용이 주를 이루고 있다. 따라서 우리는 공식 페이지에서 매해 업데이트 되는 문법을 확인하고 반영해가며 개발해야한다는 점을 잊지말자.
- ES 버전의 update를 확인할 수 있는 ECMA-인터네셔널 공식 사이트: https://www.ecma-international.org/
2. JavaScript Runtime
런타임(runtime)이란 프로그래밍 언어가 동작할 수 있는 환경을 말하는데, 자바스크립트는 브라우저와 node.js 두 환경에서 실행이 가능하다.
자바스크립트의 두 가지 런타임 환경에 대해 알아보자.
2-1. Browser
자바스크립트 런타임에는 자바스크립트 엔진이 필수적으로 필요한데, 자바스크립트 엔진이란 개발자가 작성한 자바스크립트 코드를 해석하고 실행시켜주는 프로그램 혹은 인터프리터를 말한다.
각 브라우저 마다 각기 다른 자바스크립트 엔진이 존재하는데, 그 종류는 다음과 같다.
a) 브라우저 별 JavaScript Engine의 종류
- V8 (Google Chrome, Opera, Edge)
: 2008년 등장한 구글의 v8 엔진은 가장 빠른 성능을 자랑하고 node.js, Chrome 브라우저 등에서 사용된다. - spidermonkey (Firefox)
: 최초의 자바스크립트 엔진으로 넷스케이프 사에 의해 개발이 되었고 Mozilla Firefox에서 사용된다. - chakra (Internent Explorer)
: chakara의 Jscript9은 Internet Explorer용이고 JavaScript는 Microsoft edge용이다. - JavaScript Core (IOS, Safari)
: Nitro 라는 이름으로도 알려져 있는 애플이 사파리를 위해 개발한 엔진이다.
b) 각 브라우저의 ES6 지원현황
출처: https://kangax.github.io/compat-table/es6/
2022년 현재 모던 브러우저의 ES6 지원 비율은 98%~99% 이고 Internet Explorer11는 ES6를 대부분 지원하지 않지만, 2022년 6월 15일 지원이 중지되므로 대부분의 브라우저에서 지원한다고 볼 수 있다.
행여 브라우저에서 아직 지원하지 않는 최신 기능을 사용해야 하는 상황이 발생한다면 바벨과 같은 트랜스파일러를 사용하여 코드를 변환해주면 된다.
c) Transpiler, ‘바벨(Babel)’
트랜스파일러로는 바벨이 코드를 최적화 하는 많은 플러그인을 보유하고 있어 가장 유명하고 많이 사용된다.
바벨은 최신 자바스크립트 코드를 구 버전 자바스크립트 코드로 호환 가능하도록 변환해주는 것이 주된 기능이지만, 현재는 바벨을 이용해서 리액트의 JSX문법, 타입스크립트 같은 정적 타입언어, 코드압축, 정식 문법이 아닌 Proposal 까지 처리해주어 확장성이 매우 뛰어나다.
2-2. node.js
자바스크립트의 또다른 런타임 환경인 node.js는 라이언 라인하트 달(Ryan Lienhart Dahl)의 ‘언어 하나로 서버 쪽 어플리케이션까지 한번에 만들면 어떨까?’ 라는 발상에서부터 개발되어 2009년 세상에 공개되었다.
구글이 v8 자바스크립트 엔진을 오픈소스로 공개하면서 node.js는 v8 엔진으로 빌드되었으며, 자바스크립트가 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저로부터 독립시켜 서버측에서 실행된다. node.js의 등장 이후로 자바스크립트의 단점이었던 ‘속도' 부분을 향상 시킬 수 있게 되었다.
node.js는 서버 사이드 에플리케이션 개발에 필요한 모듈이나 HTTP, 파일 시스템과 같은 내장 API를 제공하는데, 이 모든 모듈의 설치나 업데이트, 제거, 수정 등의 작업을 자동화하여 관리해 주는 기능을 가진 툴을 Package Manager라고 한다. node.js의 package manager로는 npm, yarn이 있다.
- npm 은 전세계적으로 가장 많이 사용되는 패키지 관리 툴로 node.js를 설치하기만 하면 기본적으로 내장되어 있어 사용이 매우 편리하다. 하지만, 다른 package를 바로 포함할 수 있는 코드를 자동으로 실행하므로 보안에 취약하다는 단점이 있다.
- Yarn 은 2016년 페이스북(현 메타)에서 새롭게 발표한 패키지 관리 툴로 npm 저장소를 그대로 사용하지만 처리성능 속도가 npm보다 더 향상되었다. yarn이 안정성과 보안성 면에서 더 뛰어나지만 디스크 공간을 많이 차지한다는 단점이 있다.
참고자료 : ‘what is the difference between JavaScript and ECMA Script?’
참고자료: 런타임 이해 https://beomy.github.io/tech/javascript/javascript-runtime/
참고자료: 인터프리터 https://velog.io/@gusdnr814/Javascript는-인터프리터-언어인가
참고자료: https://babeljs.io/docs/en/
참고자료: ‘The Birth of Node: Where Did it Come From? Creator Ryan Dahl Shares the History’ (https://web.archive.org/web/20141018133031/http://devopsangle.com/2013/04/01/the-birth-of-node-where-did-it-come-from-creator-ryan-dahl-shares-the-history/)
