2024년 새해가 밝아오고, 프론트엔드는 많은 발전을 이룩했다.
하지만, 프론트엔드는 발달했지만, 전통 방식을 추구하던 백엔드 및 풀스택에게는 달갑지 않았던 풀스택.
그 중 대표적인 기술이 React가 아닌가.
2022년부터 알음알음 키워오다가 2023년 Github 엑셀리레이터 프로그램에 등재된 이후
프론트엔드에서 갑작스레 주목을 받기 시작하다, 너무나 쉬운 사용법과 적용법으로 백엔드 개발자까지 홀린 프로젝트가 하나 있다.
바로 htmx.
물론 한국에서도 htmx 에 대한 많은 호응이 있었고, 열기도 뜨거웠지만,
접근 방식은 개인적으로는 좀 실망감을 감추지 않을 수 없었다.
물론 htmx 토픽을 100% 전부 읽기엔 한정된 시간과 한정적으로 노출된 아티클 뿐이라 섣부른 판단일 수 있겠으나,
아니, 50%만 봐도 충분히 결론 나왔다. 정말 실망스럽기 그지없다 싶을 정도다.
대표적으로, 외국어 번역한 글을 제외한 여러 한국의 아티클을 읽었을 때, 결론부터 정리하자면,
- 의존성을 낮출 수 있다는 의견이 지배적이다. 이건 확실히 잘 짚은 설명이다.
- 설치와 구현이 매우 쉽다. 즉, 러닝 커브가 없다. 지당하신 말씀.
- 프론트엔드의 생산성을 높일 수 있다...? 물론 생산성이야 높겠지만 그 범위는 매우 제한적이다. 이유는 후술.
내가 원하는 결론이 없었다. 해외에서는 이미 Hacker News를 비롯해 여러 커뮤니티의 지배적인 결론이기도 하다.
설치와 구현이 매우 쉬워 프론트엔드 접근성이 어려운 백엔드 및 풀스택 웹 어플리케이션에 htmx가 적합하다.
백엔드에 집중해온 사람에게 프론트엔드 입문하자마자 리액트 시켜봐라. 당사자의 마음같아선 죽빵 갈기고 싶을 것이다.
하지만 htmx 는 HTML 할 줄 알면 백엔드 리소스 가져올 줄만 알면 끝나기 때문에 매우 매력적인 프로젝트다.
게다가 Websocket 을 제외한 서버 수신 구현체는 안정적이기 때문에 HTML 특성 적용으로 끝을 본다.
이정도의 매력적인 프로젝트를 국내 많은 백엔드나 풀스택 개발자들이 느끼지 못해 안타까울 따름이다.
그래서 오늘은, 골수 백엔드와 풀스택 개발자를 위해, 특히 JS와 동떨어진 Java, Python 등의 언어를 사용하는 개발자들에게,
오늘 htmx를 프론트엔드로 써야 하는 이유를 기술하도록 하겠다.
골수 백엔드 개발자에게 htmx가 좋은 이유.
3가지 스텝만 밟으면 된다.
- 준비: HTML 문서와 적당한 웹 서버(아마 보통 네 웹 어플리케이션에 HTML 파일 넣으면 되니까.)
- 설치:
<head>태그 안 마지막에 아래 요소를 넣으면 설치 끝!<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script> - 구현: 보통 아래 4가지 특성을 많이 쓸 것이다. 순서대로 API 경로, 작동유형, 변경대상, 변경방식이다.
<button hx-post="/clicked" hx-trigger="click" hx-target="#parent-div" hx-swap="outerHTML" > 클릭해줘! </button> <div id="parent-div">클릭하면 무슨일이 일어남?</div>
끝이다. 그리고 백엔드 알아서 구현한 뒤, 웹 어플리케이션 실행 후, 위 내용이 적용된 HTML 문서 띄우고 클릭해서 대상의 내용이 네가 원하는 내용으로 바뀌는 꼬라지를 보는 순간 너의 풀스택 웹 어플리케이션은 이미 완성이다.
골치아픈 자바스크립트여, 안녕!?
대체적으로 서버와 상호작용하는 위주의 웹 어플리케이션 구축을 원하고, 게다가 네가 자신이 쓰는 언어가 사랑스럽지만, 강타입이 아니거나, 예상을 할 수 없는 체계에 짜증나거나, 매력 없는 자바스크립트가 싫다면, (특히 자바 너.)
그런 너에게 htmx는 오아시스 그 자체인 것이다.
물론 현실적으로 100% 만족하는 웹 어플리케이션은 없을 것이다.
많은 열을 가지는 것도 모자라 100만개 이상의 행을 출력해야 하는 데이터그리드라든가,
차트를 표시하거나, 기타 웹 문서에 여러 시각적인 고급 기능이 필요하다면...
자바스크립트 써야 하는 것은 필연적인 선택이다.
하지만 지금 당장에는 자바스크립트 없이 서버와 상호작용을 통해 내용이 출력되는 너의 웹 어플리케이션을 만끽하라.
당장엔 그래도 된다. 하지만 그 이상의 요소가 필요하다면, 그때는 프론트엔드 개발자를 끌고 오면 되니까.
검증됐다? 조심스럽다.
먼저, Github, Jetbrains 등 유수의 기업이 집중적으로 htmx 프로젝트를 만든 Bigsky Software 의 Carson Gross 를 통한 강연을 펼쳤다.
- GitHub Accelerator: Open Source Demo Day
- htmx: Writing JavaScript to Avoid Writing JavaScript, by Carson Gross
하지만 안타깝게도 이 htmx 프로젝트를 기업이 직접 구현한 사례는 아직은 없다.
따라서 검증 얘기를 꺼냈다면, 대답은 조심스러울 수밖에 없다.
물론 토이 프로젝트로는 손색없는 선택이다. 하지만, 지금, 자바스크립트로밖에 할 수가 없는 웹 문서와 서버 간의 상호작용을 생각하면,
현재 스크립트를 최대로 줄일 수 있는 유일한 대안은 현재 htmx 뿐이다.
물론 언젠가는 사례가 나올 것이고, 아직까지는 지켜볼 단계이긴 하지만, 도전적인 개발자의 건승을 기원하겠다.
여기까지
사실 더 쓰고 싶지만, 좀 더 쓰자니 백엔드 개발자들에게 프론트엔드 선동을 유발할 우려가 있어서 더 쓰려다 말았다.
정리해보자. htmx가 왜 주목받는가,
- 프론트엔드 지식이 부족한 백엔드 개발자에게 서버와 통신을 통한 내용 표시를 손쉽게 해결
- 설치부터 사용까지, HTML으로 해결, CSS는 옵션, 자바스크립트? 땡기기 전까지 필요 없다.
- 특히 자바스크립트와 이질감 느껴지는 언어(파이썬 등)나 자바스크립트가 싫은 언어(자바 등)에게 웹 문서 표시의 좋은 수단
- 아직은 실무 적용 사례가 없으나, Github, Jetbrains 등 유수의 기업이 주목하고 투자받은 최소한의 검증이 된 프로젝트
물론 프론트엔드를 논할 때 자바스크립트를 빠뜨릴 수는 없을 것이다.
설령 웹어셈블리가 발달하여 자바스크립트가 아닌 다른 언어로 브라우저 상호작용이 있다 한들 말이지.
하지만, 지금은 이런 혁신적인 프로젝트를 내놓은 지금을 만끽하기에 충분한 시기다.
리액트, 리액트, 그리고 리액트, 프론트엔드 소식을 들을 때 정말 지겨웠던 리액트, 특히 백엔드 개발자에게는 말이지.
이걸 htmx가 풀어주었다는 게 어딘가, 물론 리액트가 나쁜 건 아니다. 그만큼 인기가 상당하다는 반증이다.
물론 실제로 지겨워서 Solid나 Qwik, Svelte로 옮겨간 프론트엔드 개발자도 몇몇 있다. 나처럼 오 시발 이것도 써보고 저것도 써보고 이런 미친놈이 얼마나 있겠냐만은...
그저 우린 htmx를 통해 HTML 만으로도 웹 문서를 표현 가능한 지금을 즐기자는 거다.
끗.
