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
소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것
특징
- 구조 품질을 보장한다.
- 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 → 사용성, 생산성
- 코드 작성 패턴
- 라이프 사이클
- 쉽고 강력한 상태관리
- 빠르게 원하는 모든 형태의 어플리케이션을 만들 수 있다.
- 규모가 작고 가벼운 프로젝트
- 속도 이슈에 민감한 서비스
- 백엔드 개발자
- 개발자간 코드 통일성을 위한 커뮤니케이션 비용을 줄이고 싶다.
출처