자바스크립트를 공부하다보면 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을 출시하면서 자바스크립트를 단기간에 개발하여 지원하기 시작했다.
💡
당시 JavaScript 언어는 10일만에 개발되어 배포었다. 짧은 기간 내 개발이 되어 배포되었기에 당시 개발되었던 철학이 지금에는 맞지 않는 경우가 있어 이를 보완하는 기능이 추가되어 왔다. 기능이 수정되면 웹 상에서 이전 코드가 작동하지 않는 상황이 발생될 수 있어 꽤나 긴 시간을 두고 업데이트를 진행한다.
typeof null == “object” 는 실수임을 인정하는 JavaScript 개발자Brendan Eich(브랜든 아이크)
이후 웹 페이지 동작을 향상시키는 경량의 프로그래밍 언어가 인기를 끌자 Microsoft사 에서 IE 3.0에서 동작하는 ‘JScript’라는 매우 비슷한 언어를 만들어 냈고 IE 이외에도 다양한 브라우저들이 자바스크립트 문법을 만들어 내게 된다.
이로인해 동일한 코드일지라도 브라우저에 따라 웹페이지가 개발자의 의도대로 정상 동작하지 않는 크로스 브라우징 이슈가 빈번하게 발생하면서 표준화된 자바스크립트의 필요성이 대두되기 시작했다. 이를 위해 1996년 11월, 넷스케이프 사는 ECMA 인터네셔널에 자바스크립트의 표준화를 요청한다. 그 결과 1997년 7월, 자바스크립트의 표준화 초판이 완성되었고 2015년도 부터는 매 해 새로운 문법이 추가되어 배포되고 있다.
한마디로 ECMA Script는 ECMA 인터내셔널에서 정의한 ECMA-262 기술 규격을 토대로 만든 표준 스크립트 프로그래밍 언어이며, 자바스크립트의 뼈대를 구성하는 언어이다.
💡
ECMA 인터네셔널 (Ecma International) : 정보 통신 시스템을 표준화하는 비영리 협회. [1]
1-2. ECMA Script version
개발을 공부하다보면 ‘ES6부터 도입된 문법입니다.’ 라는 말을 많이 듣게 되는데, 왜 유독 ES6에 대한 언급이 많은 것일까?
사실 ES2015 (ES6를 의미하며, ES6부터는 배포 연도로 이름을 명명한다) 이전 버전의 문법에는 크고작은 불편함이 많았다. 하지만, ES2015 부터 ES5이하 명세에서 문제가 되던 부분들을 속 시원히 해결하는 const, let, Promise, Arrow function, Class 등의 문법들이 대거 추가되면서 가독성이나 유지보수성이 크게 향상되었다. 이러한 변화를 가져온 덕에 ES2015(ES6)에 대한 언급이 많다는 점을 알아두자.
ECMA Script는 현재까지 ES2022/ES13 버전이 배포 되었고 계속 업데이트 되고 있다. 2022년에는 class 속성과 관련된 내용이 주를 이루고 있다. 따라서 우리는 매해 업데이트 되는 문법을 확인하고 반영해가며 개발해야한다는 점을 잊지말자. 아래 ECMA-인터내셔널 공식 사이트에서 ES 버전의 update를 확인할 수 있다.
2022년 현재 모던 브라우저의 ES6 지원 비율은 98%~99% 이고 Internet Explorer11는 ES6를 대부분 지원하지 않지만, 2022년 6월 15일 지원이 중단되므로 대부분의 브라우저에서 지원한다고 볼 수 있다.
행여 브라우저에서 아직 지원하지 않는 최신 기능을 사용해야 하는 상황이 발생한다면 바벨과 같은 트랜스파일러를 사용하여 코드를 변환해주면 된다.
b) Transpiler, ‘바벨(Babel)’
트랜스파일러로는 바벨이 코드를 최적화 하는 많은 플러그인을 보유하고 있어 가장 유명하고 많이 사용된다.
바벨은 최신 자바스크립트 코드를 구 버전 자바스크립트 코드로 호환 가능하도록 변환해주는 것이 주된 기능이지만, 파일과 기능단위로 폴리필(Polyfill) 사용이 가능하고 리액트의 JSX문법과 타입스크립트에 대한 변환도 지원한다.[2] 또한 최근 배포된 7.17.0 버전에서는 코드압축 뿐만 아니라 정식 문법이 아닌 Proposal에 대한 변환까지 처리해주어 그 확장성이 매우 뛰어나다.
2-2. Node.js
자바스크립트의 또다른 대표적 런타임 환경인 Node.js는 라이언 달(Ryan Dahl)의 ‘비동기로 작업을 처리할 수 없을까?’ 라는 발상에서부터 개발되어 2009년 세상에 공개되었다.
💡
라이언 달은 현재 Deno 런타임 환경 개발에 매진하고 있는 것으로 알려져 있다.
구글이 V8 자바스크립트 엔진을 오픈소스로 공개하면서 Node.js는 V8 엔진으로 빌드(구성은 C++로 되어있다)되었으며, 자바스크립트가 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저로부터 독립시켜 서버측에서 실행(백엔드 개발 가능)된다.
Node.js는 서버 사이드 에플리케이션 개발에 필요한 모듈이나 HTTP, 파일 시스템과 같은 내장 API를 제공하는데, 이 모든 모듈의 설치나 업데이트, 제거, 수정 등의 작업을 자동화하여 관리해 주는 기능을 가진 툴을 Package Manager라고 한다. Node.js의 package manager로는 npm, yarn이 있다.
npm은 전세계적으로 가장 많이 사용되는 패키지 관리 툴로 Node.js를 설치하기만 하면 기본적으로 내장되어 있어 사용이 매우 편리하다. 하지만, 다른 package를 바로 포함할 수 있는 코드를 자동으로 실행하므로 보안에 취약하다는 단점이 있다.
yarn은 2016년 페이스북(현 메타)에서 새롭게 발표한 패키지 관리 툴로 npm 저장소를 그대로 사용하지만 처리성능 속도가 npm보다 더 향상되었다. yarn이 안정성과 보안성 면에서 더 뛰어나지만 디스크 공간을 많이 차지한다는 단점이 있다.
3. Frameworks
3-1. Framework란?
프레임워크는 개발자가 해당 기능 구현에 필요한 대부분의 기능을 이미 구현해놓은 종합 선물 세트라고 말할 수 있다. 내 코드의 일부분으로 자리잡는 라이브러리와 비교된다.
2021.05 Stackoverflow 웹 프레임워크 순위(라이브러리도 섞여있음)
이러한 프레임워크는 유행을 많이 타기도 하기 때문에 아래와 같은 글을 한 번 읽어볼 필요가 있다.
Angular는 이전 버전인 Angular JS와 구분된 이름을 갖는다. Angular JS는 1.x 버전이고, Angular는 2.x 이상으로 타입스크립트 기반의 오픈소스이다. 구글 엔지니어 출신의 동일팀에서 개발되었고 대규모 프로젝트에 잘맞는다. Java-Spring(MVC), Python-Django(MTV)와 비슷하게 모델-뷰-컨트롤러(MVC)를 제공한다. Angular CLI, 타입스크립트 채택 등 다양한 기능을 제공한다. 유연하게 개발하기에는 적합하지 않다.
3-2-2. Vue.js
Vue.js도 구글의 엔지니어(Evan You)에 의해 개발되었다. Vue는 설계를 할 때부터 다른 프로젝트에서 도입하기 쉽도록 설계가 되어 있어 점진적 채택이 가능하다.
<p>hello {{ world }}</p>
위처럼 템플릿 문법이 사용 가능하다. 이는 Django나 넌적스를 사용해봤던 유저라면 친숙한 문법이다. 또 그러한 문법을 사용해본적이 없어도 빠르게 배워 적용할 수 있다. 위 코드에서 world가 변수이다. 배우기가 쉽고 적용하기 쉽기 때문에 생산성이 매우 높다.
4. Library
라이브러리는 일명 기능집합이다. 프레임웤이 이미 모든 기능을 구현해놓은 반면 라이브러리는 일부분의 기능을 제공한다.
💡
프레임웤 : 조립식 건축물(이미 부품들이 다 정해져 있음)
라이브러리 : (조립식이 아닐 수도 있음) 건축물에 들어가는 부품 - 문짝, 세면대, 바닥 등
4-1. React
React는 페이스북의 엔지니어(Jordan Walke)에 의해 개발이 되었다. 3-1 통계치에서 보듯 현재 가장 핫한 라이브러리이다.
리엑트는 사용자 인터페이스를 만들기 위해 사용된다. Router 기능이 있지만 백엔드 기능을 수행하는 것은 아니다. JSX라는 JavaScript와 XML을 합한 문법을 사용한다. 아래처럼 return 안에 h1을 틸트나 따옴표로 감싸주지 않아도 된다.
function App() {
return (
<h1>Hello React</h1>
);
}
사용자 UI를 컴포넌트로 분리하여 사용하여 생산성을 높인다. 라이브러리이기 때문에 점진적 선택도 가능하다.
4-2. jQuery
제이쿼리는 DOM을 좀 더 쉽게 조작할 수 있도록 설계 되었다. 단순하고 간단하며, 쉽게 배울 수 있다. 빠르게 유행했으며 한때 널리 사용되었다가 지금은 걷어내고 있는 곳도 많은 라이브러리이다. 예를 들어 부트스트랩은 최근 버전에서 jQuery를 뺐다. 3-1에서 보듯 아직 점유율은 매우 높은 상태이고, 배우는 것이 어렵지 않고 아직 jQuery로 된 코드가 많기 때문에 처음 프론트엔드를 배우는 분은 한번쯤 접해보는 것이 좋다.
$('h1').text('hello world'); // 여기서 $()로 Dom을 선택할 수 있다. css처럼 #으로 id를 .으로 class를 선택하는 것도 가능하다.
5. CSS in JavaScript
알잘딱깔센 JavaScript 핵심 개념
프로젝트의 크기가 커질수록 스타일을 일일이 찾아 수정해야 하는 번거로움이 있기 때문에 JS에서 CSS를 컨트롤 할 수 있게 나온 개념이다.
CSS 컴포넌트화를 해서 CSS 파일을 만질 필요가 없고, 함수나 변수 등의 공유가 쉽다. 다만 코드가 다소 어려워진다는 단점이 있다.
모듈번들러란 웹을 구성하는 모든 자원들을 하나의 모듈로 처리하여 최종적으로 하나의 결과물로 합치는 도구를 의미한다. 아래 그림처럼 여러개의 파일이 계층 구조로 되어 있을 때 그 파일들을 합쳐주는 작업을 하게 된다. 모듈 번들러는 아래 언급하는 webpack 외에도 Parcel 등이 있다.
bundling - 알잘딱깔센 JavaScript 핵심 개념
6-2. Webpack
웹팩은 가장 많이 사용되는 모듈 번들러이다. 웹팩에서는 js, css, image 등의 정적 파일들을 모두 모듈로 간주합니다. 아래 링크로 들어가면 파일들이 어떻게 웹팩 안에서 하나로 합쳐지고 빌드되는지 실습해볼 수 있습니다.
![웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1]](data:image/webp;base64,UklGRoQAAABXRUJQVlA4WAoAAAAQAAAADwAADwAAQUxQSEUAAAARL0AWYBocyd5iiKSICDJfsIpkR9FbchABe/SPERAHh/7NBCxE9H8CEH+L0MrA316+fuAtQivD3bP2LJGeNVtIe1kT0oIAVlA4IBgAAAAwAQCdASoQABAABUB8JaQAA3AA/vDmwAA=)
![웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1]](https://www.notion.so/image/https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Ftop%2Ffavicon_0630.ico?table=block&id=b6ee96ea-7063-44a8-b2ce-cf0919992049&cache=v2)
![웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1]](data:image/webp;base64,UklGRi4AAABXRUJQVlA4ICIAAACwAQCdASoQAAQABUB8JaQAAudIrxuAAP7tbrviQpKWsAAA)
![웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1]](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Ft1.daumcdn.net%252Fcfile%252Ftistory%252F240ADE4D595102100C?table=block&id=b6ee96ea-7063-44a8-b2ce-cf0919992049&cache=v2)