React.js

A JavaScript library for building user interfaces

• UI Library
• https://reactjs.org/

1. Library

• 라이브러리의 일부분만 가져와서 사용할 수 있다.
  • 필요할 때 쓰고 빼며 부분적으로 사용 가능하다.
• 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않는다.
  • 별도의라이브러리를 통해 Redux, Recoil, React-router-dom 등을 사용해야 한다.
• 개발자에 따라 자유롭게 개발할 수 있다.
• 참조가 쉽다.

2. 코드 형태 - JS

• JavaScript XML(jsx) 형태로 코드 작성
• 자바스크립트만을 사용해 UI 로직과 DOM 구현

3. Typescript 지원

• Typescript(JS의 정적 표현)가 리액트를 사용할 때 편리하다.
  • 함수형 프로그래밍을 활용하기 좋다.
    • 순수 함수 및 매개변수의 데이터 타입 고정
  • 모든 코드를 타입스크립로 구현하는게 쉽다.

4. 컴포넌트 분리 시 높은 재사용성

• 컴포넌트 분리 시 한 개의 파일에서 새로운 함수형 컴포넌트를 쉽고 깔끔하게 정의할 수 있다.
• 부모에서 자식으로 props를 전달해주는 과정이 함수에 인수를 전달하듯이 매끄럽다.

5. 높은 진입장벽

• 코드의 자유도가 높음
• 압도적인 학습량
  • 상태관리, 라우팅, 빌드 시스템 등
  • mobX, Redux, Recoil 등의 상태관리 트렌드의 변화
  • 리덕스와 수많은 미들웨어에 대한 이해
• 연동 모듈의 수 ↑
  • 리액트 생태계가 풍부해진다.
  • 배워야 할 것도 많아진다.
• 회사마다 코드 패턴이나 아키텍처가 일치하지 않음
• 웹 애플리케이션을 제작하기 위해서는 수많은 작업이 들어가는데, 단순 UI 라이브러리만 사용해서는 완성하기 어렵다.
• create-react-app
  • cli 명령 하나로 리액트 프로젝트를 빠르게 만들어준다.

Vue.js

An approachable, performant and versatile framework for building web user interfaces.

• framework
• https://vuejs.org/

1. Progressive Framework

• 라이브러리처럼 사용할 수 있도록 설계되었지만, 지향하는 방향은 프로그레시브(진보적인) 프레임워크이다
• 일반 프로엠워크보다 더 자유도가 높으며 시스템 수준에 따라 프레임워크 활용도를 결정할 수 있다.
• .vue 형태가 아닌 .js 파일로 구현할 경우 효율성이 훨씬 떨어진다.

Framework

소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것

• Ralph Johnson 랄프 존슨

특징

• 구조 품질을 보장한다.
  • Design Pattern + Class Library
    • 설계자가 의도하는 여러 디자인 패턴의 집합으로 구성되어 있다.
  • 구체적이며 확장 가능한 기반 코드를 가진다.
• 반제품
  • 애플리케이션의 틀과 구조를 결정한다.
  • Framework의 코드가 그 위에 개발된 개발자의 Application 코드를 호출하고 제어한다.
  • 개발자는 핵심 비즈니스 로직에만 집중할 수 있다.
• 프레임워크가 지원해주는 문법에 따라 작성해주어야한다.

2. 코드 형태 - 패턴

• HTML, JS, CSS 코드 영역을 분리한다. → 패턴이 있음
  • <template> - HTML, <script> - JavaScript, <style> - CSS
  • 코드 가시성, 생산성 ↑

3. Typescript 사용의 어려움

• Typescript를 사용하기 위해선 TS용 모듈을 사용해야 한다.
• nuxt와 TS 호환의 어려움
  • nuxt는 Vue3와 제대로 작동하지 못하고, TS는 Vue3의 적극적으로 지원하는 상태

4. 컴포넌트 분리 시 낮은 재사용성

• 컴포넌트 분리 시 새로운 파일을 만들어야 하고, 새 파일의 template script style도 작성해야 한다.
• props를 전달할 때 2개의 파일을 오가야 한다.

5. 비교적 낮은 진입장벽

• 상태관리, 라우팅 구축 및 개발을 빌트인에 가까운 수준으로 만들어져 있다.
  • vuex, vue-routing 등의 모듈을 사용한다.
• vue-cli로 프로젝트를 만들고 수정하며 업그레이드한다.
• 이미 주어진 코드 프리셋(페이지 , 컴포넌트, 라우팅 등)
• 분리된 영역 (HTML-JS-CSS)

결론

React → 트렌드, 범용성

• 함수형 프로그래밍 및 정적 데이터 타입 사용
• 백엔드 서버가 graphQL & TS로 구축된 경우, 프론트도 데이터를 정적으로 맞춰주어야 에러 핸들링이 더 간편해지고 완성도가 높아진다.
• 프로젝트의 규모가 크고 더 확장 가능성이 있는 경우
• 컴포넌트를 작은 단위로 나누어 비슷한 UI 재사용을 많이 하는 경우
• 커스마이징 및 자유도가 높은 개발 환경
• 넓은 커뮤니티 및 개발 인력시장

Vue → 사용성, 생산성

• 코드 작성 패턴
• 라이프 사이클
• 쉽고 강력한 상태관리
• 빠르게 원하는 모든 형태의 어플리케이션을 만들 수 있다.
• 규모가 작고 가벼운 프로젝트
• 속도 이슈에 민감한 서비스
• 백엔드 개발자
• 개발자간 코드 통일성을 위한 커뮤니케이션 비용을 줄이고 싶다.

---

출처

• 리액트(React.js)와 뷰(Vue.js)의 차이점
• React vs Vue 장단점 비교