[Frontend] Node.js, Babel, Webpack

프론트엔드 프로젝트를 하다보면 자꾸 마주치는 것들

하지만 정확히는 모르던 것들 정리@! 

 

Node.js : Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경
왜 쓰는지?
1. JS를 브라우저 외의 환경에서도 실행할 수 있도록 해줌
- 기존의 JS는 브라우저에서 작동 --> OS 기능 사용 불가 (ex. 카메라, 파일 I/O, 네트워크 통신 등)
2. npm 제공
- node.js 에서 사용할 수 있는 모듈 패키지 제공 (ex. 웹팩, 바벨)

 
Babel : Javascript Compiler
트랜스파일러 : 모던자바스크립트 (ES6+) -> 구 표준 코드 (ES5) 변환
- 구형 브라우저에서도 모던자바스크립트가 작동하도록 해줌
폴리필 : 기능을 지원하지 않는 웹브라우저 상의 기능을 작동하도록 구현 해주는 코드, 플러그인
- ES5로 변환 할 수 없는 ES6에서만 작동하는 기능을 사용하고 싶을 때 폴리필을 통해 구현해줌
 
 
Webpack : 모던 자바스크립트 어플리케이션을 위한 정적 모듈 번들러
자바스크립트 파일들의 의존성을 분석해 하나의 번들로 묶어 브라우저에서 사용 가능하도록 만들어줌
- 하나의 파일로 묶음으로써 네트워크 요청 수를 줄이고 웹페이지 로딩 속도를 높임
코드가 수정되면 번들링 하기 전 웹팩이 바벨을 로드해 트랜스파일링 함