노드js(node.js) 그리고 리액트(React)와 뷰(Vue)

자바는 JVM(자바 가상 머신) 환경 안에서 runtime이 구동되어, OS으로부터 독립적으로 실행될 수 있다. 비슷하게 Node.js는 웹브라우저에 종속적인 JavaScript 언어에 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있도록 해주는 '런타임 환경'이다. 즉 프론트엔드에 쓰였던 자바스크립트를 백엔드에서도 쓸 수 있게 했다.

 

리액트와 뷰는 프론트엔드 개발을 위한 자바스크립트 기반의 개발도구이다.

 

리액트는 'UI 라이브러리'이기 때문에 일부분의 기능을 가져와서 사용하는 것이 편리하다. 즉, 리액트 자체만으로는 전역 상태관리, 라우팅, 빌드 시스템을 지원하지 않는다. 따라서 별도의 라이브러리를 통해 Redux, Recoil, React-router-dom 등을 사용해야 한다. 사용자가 필요할 때 필요한 것만 부분적으로 사용해야한다.

 

반면 뷰는 '자바스크립트 프레임워크'이다. 부분적인 사용이 불가능하고 프레임워크 안으로 들어가서 지원해주는 문법에 따라 작성해야 한다. 라이브러리와 달리 더 많은 기능을 디폴트로 제공해준다.

 

따라서 리액트는 JSX(JavaScript XML) 형태로 코드를 작성하여 자바스크립트 문법을 응용하기 때문에, JS만으로 UI 로직과 DOM을 구현한다. 하지만 뷰는 HTML, JS, CSS 영역을 분리해서 코드를 작성한다. 리액트는 코드 작성에 자유도가 높지만, 뷰는 정해진 방법을 사용해야 한다. 하지만 그만큼 코딩이 용이하고 뷰의 코드가 더 가시성 및 생산성이 높다는 평이 많다. 리액트의 가장 큰 장점 중 하나는 컴포넌트의 생성 및 재사용이다. 파일 별로 컴포넌트를 분리하고 새로운 함수형 컴포넌트를 생산해서 전달하거나 재사용한다. 하지만 뷰는 새로운 컴포넌트를 만들어 분리하기 위해서 새로운 파일을 하나 더 만들고, 하나의 파일에 해당하는 template, script, style을 모두 작성해야 한다.

 

리액트는 라이브러리이기 때문에, 라이브러리에 대한 이해와 사용방법을 익혀야 한다. 그리고 프론트엔드에서 중요한 상태 관리에서 알아야 할 것이 많다. 반면 뷰는 상태 관리를 위한 라이브러리가 다양하지 않고 단순화되어 있어서, 많은 기능을 탑재하여 진입 장벽을 낮추었다고 할 수 있다. 하지만 실제 다운로드 수는 리액트가 뷰보다 4배 이상 많다. 왜냐하면, 진입장벽이 높은 만큼 자유도가 높고, 변화에 빠르며, 월등한 사용량으로 인한 시장 크기 차이, 페이스북이라는 대기업이 유지보수 해주는 등의 다양한 장점이 있기 때문이다. 따라서 자신의 프로젝트 규모와 가용가능한 시간에 맞는 개발도구를 이용하는 것이 바람직하다.

 

* 사용자가 많은 프레임워크일수록 개발에 참고할 레퍼런스가 많아 개발 시간을 단축할 수 있다.

 

 

 

외부 참조 링크

https://medium.com/day34/node-js-%EB%85%B8%EB%93%9C%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%96%B4%EB%96%A0%ED%95%9C-%EA%B8%B0%EB%8A%A5%EB%93%A4%EC%9D%B4-%EC%9E%88%EB%8A%94%EA%B0%80-1-98e49e1100ab

[Node.JS] 노드는 무엇이고 어떠한 기능들이 있는가? — (1)

https://nyol.tistory.com/148

리액트(React.js) vs 뷰(Vue.js)

https://codingapple.com/unit/why-use-vue-over-react/

카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림 - 코딩애플 온라인 강좌