Webpack / Babel / Node.js / NPM

Webpack / Babel / Node.js / NPM

Webpack

• 모듈 번들러(Module Bundler)
• 모듈화된 코드를 하나의 파일로 합치고(번들링) 코드를 수행할 때마다 웹브라우저로 리로딩한다.
• 코딩할 때 편의를 위해 여러 개의 모듈로 나누어 작업을 하지만, 브라우저에서 파일 단위 모듈 시스템을 이용하게 되면 많은 네트워크 비용이 낭비된다는 단점이 있다.
• 웹 애플리케이션의 규모가 커지면서 많은 양의 파일들이 하나로 모여 구성되는데 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 필요하다.
• React : Webpack이라는 모듈 번들러 사용
  • 파일들의 관계가 복잡하고 무겁기 때문에 브라우저에서 이해하고 처리하기 힘들어지는 문제 해결
  • 파일들 간의 의존성 관계 정리 및 최적화, JSX 파일을 합쳐서 하나의 자바스크립트 파일로 만들어줌

Babel

• 자바스크립트 변환 도구
• Babel is a JavaScript compiler
• 자바스크립트 ES6 문법을 이전의 ES5로 변환
• 최신 버전의 브라우저에는 EX6 문법을 바로 실행 가능하지만 구버전의 브라우저에서는 실행되지 않는 문제가 발생해서 변환이 필요
• 리액트에서 컴포넌트에서 사용하는 JSX 문법도 정식 자바스크립트 문법이 아니기 때문에 변환 필요
• Babel을 통해 React를 일반 브라우저에서 실행 가능하도록 변환 작업 수행

Node.js와 NPM

Node.js

• Chrome V8 JavaScript(V8 Engine)으로 빌드된 JavaScript 런타임
• 자바스크립트를 웹 브라우저 영역 외에 서버, 모바일 애플리케이션, 데스크탑 애플리케이션 등의 영역에서 사용 가능하게 해 줌
• React 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만 프로젝트를 개발하는 데 필요한 도구들이 Node.js를 사용하기 때문에 설치 필요

NPM (Node Package Manager)

• 자바스크립트 패키지 매니저 도구
• Node.js에서 사용할 수 있는 모듈들을 패키지화 해서 모아둔 저장소 역할과 패키지 설치 및 관리
• React = 하나의 패키지