Node.js, 바벨(babel), 웹팩(webpack), npm, nvm, yarn, create-react-app

2020. 1. 23. 12:16프로그래밍/리액트

Node.js

크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다.
이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용해서 연산할 수 있다.

2009년 Node.js가 출시된 이후 자바스크립트는 웹 브라우저 영역 외에도 웹 서버, 모바일 앱, 데스크톱 앱 등에서도 엄청나게 활약할 수 있게 되었다.

리액트 어플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는데 필요한 주요 도구들이 Node.js를 사용한다.

바벨(babel)

이 때 사용하는 개발 도구에는 ECMAScript 6(2015년에 공식적으로 업데이트한 자바스크립트 문법)를 호환시켜주는 도구이다.

웹팩(webpack)

모듈화된 코드를 한 파일로 합치고(번들링), 코드를 수정할 때마다 웹 브라우저를 리로딩하는 등의 여러 기능을 지니고 있다.

npm

Node.js를 설치할 때, Node.js 패키지를 관리해 주는 매니저 도구인 npm이 설치된다. npm으로 수많은 개발자가 만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있다.
리액트 역시 하나의 패키지이다. 현재 npm 저장소에 등록된 패키지는 약 82만 개로, 하루 평균 475개의 패키지가 새로 등록되고 있다.

nvm

macOS와 Ubuntu에서는 Node.js를 여러 버전으로 설치하여 관리해 주는 nvm도구가 있다.
추후에 Node.js 버전을 업데이트하거나 프로젝트별로 버전이 다른 Node.js를 사용해야 할 때, 이 도구가 가장 용이하다.

yarn

npm대신 yarn이라는 패키지 관리자 도구를 사용할 수 있따.
yarn은 npm을 대체할 수 있는 도구로, npm보다 빠르고 휴율적인 캐시 시스템과 기타 부가 기능을 제공한다.

create-react-app

create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩과 바벨을 설치, 설정하는 과정을 생량하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구이다.
나중에 설정을 커스터마이징해야 하면 자유롭게 설정을 변경할 수도 있다.