React 개발시 Node.js를 설치하는 이유

Node.js

 

Node.js는 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있는 오픈소스이자
JavaScript runtime environment(실행 환경)이다.

(*runtime : 특정 언어로 만든 프로그램들을 실행할 수 있는 환경)

 

React 개발을 처음 시작할 때, Node.js 를 함께 설치한다.

Node.js는 무엇이기에 항상 react와 같이 따라다니는 걸까?

 

결론적으로 말하면, React 개발시, Node.js가 필수적인 것은 아니다.

즉, node.js 없이도 React는 사용이 가능하다!

 

그래도 Node.js를 설치하는 데 이유는 있는 법!

맨 처음에 언급도 했다.

차근차근 살펴보자

 

1️⃣ Node.js는 자바스크립트 실행 환경이기 때문이다.

---

자바스크립트는 HTML에 종속되어 있는 언어이며, HTML 조작과 변경을 위해 사용한다. 

정적언어인 HTML을 조작하여 웹페이지를 동적으로 바꿔주는 기능을 자바스크립트가 할 수 있다.

HTML은 자바스크립트가 해석하고 자바스크립트는 브라우저가 해석한다.

브라우저에는 자바스크립트 엔진이 있기 때문에 인터넷 브라우저 위에서 자바스크립트를 실행할 수 있었다. 

하지만 2008년에 구글이 V8 엔진을 사용하여 크롬을 출시한 이후, V8 엔진에 기능을 더해 노드 프로젝트를 시작했으며, Node.js(V8)이 등장하였다. Node.js는 브라우저 말고도 다른 환경에서 자바스크립트를 사용할 수 있게 해준다.

따라서 Node.js를 설치하면 브라우저를 키지 않아도 자바스크립트를 컴퓨터에서 수행할 수 있다. 

 

2️⃣ NPM(Node Package Manager)을 사용하기 위해

---

NPM(Node Package Manager)은 자바스크립트 패키지 매니저이다. NPM은 React 개발에 필요한 Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command Line Interface)를 제공한다. 

 

npm을 사용하면 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리고 사용자는 그것을 npm과 같은 패키지 매니저를 통해 설치 및 삭제가 가능하다. 

 

React를 사용한 개발에서 저러한 패키지가 유용하게 사용되기 때문에 npm을 사용하면 좋다.

 

이러한 npm은 Node.js를 설치할 때 함께 설치되기 때문에 Node.js를 설치하는 이유이기도 하고 npm을 CLI로 실행시키고 싶다면 Node.js가 필요하다.

 

2️⃣ JSX를 사용하기 위해

---

npm이 필요하면 npm만 설치하면 되지 왜 Node.js를 설치하는 건데?

Node.js가 있으면 바벨(Babel)이라는 컴파일러 도구를 추가로 다운받아 자바스크립트 대신에 JSX를 사용하는 것이 가능하다!

JSX란 자바스크립트를 확장한 문법이다.

사실 자바스크립트로만 개발을 하면 가독성과 유지보수가 힘들어지는데, JSX를 이용하면 우리에게 익숙한 html 코드로 개발하여 가독성과 유지보수를 쉽게 해줄 수 있다.

JSX 사용을 위해선 바벨은 필수!

JSX 문법을 브라우저가 해석할 수 없기 때문에 바벨을 이용하여 자바스크립트로 변환해야 한다. 또한, 자바스크립트 es6(ECMAScript)문법을 브라우저에서 동작하도록 하기 위해선 하위버전(es5)의 코드로 변경시켜야 하는데 이때 babel이 사용된다. 

 

Node.js가 있으면 Babel을 추가로 다운받아 사용할 수 있다. 이런 이유로 Node.js를 설치하는 것이다. 

 

참고

https://velog.io/@remon/%EA%B0%9C%EB%B0%9C-%EA%B8%B0%EB%B3%B8-%EC%A7%80%EC%8B%9D-Node.js%EB%9E%80

[개발 기본 지식] Node.js란?

https://chucoding.tistory.com/86

React 개발에 왜 Node.js가 필요할까??