[IT] 서버 설치형 개인 공유형 마크다운 에디터 프로젝트: 프론트엔드는 Vue.js

talkit (71)in #kr • 3 days ago

[IT] 서버 설치형 개인 공유형 마크다운 에디터 프로젝트: 프론트엔드는 Vue.js vs React?

안녕하세요, 가야태자 @talkit 입니다. ^^

지난번 글들을 통해 제 프로젝트의 심장인 데이터베이스(Firebird)와 엔진인 백엔드(Python FastAPI)를 결정했습니다. 이제 드디어 사용자가 실제로 눈으로 보고 글을 작성할 '얼굴', 즉 프론트엔드 화면 프레임워크를 결정할 차례입니다.

가장 대표적인 두 축, Vue.js와 React를 두고 선정해 보려고 합니다.

이 프로젝트의 대전제는 "Oracle/Google 무료 클라우드에서도 쌩쌩 돌 수 있는 가벼움"과 Docker 하나로 끝나는 "가벼운 설치"입니다. 이 관점에서 어떤 프레임워크가 제 에디터에 더 어울릴지 고민해 보았습니다.

⚖️ 프론트엔드 프레임워크 비교: Vue.js vs React (가벼움 기준)

'설치형 프로그램'을 배포했을 때 사용자가 체감하는 가벼움은 크게 두 가지에서 옵니다.

빌드 파일 크기: 사용자가 브라우저에서 다운로드해야 할 자바스크립트 파일 용량. (네트워크 대역폭 절약)
런타임 메모리: 사용자의 브라우저에서 에디터가 차지하는 메모리. (저사양 PC에서도 원활)

이 두 가지 관점에서 제미나이와 함께 비교해 본 결과입니다.

비교 항목	Vue.js (+ Vite 조합)	React (+ Next.js/Vite)
코어 라이브러리 용량	상대적으로 작음 (슬림함)	상대적으로 큼 (묵직함)
학습 곡선	쉬움 (백엔드 개발자에게 친숙)	보통~어려움 (JSX, Hooks 등)
개발 생산성	SFC(Single File Component)로 직관적	우수 (방대한 생태계)
마크다운 생태계	우수 (marked, markdown-it 등 연동 원활)	최상 (다양한 라이브러리 존재)
최종 추천	초경량 설치형에 최적	엔터프라이즈급 대형 프로젝트에 적합

1. React (리액트)의 아쉬운 점: '과한' 묵직함

React는 전 세계에서 가장 인기 있는 프레임워크답게 생태계가 방대하고 강력합니다. 하지만 코어 라이브러리 자체가 Vue에 비해 묵직한 편입니다. 대규모 기업형 프로젝트라면 모를까, 개인이 무료 클라우드 서버에 가볍게 올려서 쓰는 '나만의 마크다운 에디터'에는 조금 '과한(Overkill)' 선택이 될 수 있었습니다.

2. Vue.js의 강력한 장점: '딱 맞는' 가벼움

반면 Vue.js는 코어 자체가 매우 슬림하게 설계되어 있습니다. 특히 최신 빌드 도구인 Vite와 조합하면 빌드 결과물이 극도로 최적화되고 가벼워집니다. 이는 사용자의 네트워크 대역폭과 브라우저 리소스를 아껴주어, 저사양 기기에서도 에디터가 '쌩쌩' 돌아가게 만들어 줍니다.

또한, HTML, CSS, JavaScript를 하나의 파일(.vue)에 모아서 개발하는 Single File Component(SFC) 구조는 백엔드 개발자인 저에게도 매우 직관적이고 코드를 이해하기 쉬워 학습 부담이 적었습니다.