FE 대표 프레임워크 작동방식과 성능 비교: 동일 페이지 구현에서 러닝커브와 성능 사이의 trade-off

[HidenLee]

🛫 여행한DAY와 함께 떠나는 신나는 FE 프레임워크 여행기
(React, vue ... svelte까지?)🤔

작성 시나리오

안녕하세요, 여행한DAY 팀장 하이든입니다!
여행을 합리적인 가격에 알맞은 일정으로 계획할 수 있도록 도와주는 저희 웹 서비스 여행한DAY! ✈️
최고의 사용자 경험을 제공하기 위해 기술적으로 많은 고민을 했고, 다양한 프레임워크를 비교한 끝에 최종적으로 리액트를 선택하게 되었습니다!
그 이유를 함께 알아볼까요? 😊

목차 1. 🚀 리액트를 선택한 이유

(최종적으로 리액트를 선택한 이유를 간단히 정리)

목차 2. 🔍 다른 프레임워크와의 비교

(react, vue,svelt, angular등 이름 알려진 프론트엔드 프레임워크들의 특징들을 이론적으로 먼저 비교)

목차 3. 📊 직접 구현해 확인해보는 성능 실험

(리액트로 구현했던 서비스 페이지 중 하나를 골라 다른 프레임워크로 작성하고 응답 시간으로 간이 벤치마크 비교 - vue는필수! 시간남으면 svelte도? )

주제 선정 의의

프론트엔드에서 주로 사용하는 라이브러리 / 프레임워크 (스벨트는 컴파일러다)를 비교하는 블로그 글은 이미 너무나도 많지만, 그 성능을 비교하는 내용에서 논문이나 기사를 인용하는 글은 많아도 직접 자신의 서비스 페이지를 이용해서 확인하는 글은 찾기 어렵습니다.
("react vue svelte benchmark"라는 검색어로 구글검색 5페이지까지 없었습니다.)

라이브러리 마다 다른 DOM 접근 방식에서 오는 차이 뿐 아니라, 개발자가 작성한 페이지가 얼마나 복잡하고 동적인지에 따라서도 웹 페이지 로딩 지연은 달라질 수 있습니다. 직접 개발한 페이지로 각 프레임워크를 비교해본다는 점이 다른 블로그 글에 비해 큰 차별점이 될 것이라 가정했습니다.

[startupcodekr]

리액트에서의 데이터 페칭 및 캐싱 전략: 항공권 가격 최신화 시 성능 최적화

[startupcodekr]

사용자 경험 중심의 데이터 동기화 및 페칭 전략