[Javascript] Build System

2021. 12. 12. 18:15Javascript

많음 시스템이 있지만, 간단하게만 정리해보았다.

Babel ES 하위버전에서도 돌아갈 수 있도록 번역을 해준다.
예를 들어, ES6 문법으로 코딩을 했을 때 ES5 Browser에서는 ES6 문법을 모르기 때문에 오류가 발생한다.
이를 번역해주는 역할을 Babel이 하고 있다.
Polyfill 없는 함수를 채워주고 있는 역할을 하고 있다.
Babel이 번역을 도와주고 있다면, Polyfill은 없는 함수를 채워준다.
예를들어 ES5에서는 temp(); 라는 함수가 없지만 ES6에서는 temp();라는 함수가 있을 때 Polyfill이 ES5에서도 동작이 가능하게끔 temp();라는 함수를 만들어주는 역할을 한다.
Node.js 대표적인 Javascript Runtime이다.
*만약 컴퓨터 내에서 프로그램이 가동되면, 컴퓨터가 그 프로그램의 런타임인 것이다.
일부 프로그래밍 언어에서는, 어떤 재사용 가능한 프로그램이나 루틴들이 런타임 라이브러리로 만들어진다.
이런 루틴들은 어떤 프로그램이 실행될 때 런타임에 연결되어 해당 프로그램을 사용할 수 있게한다.


컴파일 시 프로그램 안에 삽입된 것과, 런타임 시 삽입된 것을 구분하는데, 전자는 컴파일 타임이라고 한다.

주로 Node.js를 떠올리면 Server side script라고 많이들 생각하는데, 사실은 Runtime이다.
지원하는 대표적인 기능이 Server를 구동할 수 있게 해주는 것이다.
NPM(yarn) Node.js Pacakge Manager다.
의존성을 설치하거나, 관리를 도와준다.
NPM의 상위호환 버전으로 yarn이 나왔다.

yarn과 npm의 대표적인 차이는 "설치 속도 차이" 이다.
ES Lint 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다.
Prettier 개발자들간의 Coading Convention을 통일할 수 있도록 도와준다.
Web task manager Hot Loading을 도와준다.(gulp...)
Web pack Module bundler다.
웹 페이지를 구성하는 html, css, js 등 모두를 각자의 모듈로 보고 조합하여 하나로 만들어준다.

간단하게 정리한만큼, 자세히 알고자한다면 시스템을 다시 검색해보는 것을 추천한다.