[Javascript] Build System
2021. 12. 12. 18:15ㆍJavascript
많음 시스템이 있지만, 간단하게만 정리해보았다.
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 등 모두를 각자의 모듈로 보고 조합하여 하나로 만들어준다. |
간단하게 정리한만큼, 자세히 알고자한다면 시스템을 다시 검색해보는 것을 추천한다.
'Javascript' 카테고리의 다른 글
[Javascript] Webpack 왜 사용할까? (0) | 2022.01.12 |
---|---|
[Javascript] Generator Function? yield? next? (0) | 2021.12.22 |
[Javascript] 비동기 처리 방법 (0) | 2021.12.12 |
[Javascript] Data Binding (0) | 2021.12.12 |
[Javascript] 이벤트 루프 Event Loop (0) | 2021.12.12 |