A First Look at HTMX and How it Compares to React
Builder.io
오늘의 오전 학습 - HTMX
최근 프론트엔드 생태계의 추세는 React 가 지배적이며, Next.js 등의 프레임워크를 통해 일부 서버사이드 로직을 프론트엔드 단에서 처리하는 추세로 가고 있습니다.
점점 거대해져가는 프론트엔드 라이브러리/프레임워크 생태계는 복잡한 상태관리와 상호작용이 필요한 웹사이트에는 적합할 수 있지만, 상황에 따라 좀 더 간단한 웹 사이트를 생성하고자 할 때나, 백엔드 개발자로서 프론트엔드 부분을 리엑트까지 확장하여 모두 커버할 수 없는 경우가 존재할 것입니다.
이러한 상황에 HTMX 는 충분히 좋은 대안이 될 수 있다고 생각이 들었고, 잘 작성된 블로그 포스팅을 통해 간략하게 요약하고자 합니다.
참고문헌
https://www.builder.io/blog/htmx-vs-react
https://www.youtube.com/watch?v=-ptq9HCrI_U
요약
HTMX 는 우리가 쉽게 접할 수 있는 HTML의 확장 문법입니다. 즉, 기존의 HTML 속성에 'hx-' 로 시작하는 새로운 속성이 추가될 뿐이며, 자바스크립트를 사용하지 않고도 AJAX와 같은 부분적인 업데이트가 가능합니다.
HTMX는 기존 JSON 데이터를 응답받는것이 아니라, HTML 데이터를 응답받아 바로 적용시키는 방식입니다. 또한 대부분은 로직을 클라이언트측이 아닌 서버측에서 모두 처리하게 됩니다. (거진 UI 까지...)
서버와의 상호작용이 기존 거대한 리엑트 프레임워크를 통한 방식보다 더 직관적이고 심플합니다.
이러한 특징으로 살펴볼 때, 학습의 접근성이 좀 더 좋고 클라이언트 단의 복잡성을 감소시킬 수 있습니다.
실제 한 회사에서는 2달의 기간에 걸쳐 React 기반 웹사이트의 성능저하 부분을 HTMX로 환경을 변경하면서 대폭 개선한 사례도 있어, 좀 더 복잡한 웹 사이트에서도 HTMX의 활용도 기대할 수 있겠습니다
다만, 더 복잡한 상태관리가 필요한 웹 사이트에서는 적합하지 않을 수 있으며, 대부분의 API의 response 형식은 JSON 이기에 HTMX 를 활용하기는 쉽지 않습니다.
현재로서 간단한 웹 사이트를 구축할 필요성이 있는 백엔드 개발자에 한하여 HTMX 는 좋은 옵션이 될 수 있다 생각이 듭니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 11월 17일 오전 12:59
댓글 0
함께 읽은 게시물
ChatGPT 버전명 설명
ChatGPT 사용할 때 어떤 모델을 선택해야할지 망설여집니다. 모델명만 봐서는 어떤게 좋은지 모르겠더라고요.
... 더 보기
마이크로소프트(MS)가 대규모 해고를 예고한 가운데 해고 대상의 절반가량이 소프트웨어 엔지니어링 종사자인 것으로 나타났다. 최근 기업들이 인공지능(AI)을 적극적으로 도입하면서 AI발 인력 조정이 본격화한 것이다. 업계에서는 향후 단순한 코딩 직무는 AI가 대체 가능한 만큼, 개발자의 역량이 더욱 중요해질 것으로 보고 있다.
... 더 보기한 명의 리더가 일으키는 기적은 놀랍다. 한국도 많은 리더가 있었다. 그러나 요즘엔 국가의 리더는 별로 안 보이고 나라 안팎에서 구설수에만 오르고 있다. 신뢰와 화합의 리더십은 바닥이다. 인간다운 도리와 설득력, 역량이 없고 마음은 황폐하기 때문으로 보인다.
... 더 보기
