현재 사이드 프로젝트로 Chrome extension을 개발 중인데 React가 아닌 Vue를 사용하고 있다. Chrome extension 관련 프로젝트들을 조사하다가 Vue를 사용한 프로젝트가 드문드문 보였고 문득 '이번 프로젝트는 Vue를 한번 써볼까..?' 하는 호기심에 Vue에 대해 좀 더 알아보고 결정하게 되었다. 항상 프로젝트에 React만을 쓰다가 Vue를 도입하게 된 이유를 아래에서 설명하려고 한다.
먼저 vue를 조사하면서 React와는 다르다고 느꼈던 기술적인 특징들을 간단히 설명하면 아래와 같다.
vue의 특징
- 빠르고 효율적인 렌더링: React보다 작은 번들 크기를 가지고 있으며, 데이터가 변경될 때마다 이를 자동으로 감지하고 필요한 부분만 렌더링을 업데이트한다.
- HTML 베이스 템플릿: JSX 문법을 사용하는 React와는 달리 HTML과 유사한 Template 문법을 제공한다.
- 양방향 데이터 바인딩: 양방향 데이터 바인딩이란 데이터를 내부적으로도 웹 화면상에서도 변경 가능하도록 한 것이다. 즉 데이터가 업데이트되면 화면에 적용되어 보여지고 화면에서 데이터가 업데이트되면 내부적으로도 데이터가 변경되는 것이다.
- 직관적인 코드: Vue는 작성하는 코드의 방식이 제한적이고 직관적이다. 따라서 코드의 통일성을 보장할 수 있으며 단순하고 직관적인 코드가 프론트엔드 개발을 처음 해보는 사람들이 더욱 접근하기 쉽다.
그래서 왜 React가 아닌 Vue를 골랐냐면,,
Vue3 선정 이유
1. 프로젝트 주제와의 적합성
프로젝트 주제: 나만의 알고리즘 문제집 - Alchive
알고리즘 문제 사이트들의 문제를 내 풀이와 함께 저장해서 알고리즘 문제를 리뷰할 수 있는 서비스
사용자의 편의성을 고려해서 Chrome extension으로 개발하게 되었다. 알고리즘 문제와 내 코드가 저장되는 것을 자동화한 서비스이다.
개발하려는 프로젝트는 외부 API와 라이브러리의 의존도가 낮고 기능이 단순한 소규모의 서비스이다.
만약 외부 API나 라이브러리의 의존도가 높거나 풍부한 기능이 필요한 프로젝트였다면 React를 사용하는 것이 훨씬 유리하므로 Vue를 채택하지 않았을 것이다. 왜냐하면 React는 생태계가 넓어서 외부 API나 라이브러리를 사용할 때 큰 어려움 없이 적용할 수 있기 때문이다.
2. 낮은 러닝커브
해당 프로젝트는 개발 기간이 길지 않다. 필수 기능들은 2개월 안에 개발을 완료해야 하는데 만약 러닝 커브가 높았으면 현실적으로 경험해 보지 않은 새로운 프레임워크를 도입하지 않았을 것이다. 하지만 직관적이고 간단한 코드를 가진 배우기 쉬운 프레임워크이기에 도전해 볼 만하다고 생각했다.
3. 새로운 프레임워크에 대한 호기심
정리해보면 진행 중인 프로젝트에 React와 Vue 중 유리한 쪽이 딱히 없다. 그렇다면 내가 해보고 싶은 걸 해보자는 마음이 컸다. 시장에서 React의 점유율이 압도적으로 높지만 Vue도 React 다음으로 많이 쓰이는 프레임워크였기에 Vue를 한번 경험해보고 싶었다. 그리고 다른 프로젝트에서 React를 쓰고 있었기 때문에 더욱 이 프로젝트에는 Vue를 도입해보고 싶었다.
아직 개발한지 2주 정도밖에 안 됐지만 참고할 자료가 React에 비해 매우 적다... React 생태계가 정말 넓다는 것을 그리고 그게 얼마나 편한 건지 아주 잘 느끼고 있다..ㅎ 하지만 후회하진 않는다.
이와 같은 이유로 Vue를 도입하게 되었고 Vite와 tailwindcss를 사용하여 프로젝트를 진행 중이다. 이 프로젝트에는 다음과 같은 기술을 선정하였다.
적용 기술: Vue3, Vite, Vue-router, Pinia, tailwindcss (vuetify), eslint, prettier
다음 글에는 Vue프로젝트를 시작할때 해야 할 기본적인 라우터 설정과 CSS 설정, eslint와 prettier 적용까지 다뤄보려 한다.
'FE > Vue' 카테고리의 다른 글
| [Vue] 초기 세팅 끝내기 (Vue Router, Tailwind CSS, ESlint, Prettier) (0) | 2024.04.27 |
|---|
