React vs Vue

.·2022년 7월 13일
0

Computer Science

목록 보기
27/81

React.js

A JavaScript library for building user interfaces

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.

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 → 사용성, 생산성

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

출처

0개의 댓글