제가 써본 프론트엔드 프레임워크들 후기입니다.
프론트엔드 포럼인데 프론트엔드와 관련된 적힌글이 없어서 너무 아쉬운 마음에 저녁도 거르고 적어봅니다.
라이믹스로 다시 돌아오기 전까진 여유롭게 취미개발 하면서 프론트엔드 개발만 진행했어서 그 과정에서 겪은 프레임워크들에 대해서 적어볼까 합니다.
물론 저는 브라우저 엔진까지 생각하면서 개발하는 수준은 아니기때문에 "이사람은 이렇게 느꼈구나" 수준으로 적당히 걸러들어주시면 감사하겠습니다 ㅡㅡ;
Angular
- 1.x버전대에만 써봤습니다. 사실상 '제가 처음 써본 프론트엔드 프레임워크'네요. Single Page Application을 대중화 시킨 선두주자가 아니였나 생각합니다.
- 이게 된다고? 싶은것들이 엄청나게 많았었습니다(과거형입니다)
- ng- 로 비롯된 directive의 지옥이였습니다.
- 제 기억으로는 3버전대에서 확 바뀌면서 Typescript를 가장 적극적으로 밀었고, 지금은 대세가 된 Typescript지만, 당시엔 엄청나게 생소했기에 적극적으로 점유율을 빠르게 무너트렸다고 생각합니다.
-> 이걸 보면서 너무 빠른 기술 변화는 진짜 큰일나는구나 하는 좋은 배움이 되었습니다.
- 1.x 버전대의 성능은 최악이지만(지금은 여러가지 변화감지를 브라우저에서 지원하지만, 그당시엔 시간마다 데이터 변화를 스캔했다는 놀라운 사실이 전해져 내립니다), "내가 변경한 값이 자동으로 반영이 된다고?" 는 가장 신기한 경험이였던것 같습니다.
React
- 러닝커브 낮다는 리액터들의 말은 무시하세요.
- 이거 하시면 프론트엔드로 밥먹고삽니다. 대표적으로 네카라쿠배당토의 토스가 적극적입니다.
- 가장 진보적이면서 가장 복잡합니다. Teleport라던가, SSR에서 Hydration과 같은 기능들을 도입한게 리액트였던걸로 기억합니다.
- React Native라는 네이티브 모바일 앱 개발도 가능한 한핏줄인것처럼 착각하게 만드는 녀석이 있습니다. 막상 뜯어보면 한 핏줄이 아니지만요.
- 제 기준으로는 작업성에서 최악입니다. useMemo, useState 등등.. use하는게 뭐그렇게 많은지 모르겠습니다.
-> 그 덕분에 성능 개선을 위한 컴파일러를 만들고 있습니다. 제 편견이겠지만, 상당히 부정적으로 봅니다.
- JSX덕분에 class를 className으로 적어야 하는 등 여러 고초가 심합니다.
- 가장 활발한 생태계를 갖고있습니다. Next.js 다음으로는 @shadcn/ui 같은 UI 라이브러리가 요즘엔 가장 핫한것같네요.
- 어느정도 혼돈의 시기를 겪고 벗어나는 모습입니다. 개인적으로는 가장 많이 지켜보고있지만, 가장 쓰기싫은 녀석입니다.
Vue
- 패스트 팔로어 전략을 따르는 핵심에 충실한 프레임워크라고 생각합니다. 리액트에 뭔가 좋은거 추가되면 고새 호로록 하고 빨아가는 녀석입니다.
- 러닝커브가 가장 낮아서 Angular 다음으로 즐거운 경험을 하고있습니다. 단점이라면 Angular처럼 v-model, v-if같은 directive 지옥입니다.
- 상태관리 라이브러리인 Pinia나 Vue Router같은게 정말 쓰기 쉽습니다. 어렵다 생각되시면 리액트 한번 보고 오시면 아차 싶으실겁니다. (Redux, Mobx 등등.. 어후)
- 이웃한 큰 나라 덕분에 어느정도 의존성 라이브러리/기능들은 꽤 있는 편입니다. 뭐 필요하다 싶으면 검색해보면 나오는 정도입니다.
-> 그 덕분에 중국어로 README가 적힌 저장소들이 엄청나게 많습니다. 이슈관리만 들어가도 자기네들끼리 중국어로 소통하고 있는 모습이 간간히 보입니다.
- 성능은 리액트보단 괜찮습니다. 꾸준히 개선되는 모습도 보여서 좋습니다.
- 무엇보다 메인 개발자인 Evan You가 Vite, VuePress(이젠 VitePress에 밀렸지만요)도 개발하는 등 프론트엔드 개발 전반의 패러다임을 바꾸는 모습이라 상당히 긍정적으로 봅니다.
Svelte
- 극초기 버전대에만 써봤습니다. 프론트엔드로만 돌리는 어플리케이션에서 성능적으로 상당히 놀라운 경험을 했습니다.
- 생긴건 뷰랑 비슷한것같다고 착각할 수 있습니다.
- 이때 Rollup이라는 번들러를 처음 알고 "트리쉐이킹을 자동으로 해준다니!"하며 신기해했습니다.
- 현재 에코시스템 수준이 어떨지 모르겠습니다.. 웬만한 능력있는 개발자라도 리액트 기웃거리게 하는 수준이라고 생각합니다.
- 다시 써볼거야? 싶으면 음..? 싶네요. 최근에는 rune인가 뭔가 또 새로운 방식을 도입했다고 하던데, 더 복잡해진 느낌이라 기존의 지식으로는 못건들 물건이 되어버렸습니다.
- 한국에서 사용자 찾기도 엄청나게 힘들어요.
그래서 넌 지금 뭐쓰냐 하면 Vue씁니다. 실제로 제 운영중인 서비스에 일부 vue로 만든 코드가 적용되어있기도 하구요.
용량 최적화적인 면에서 이것저것 신경쓰면서 도입을 주저하고 있는데, 최적화를 일부 해결하게 되면 주저없이 제가 만든 코드들은 vue로 싹 갈아엎을 정도로 vue에 대해서 신뢰도가 큽니다.
앞으로 뭐 도움될만한 글 있으면 올려보겠습니다. (__)
댓글 8
저는 맛보기 정도로 리액트랑 뷰 정도 경험해봤습니다.
라이믹스로 주로 작업을 했기 때문에 딱히 많이 사용해볼 일은 없었습니다.
리액트는 개발하는 프로젝트마다 개발을 리드하는 사람이 달랐는데 다 사용방법이 조금씩 달라서 적응하기가 까다로웠습니다.
스벨트는 이런게 있구나 하고 해본 정도고, 플러터로 앱 만드는 거 조금 해봤네요.
라이믹스에서 뭔가 결합해서 해볼 수 있을까 했는데 잘 모르겠더군요 ㅎ
api가 그래서 공식적으로 코어에서 개발되어서 나왔으면 좋겠다고 생각을 했는데
보안적으로 요구하는게 다를 수 있기 때문에 직접 만들어서 써야한다던가 그랬던거 같네요.
그래도 훅 애드온이라던가 알림 모듈 연동해서 사용한다던가 하는 정도는 가능하지 않을까 싶네요.
프론트엔드 프레임워크랑 라이믹스를 합치는건 너무 신중해야 될 문제라(초기 셋업할때 로딩지연이 발생하는 경우가 있습니다), 제가 운영하고 있는 서비스에는 스티커 모듈 프론트엔드 재작업 및 일부 기능 추가하면서 선제적으로 넣은 수준입니다.
말씀하신것중에 알림모듈이 알림센터가 맞다면 웹소켓같은 실시간 전송이나 지속적인 서버에 새로고침을 주는 형태로 사용자가 실시간 갱신된다 느끼게끔 만드는게 가장 중요할텐데, 쉽지 않은 편이긴 합니다.
대부분 비슷한 평가인 것같네요.
저는 AlpineJS 써보고 있습니다.
단순해서 막쓰기 좋은 것같은데 복잡도를 키워서 쓰기는 무리일 것 같고 단순하게 사용하는데는 괜찮은 것 같습니다.
템플릿 엔진처럼 사용하고있습니다.
Alpinejs도 한번 건너건너 들어본적이 있는것같습니다.
아래 루키님이 언급하신 HTMX과 같은 형태로 들어봤던것같아요.
저는 템플릿을 v2로 갈아엎질 못해서 템플릿 내에 중괄호를 상당히 많이 사용하고 있는데, 중괄호에 템플릿이 겹치는 형태의 라이브러리들은 점차 사용하다보니 템플릿 엔진이랑 표현식이 헷갈리게 되어서 결국 한번 실수하면 화딱지나서 갈아엎게 되더라구요. --;
상당히 많은것들을 사용해보셨군요. vue 의 탄생에는 angular 의 원인이 많았다는데 저는 angular를 사용해보지 못했습니다.
에카님의 후기외에 개인적으로 추천해보자면 , 저는 Astro 를 무척 좋아합니다. 일단 최고의 장점은 진입장벽이 거의 없습니다. UI 라이브러리와 무관하여 필요시 원하는것을 가져다 쓰면 되고, 라이브러리 없이 바닐라 자바스크립트를 그냥 써도 되고, Content Layer API , Actions API (form 지원, zod 내장) 등을 사용하여 type safe 한 프론트/백엔드를 통합(tRPC 유사) 으로 구현할 수 있습니다. 그외에도 session , cookies, middleware 등 많은 기능을 지원하고 있어, 필요시 가져다 쓰면 됩니다. 또한 .astro 로 컴포넌트를 만들때 JSX 유사한 문법을 사용하지만 class를 className으로 어글리하고 피곤하게 변경할 필요 없습니다.
react 쪽 프레임워크는 nextjs를 싫어?하지만 Remix (현재는 React Router v7 로 통합) 를 좋아합니다. 태생적으로 SSR 에 특화된 프레임워크이고 상태관리가 거의 필요없고 마법같은 자바스트립트 랩핑보다는 웹표준을 지향하기 때문에 loader 함수는 GET 요청을, action 함수는 form 의 post , put , delete , patch 등 요청을 직관적으로 관리 할수있고 요청후에 revalidation 이 자동으로 이뤄지기에 상태관리에서 자유로워집니다. Astro 의 action 기능도 Remix 에서 일부분 영향을 받았다고 알고 있습니다. ChatGPT의 웹서비스도 초기에 Nextjs 로 개발되었으나 얼마전에 Remix 로 갈아탔습니다.
이러한 프론트엔드 프레임워크들은 라이믹스랑 연동할려면 라이믹스를 백엔드로 사용하면서 API 연동등 삽질이 많이 필요하겠지만, 별도의 삽질없이 바로 라이믹스에 넣고 이리저리 돌려볼수 있는 라이브러리가 있습니다. 바로 HTMX 라는 라이브러리인데, HTMX 공식홈페이지에서 "htmx를 사용하면 HTML 속성만으로 AJAX, CSS 전환 효과, WebSocket, 서버에서 보내는 이벤트(SSE) 등을 직접 활용할 수 있습니다.이를 통해 간결한 HTML의 장점과 강력한 기능을 결합하여 현대적인 사용자 인터페이스(UI)를 구축할 수 있습니다.htmx는 파일 크기가 작고(~14k min.gz’d), 별도의 의존성이 없으며, 확장 가능한 라이브러리입니다." 라고 소개를 하고 있습니다. 로컬 라이믹스에서 가볍게 사용해보니 나쁘진 않았습니다. 실제 응용을 위한 일부 htmx-* 속성을 사용하는 기능이 작동안되는 부분도 있었습니다.(템플릿문법과 충돌일수도, 아직 더 테스트해봐야함) 만들고자 하는 기능에 따라 더 잘 사용하기 위해서는 모듈에서 act 을 만들어 지원해줘야 될것 같기도 합니다. htmx 의 매커니즘이 템플릿언어를 사용하는 프레임워크랑 궁합이 맞다보니 , Django 쪽에서 htmx 를 많이 사용하는것 처럼, 라이믹스도 htmx 와 같이 사용하면 나름 괜찮은 선택이 될것 같습니다.
위에 분들말대로 현시대 JS프레임워크가 저렇습니다. remix.js의 loader(), action()함수 같은것에 next.js 14, 15버전부터 server actions 이라는 새로운 기능을 도입으로 거의 같은 기능이 구현되어 있습니다.
미세한 차이는 있을지언정 어짜피 됩니다. 빌드과정에서 아직도 webpack을 쓰는 next.js이기에 이게 조금 불편함과 turbo pack을 자체 개발하여 베타버전을 쓰고 있지만 딱히 좋은지도 모르겠습니다 (베타 이기에 그렇거니 생각하고 있습니다.)
server actions이란것이 있어도 어짜피 모바일등과 api 연동을 위해서 최대한 /app/api/route.ts 에서 최대한 작업중입니다. 사실 status나 error 등 처리가 훨씬 수월하기에 이걸로 여전히 쓰고 있습니다. :)
------
번외로 의외로 라이믹스 커뮤니티에 프론트엔드 개발자들분들이 있는건 굉장히 반가운 소식이네요. 서로 몰랐던부분이나 정보 공유가 좀 더 활발해졌으면 좋겠습니다.
그때 발표후 각종 밈들이 생각납니다. 🤣
OMG!!! ㅋㅋㅋㅋ 저도 저런 부분이 조금있긴합니다. 특히 관리자쪽 만들면서 게시판 설정 같은경우 저런쪽에 속하죠 ㅠㅠ
다른 프레임워크 쓴다고 해서 저렇게 안되리라는 보장도 없어서 짠거였는대 지금 보면 컴포넌트를 좀 더 나눠서 하면 되는거긴 합니다만 번들 사이즈도 무시못하기에.. 고민이 많습니다.