모듈 번들러와 트랜스 파일러들

⭐ 웹팩 (Webpack)

• 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 모듈 번들러 즉, 최종 배포용 파일을 만들어줌

• 웹팩은 오픈 소스 자바스크립트 모듈 번들러, 여러 개의 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화 하는 라이브러리

⭐ 바벨 (Babel)

• 바벨은 트랜스파일러로 ES6이상의 문법의 코드들을 브라우저가 이해할 수 있도록 ES5이하의 구 표준 문법으로 변환하는 역할

• 바벨의 주요 역할

• 1. 트랜스 파일러
     -- 바벨은 개발자의 컴퓨터에서 돌아가는데 변경된 코드는 웹사이트 형태로 사용자에게 전달 웹팩 (Webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스 파일러를 동작 시킴 이런 과정이 없으면 개발이 끝난 코드를 한데 통합하는데 어려움을 겪음
• 2. 폴리핀 (polyfill)
     -- 스크립트가 최신 표준의 함수나 최신의 메서드 (Map, filter)을 호환할 수 있게 기존 함수의 동작 방식을 수정하거나 새롭게 구현한 함수의 스크립트를 폴리핀 (polyfill)이라고 부름
     -- 폴리핀은 말 그대로 구현이 누락된 새로운 기능을 매꾸는 fill in 역할을 함

⭐ Node.js

• 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 런타임 환경, 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작하도록 하기 위해

• non-blocking I/O을 지원하고 싱글스레드 이벤트 루프기반으로 동작함

• 크롬 브라우저 V8 엔진 기반 자바스크립트 런타임 환경

• 런타임 환경? : 프로그래밍 언어가 구동되는 환경

• 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합 하지만 CPU 사용률이 높은 애플리케이션에는 권장하지 않음

⭐ JSON (JavaScript Object Notation)

• 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 데이터 교환 표준
• 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용
• 형식은 자바스크립트 객체 표기법을 따르기 때문에 객체와 마찬가지로 key/value 형태이며 둘 모두 씽따옴표가 붙음
• JSON 형식에서는 null, number, string, array, object, boolean을 사용할 수 있음