리액트, 뷰를 안 쓰는 개발자들은 뭐 쓸까? 프론트엔드 프레임워크 알아보기

출처: ChatGPT

 
 
안녕하세요 SSAFY 수료생 기자단 김혜린입니다!
 
요즘 SAFFY 교육생분들은 어떤 프론트엔드 프레임워크로
프론트엔드 공부를 시작하시는 지 궁금한데요.
 
7기 교육생이었던 저는 JavaScript 프론트엔드 프레임워크인 Vue(뷰)로
첫 프론트엔드 개발을 시작하고
 
당시 생태계가 크게 확장되고 있었던 React(리액트)를
여름 방학 기간동안 동기들과 공부해
2학기 프로젝트 프론트엔드 개발에 활용했던 기억이 납니다.
 
 그렇게 프론트엔드에 재미를 붙이고,
프론트엔드 개발자로 취업을 준비할 때도
국내외 모두 이 두 프레임워크 외에
다른 프레임워크를 사용하는 기업은 거의 찾아보기 힘들었는데요
 

https://tsh.io/state-of-frontend
 
 
소프트웨어 개발사 'The Software House'에서
2024년 6028명의 프론트엔드 개발자들을 상대로 진행한
'state of frontend' 설문조사를 보면
다른 프레임워크들 역시 생각보다 많은 점유율을 가지고 있는 것을 볼 수 있습니다.
 

 
"작년에  어떤 프론트엔드 프레임워크를 사용했습니까?"라는 질문에 대한 답변으로
'사용해 봤고 좋은 경험을 했다'는 비율이 높은 순으로
 
React(69.9%)
Vue(44.8%)
Svelte(25.8%)
Angular2+(22.1%)
 
이고
 
여기에 Preact(9%), Alpine.js(7%), HTMX(7%)도 있습니다.
약 10%의 개발자들이 써봤고, 좋은 경험을 했다는 프레임워크가 생각보다 많죠?
 
React와 Vue는 모두 예상하셨겠지만
Svelte와 Angular2+와 나머지 프레임워크들은 꽤 낯선 분들도 계실 것 같아습니다.
 
프론트엔드 관련 자료와 업데이트에서
Svelte와 Anglular2+를 들어는 봤지만 실제로 사용해 본 적 없는 저도
두 프레임워크의 비율이 꽤나 높은 걸 보고 놀랐는데요.
 
오늘 기사에서는 이렇게
React와 Vue 외에도 개발자들이 사랑하는
프론트엔드 프레임워크들에 대해 알아 보는 시간을 가져보겠습니다.
 
기사를 통해 다양한 프론트엔드 프레임워크들에 대해 배우고
내 프로젝트나 업무에 적합한 프레임워크를 찾을 수 있는
시각을 기르는 데 도움이 되었으면 좋겠습니다.
 

Svelte

출처: 위키피디아

 
가장 먼저 살펴 볼 프레임워크는
25.8로 React와 Vue를 바짝 추격한 Svelte입니다.
 
2016년 출시된 JavaScript 프레임워크로
일반적인 JavaScript 프레임워크와 달리
런타임 프레임워크가 아닌 컴파일러입니다.
 
이는 번들 크기(프론트엔드의 용량)를 줄여주고
동작 속도가 빨라지는 효과를 주는데요.
 
또 문법이 HTML과 유사하고 간결해
코드의 양이 적고 가독성이 높은 것이 특징입니다.
 

Angular2+

출처: 위키피디아

 
Angular는 구글이 개발한 오픈소스 프론트엔드 프레임워크입니다.
 
Angular2는 TypeScript 지원, 컴포넌트 기반 아키텍처 등
큰 규모로 개선된 Angular 버전인데요.
Angular2+는 Angular 버전 2보다 같거나 큰 Angular를 통칭하는 것입니다.
 
구글이 만든 만큼 안정적인 기술 지원이 이루어지고 있고
모바일 앱에도 개발 내용을 거의 그대로 사용할 수 있는 게 장점인데요.
 
제공하는 컴포넌트나 라이브러리가 많아
이를 활용해 프로젝트에 사용할 수 있는 것도 장점입니다.
 
 
이처럼 많이 쓰이고 있는 프레임워크들을 보면
프론트엔드 개발자라면 누구나 학습해 사용할 수 있는 정도의 차이를 가지고 있는데요.
 
프로젝트가 성능 중심인지, 기능 중심인지 등
우선순위에 따라 알맞은 프레임워크를 선택하면 좋을 것 같습니다.
 
다소 마이너하지만 그래도 당당하게
응답에서 9%, 7%를 차지한 다른 프레임워크들도 만나볼까요?
 
 

Preact

출처: https://dev.fandom.com/wiki/Preact

 

 
React와 이름도, 로고도 모두 비슷한 Preact는
문법 역시 React와 거의 비슷한 JavaScript 프론트엔드 프레임워크인데요.
 
많은 개발자들이 React를 알고 있다면
Preact를 배우기 위해 추가 학습이 필요하지 않다고 말할 정도로
유사성이 높습니다.
 
Preact는 React의 큰 용량, 느린 속도를 개선하기 위해 만들어진 프레임워크로
 
React는 Virtual DOM이란 레이어를 두고 DOM요소에 접근을 했다면,
Preact는 실제 DOM 요소와 밀접하게 접근하여 동작함으로써 용량과 속도를 개선했는데요.
실제로 문법도 React보다 더 HTML에 가깝도록 만들어졌습니다.
 
Preact로 작성한 어플리케이션을
전용 라이브러리로 한 번 감싸주기만 하면
React와 완전 호환된다는 장점도 있습니다.
 

Alpine.js

출처: https://alpinejs.dev/

 
 
Alpine.js 역시 가벼운 프레임워크를 표방하면서 만들어진 프레임워크인데요
 

 

위 코드처럼 HTML 요소에 직접 기능이나 상태를 연결해
최소한의 노력으로 HTML에 동적인 동작을 추가할 수 있습니다.
 
복잡한 구성, 빌드 등을 전혀 필요로 하지 않고
간편하게 프론트엔드 어플리케이션 만들 수 있는 것이 장점인 프레임워크입니다.
간단한 어플리케이션을 만드려고 할때 좋은 선택지가 될 것 같아요.

 

HTMX

출처: https://en.wikipedia.org/wiki/Htmx

 
마지막으로 HTMX는 JavaScript를 전혀 사용하지 않고
HTML + CSS로만 AJAX를 직접 사용하여
웹 페이지를 동적으로 정의할 수 있는 프론트엔드 라이브러리입니다.
 
HTML attribute에 데이터나 동작을 연결하는 형태로 사용하는데요.
 
이 때문에 별다른 설치나 설정 없이 <script> 태그 하나만 설정하면 바로 적용이 가능하고
JavaScript를 몰라도 프론트엔드 어플리케이션을 만들 수 있다는 장점이 있습니다
 
아주 복잡한 프론트엔드 요소들을 다룰 때는 한계가 있지만
서버 개발자나, 무거운 프론트엔드 프레임워크를 원하지 않는 개발자들이
프론트엔드 개발을 할 때 유용한 라이브러리입니다.
 

---

 
이렇게 React나 Vue 말고도 개발자들이 많이 사용하는
프론트엔드 프레임워크들을 알아봤는데요.
 
많은 기업에서는 보다 오랜 역사와 큰 생태계를 가지고 있는
React와 Vue를 불가피하게 선택해야 하는 경우가 많지만
 
개인 개발을 할 때에는 나의 개발 경험과 프레임워크의 특성에 따라
다양한 프론트엔드 프레임워크를 사용해 보는 것도 좋을 것 같습니다.
 
읽어주셔서 감사합니다 :)

 
 

출처

https://www.elancer.co.kr/blog/detail/297

개발자들은 Svelte(스벨트)를 왜 선호할까? I 이랜서 블로그

 
https://yozm.wishket.com/magazine/detail/3153/

지금 스벨트(Svelte)를 배워야 하는 이유 | 요즘IT

 
https://www.elancer.co.kr/blog/detail/217

앵귤러(Angular)란?, 특징부터 장단점,  사용하는 이유까지 모두 알려드립니다! I 이랜서

 
https://www.syncfusion.com/blogs/post/preact-vs-react

Preact vs. React

 
https://www.syncfusion.com/blogs/post/preact-vs-react

Preact vs. React

 
https://medium.com/@ahamedrashad/understanding-alpine-js-a-lightweight-javascript-framework-a3ab3dd15006

Understanding Alpine.js — A Lightweight JavaScript Framework

 
https://en.wikipedia.org/wiki/Htmx

htmx - Wikipedia