React를 위한 세팅에 앞서

리액트를 세팅하기에 앞서 우리는 우선 노드가 필요하다.

그렇다고 노드의 전문가가 되어야 한다는 말은 아니다.

 

Node.js란?

나부터도 노드에 대한 오해가 많았다. 주위에서도 노드를 웹 서버로 인식하는 경우가 많았다

노드면 노드지 왜 js가 붙어있는지 참 궁금했다.

 

우리가 앱 애플리케이션을 개발하려면 자바스크립트를 사용하게된다.

자바스크립트는 각 브라우저에 탑재된 내장 엔진을 이용하여 해석하고 실행한다.

한마디로, Node.js는 크롬의 v8엔진을 이용하여 Javascript로 브라우저가 아니라 서버를 구축하고 서버에서

Javascript가 작동되도록 해주는 런타임 환경이라고 이해하면 쉬울 것 같다.

 

*V8 엔진

구글이 주도하여 C++로 작성된 고성능의 자바스크립트 & 웹 어셈블리 엔진이다.

Google Chrome과 NodeJS에서 사용되고 있으며 ECMAScript와 Web Assembly를 표준에 맞게 구현한 것

 

일반적으로 자바스크립트 엔진은 코드 한 줄을 해석하고 바로 실행하는 인터프리터 형식이지만, V8 엔진은 자바스크립트 코드를 바이트코드(ByteCode)로 컴파일하고 실행하는 방식을 사용

 

쉽게 말하면 자바스크립트 코드 실행 전에 최적화된 기계어로 컴파일 하는 엔진이다.

-> JIT(Just In Time)방식을 사용하여 인터프리트 하지 않고 즉시 기계어로 컴파일 하므로 속도가 월등히 빠르다.

 

런타임이란?

특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 말한다.

즉 프로그램이 실행되고 있는 때, 존재하는 곳을 말하는 것. 프로그래밍 언어가 구동되고 있는 환경이라고 볼 수 있다.

 

Node.js는 자바스크립트가 구동되는 런타임, 즉 환경이라고 볼 수 있겠다.

 

따라서, Node.js를 설치한다고 해서 웹서버가 실행되는 것은 아니고, Node.js에 포함된 라이브러리 및 http모듈을 이용하여 서버를 생성해하게 되는것이다.

 

Node.js의 특징

- 자바스크립트 언어로 백엔드 로직까지 개발할 수 있다는 엄청난 장점

- 위에서 설명한대로 v8엔진 기반의 자바스크립트 엔진으로 빠른 속도를 보여준다

- 이벤트 기반 비동기 방식으로 모든 API가 비동기 방식이다. 호출 후 응답을 기다리지 않고 다른 API를 호출한다. 

- 복잡한 비동기 I/O 응용 프로그램을 싱글 스레드 Javascript로 작성하여 결과물의 실행속도와 개발 편의성 측면에서 좋다

 

본론으로 돌아가서 그렇다면 리액트 개발에 왜 노드가 필요할까?

결론부터 말하자면 어이없게도~

반드시 Node.js가 필요한것은 아니다 ^_^~

그럼에도 위와같이 정리하고 항상 React에 node가 따라오는 이유는

Node.js를 설치하는 경우 NPM(Node Package Manager)이 함께 설치되는데 이것을 통해 다양한 모듈을 다운받아 사용이 가능하기 때문이다.

 

그렇다면 왜 NPM을 설치하지 왜 노드를 설치하느냐?

노드가 있으면 바벨이라는 컴파일러 도구를 추가로 다운받아 자바스크립트 대신 JSX를 사용하는 것이 가능하기 때문이다.

또한 바벨은 자바스크립트 es6문법을 es5로 변환하는 기능을 갖고 있어 다양한 브라우저에서 React를 실행시키는것이 가능해진다

 

*JSX

Javascript를 확장한 문법으로 생산성과 유지보수 측면에서 편리해진다는 장점이 있다.

 

다음 페이지에서 기본적인 세팅방법을 정리해보자