React와 Node.js의 관계

Back-end (java + springboot) + Front-end (react) 쪽을 공부하면서, Node.js란 내게 단순히 React를 사용하게 하는 중간 매개체의 역할로 밖에 인식되지 않았다. 오늘은 이 Node.js란 놈이 무엇인지 살짝 발을 담글 정도로만 알아보도록 하자.

논블락킹 I/O 모델에 대해서는 여기저기서 많이 들었다. 서블릿 3.0인가? 그 이전의 서블릿을 사용하는 스프링과 톰캣 서버(아마 버전 7인가..?)는 블락킹 되는 작업은 멀티쓰레딩을 활용하여 비동기적으로 처리하였는데, Node.js는 싱글스레드로 블락킹 작업은 콜백받는 형식으로 처리하는 자바스크립트 기반의 서버?이고 그래서 스레드 간 시분할, 문맥교환이(컨텍스트 스위칭) 없기 때문에 훨씬 성능이 잘 나온다고..

물론 stateful 방식 프로토콜이다 뭐다. 스프링 5.0 의 Reactive Programming이다 뭐다. Node.js 처럼 단일 스레드 지향점으로 간다 뭐다, Node.js가 실제로 싱글스레드는 아니다 뭐다. 말들은 많은 거 같은데, 자세히 모르므로 건너뛰고.. (잠깐 예제로 끄적이는 수준..)

https://blog.naver.com/alsrb9434/222147770185

그래서 뭐 톰캣이랑 비슷한데, 싱글쓰레드인 자바스크립트 기반 서버? 정도로 알고 있었다. 조금 더 알아보니 단순히 서버라기 보다는 서버도 만들 수 있는 자바스크립트 런타임 환경에 가깝다고 한다. 알다시피 자바스크립트의 런타임(실행) 환경은 브라우저이다. 브라우저들은 자바스크립트를 읽고 해석하기 위해 엔진들을 가지고 있는데, 크롬 개발자가 v8 자바스크립트 구동엔진을 만들어냈다. 그리고 이 엔진만 따로 때어내서 출시하게 되었는데, 이것이 Node.js이다.

이 Node.js로 인해 자바스크립트를 브라우저 말고도 로컬 PC에서 읽고 해석할 수 있게 된 것이다.

리액트는 facebook의 소프트웨어 엔지니어 Jordan Walke에 의해 만들어 졌다. 원래 웹을 동적으로 작동하기 위해서, 두 가지 당파가 존재했는데, 하나는 서버사이드에서 새로운 문서를 보여주도록 하는 servlet,php 등이고, 다른 하나는 프로그램을 깔아서 동적으로 보여주는 activeX, flash 당파다.

servlet은 쓰기 불편하니 JSP 같은 템플릿 엔진이 나오곤 했는데, 암튼 그게 중요한 게 아니고, 문제는 페이지를 동적으로 보여줄려면 서버쪽에 다시 재요청을 해야 된다는 것이다.(대부분의 서버는 stateless 방식을 쓰기 때문에) 즉 새로고침을 해야 된다는 소리이다. 새로고침하면 다시 전체 페이지 랜더링 하면서, 쓸데없이 시간만 많이 소모한다. 서버쪽에서 연산부담도 늘어난다. 여기서 획기적인 기술이 탄생한다. AJAX란 건데,(유트브에서 만들었나..?) javascript를 이용해서 비동기로 데이터를 xml 형태로 받아오는 방법(지금은 xml 말고 다 json 쓴다) 으로 특정 html Dom을 조작해서 데이터에 맞춰서 UI도 변경시킬 수 있다. 요렇게 하면 페이지의 일부분만 랜더링할 수 있고, 그림 그리는 연산도 클라이언트(브라우저) 쪽으로 분산되면서 서버의 부하도 줄어들 수 있다.

그러나, 이 방법은 내가 일일히 서버쪽에 요청해서 받은 데이터를 UI에 동기화시켜야 하는 극도록 짜증나는 일을 반복해야 한다. DOM이 많아지면 많아질 수록, 짜증나는 일도 극도록 늘어나고, 실수할 여지도 늘어난다. 그래서 자바스크립트로 서버쪽에서 데이터를 요청해서 받고 자바스크립트 데이터에 UI를 동기화시킬 수 없냐는 방법을 강구하게 됐는데, 즉 데이터 바인딩이 트렌드로 떠오르게 되었다.

이걸 먼저 생각한 게 구글...?에서 만든 AngularJS 라는 게 있는데, 암튼 React도 그러한 맥락에서 탄생했다. ajax나 fetch로 서버쪽에서 받은 데이터를 리액트에게 전달. 그러면 리액트는 이 변경된 데이터와, 이전의 데이터를 건 by 건 비교.

암튼 리액트를 설명하는 건 다음 글에서 하기로 하고, Node.js와 React.js의 관계가 뭐냐? Node.js는 앞서 말했듯 자바스크립트 런타임 환경이고, React는 Dom을 조작할 수 있는 프론트엔드 프레임워크(누구는 라이브러리라고도 하는데, 직접 써본 경험상 프레임워크가 더 맞는 표현인 것 같다.) 로 Node.js는 React.js를 더 쓰기 편하게 해주는 도구를 제공하는 오픈소스이다.

Node.js를 설치시 NPM 이라는 패키지 관리자도 같이 설치되는데, 이 패키지관리자를 통해 React.js에 필요한 다양한 모듈들을 다운받을 수 있다. 근데 왜 Node.js를 통째로 다운받을까? 그냥 NPM 만 다운받으면 되는 거 아닌가? 그 이유는 Node.js는 바벨이라는 컴파일러 도구를 가지고 있기 때문에, JSX(html in javascript) 문법을 사용할 수 있기 때문이다.

뭔 말이고 하니, Node.js와 React 사이에는 크게 webpack과 Babel이 있는데, React를 통한 대규모 SPA 개발을 위해서는

몹시 많은 정적 파일이 필요하고, (.js, .css, .png 등) 이를 번들링할 필요가 있습니다.
→ webpack을 사용합니다.

ES6를 해석할 수 없는 IE11 등 비非 모던 웹 브라우저에 대한 지원이 필요합니다.
→ Babel을 사용합니다.

후려쳐서, 리엑트는 머신(엔진)인데 프레임워크를 제공하고, 데이터(상태)와 UI 연결시키고 변경감지(옵저버 패턴)를 한다. 리액트는 변경을 감지하는 엔진(데몬 프로세스) 즉, 계속 돌릴 수 있게 하는 서버가 필요하다.(Node.js) react는 이제 node.js 서버 위에서 계속 돌아갈 예정이다.

아마 내가 설명한 글들은 대부분 틀린 내용일테니, 신경쓰면서 읽지는 말아라 ㅎㅎ

바벨과 Webpack에 대한 설명은 따로 React를 다루는 글에서 한 번 다뤄보겠다.