HTML은 마크업 언어일 뿐이라 별 기능이 없는데, 자, 요걸 좀 업그레이드해서 쓰고 싶으면 htmx를 쓰면 되겠습니다. 자, 요거 쓰면

HTML만으로 많은 기능들을 되게 편하게 구현할 수 있기 때문에 자바스크립트 코드 양도 많이 줄일 수 있고요.

리액트로 어렵게 짜던 코드도 더 쉽게 이렇게 대체를 할 수가 있고요. 자, 진작에 HTML을 이렇게 좀 만들었으면 웹 개발이 훨씬 더

쉬워졌을 것 같은데, 자, 근데 실은 공식 이런 건 아니고 누가 만든 라이브러리구요. 근데 얼마 전에

깃허브에서 밀어주는 오픈소스 프로젝트로 선정이 됐기 때문에 잠깐 알아보도록 할게요. 자, htmx를

써보고 싶으면 설치를 하셔야 되는데 설치는 그냥 HTML 파일에다가요 스크립트 태그 하나 붙여넣으면 끝이에요. 이러면 이제 htmx가

제공하는 업그레이드된 HTML 문법을 사용할 수 있고요. 자, 프론트엔드 개발할 때 맨날 하는 짓거리가 뭐냐면 자, 서버에서 데이터를

가져와서 HTML로 보여주는 짓거리를 가장 많이 하는데 예를 들어요. 버튼을 누르면 서버에서 상품을 더 가져와서

이렇게 보여주고 싶으면 어떻게 코드를 짜야 돼요? 자, 쌩 자바스크립트 쓰면 이렇게 코드를 짜셔야 되고요.

리액트로 짤려오고 하면 이런 짓거리를 하셔야 되는데 HTMX를 쓰면 훨씬 더 쉽게 개발할 수가 있는 거예요. 자, 이런

식으로 HTMX 문법으로 코드를 짜시면 이제요 버튼을 클릭하면 해당 URL로 GET 요청을 날려서 이제 서버에서 HTML을 가져오게 되고요.

그리고 그 가져온 결과를요 자리에 덮어써 줄 거예요. 자, 클릭해보면 진짜 되죠. 딱 끼고 한 줄이면 된다니까요. 자

근데 잠깐 이상한 점이 있는데 서버에서 HTML을 가져온다는 게 좀 생소하지 않습니까? 왜냐면 요즘 사람들은 리액트 같은 걸로 왜 개발을

시작하다 보니까 자 서버랑 뭐 JSON 데이터 있죠? 이런 거 주고받는 게 기본인 줄 알고 있는데 실은 웹

서버는 JSON 데이터 같은 게 아니라 HTML을 보내주는 게 원래 근본이고요. 그리고 요딴 서버에 API들은 원래 이제 REST API라고 부를 수도

없습니다. JSON 데이터를 보내는 순간 REST 원칙에 어긋나기 때문에 그래요. 물론 제가 하는 헛소리가 아니라

REST 원칙 만든 아저씨가 했던 말이고요. 폴링이라고 해서 몇 초마다 계속 서버로 이제 요청을 날릴 수 있는

기능도 있는데 자 여기로 이제 GET 요청을 하시면 현재 시간을 서버에서 이렇게 보내 줄 거예요. 근데 이걸 1초마다 하고 싶으면 자

이런 식으로 코드를 작성하시면 되겠습니다. 이러면 1초마다 여기로 이제 캔 요청을 해서 시간 가져오는 거 보이시죠?

자 이번엔 서버에서 html을 가져와서 다른 위치에 있는 html의 넣고 싶으면 hx 타겟이라고 이어시고요. 자 여기 안에 셀렉터 문법으로 다른 요소를

표시해 주면 됩니다. 자 예를 들어 이런 식으로 기입을 하면 자 요런 경로로 겟 요청을 해서 서버에서 html을 가져오겠죠. 자

근데 아이디가 result인 곳에 이런 식으로 집어넣어 줄 거예요. 그리고 참고로 이제 이런 식으로 코드를 짜도 이제 인풋 태그에서

바로바로 겟 요청을 할 수가 있고요. html 파일에서 a태그나 폼 태그를 쓰면 기본적으로 새로고침이 되는데 자

요게 싫으면 hx 부스트라는 속성을 집어넣으시면 되겠습니다. 자 이러면 a태그를 클릭하는 순간 새로운 블로그

페이지에 HTML을 받아 올 텐데 근데요 라이브러리 덕분에 새로고침 없이 블로그 페이지로 샵 바꿔 줄

거예요 이러면 부드러운 페이지 전환 같은 게 되게 쉽게 가능하구요 이걸 리액트로 이렇게 코드를 짠다고 했으면

여러분들 귀찮게 라우터 쓰거나 탭을 만들거나 그러셔야 되는데 요거 쓰면 한방에 그리고 서버 센트 이벤트나 뭐 웹 소켓

이런 거 연결도 자바스크립트 없이 쉽게 가능하구요 로딩 중일 때의 로딩 중 UI 같은 것도 되게 쉽게 보여줄 수 있습니다

자 이게 핵심 기능 끝인데 요거 말고 다른 기능들이 필요하며 여러분들이 이제 평소에 짜던 자바스크립트 똑같이

이용할 수 있고요 물론 HTMX의 단점도 있습니다 자 여러분들이 서버랑 데이터를 자주 주고받지 않으면 쓸데없는

라이브러리구요 html을 이동하거나 삭제하거나 그런 식으로 html을 어렵게 애니메이션 같은 걸 주고 싶다 그러면 별로 도움이 안 될 수 있고요

자 그리고 요거 쓰려면 기존에 있던 서버 API 기능들도 다 이렇게 html을 전송해 주도록 바꿔야 되기 때문에

원래부터 서버사이드 렌더링을 좀 하던 프로젝트에서만 좀 의미가 있을 것 같고요 그리고 이제 내가 운영하는

서버가 아니라 다른 외부 서버에서 이렇게 데이터를 가져오는 경우에는 크게 도움이 되진 않고 그냥 옛날 문법을 갖다 쓰셔야 될 거예요 그래서

아무튼 서버에서 이렇게 데이터를 받아와서 html로 보여주는 작업을 되게 많이 하는데 자 근데 좀 예쁘게

쉽게 그리고 SPA 스타일로 이렇게 구현하고 싶으면 htmx 한번 써보시면 되게 쉽게 개발할 수 있으니까 한번 써보시면 될 거 같고요

근데 나는 마이너한 라이브러리 같은 거 안 쓴다고요. 자, 실제로 htmx를 진짜 서비스에 사용했던

기업이 하나 있는데 자 법전 같은 걸 검색할 수 있는 웹사이트를 운영하던 기업이 있습니다. 자, 근데 그 사이트를

리액트로 만들었다가 좀 긴 html 같은 걸 이렇게 리액트로 이렇게 보여주려고 하니까 성능이 쓰레기 같은 거예요. 자, 그래서

두 달에 걸쳐서 htmx로 이렇게 바꿨는데 자 훨씬 더 좋은 성능과 적은 코드로 리액트랑 똑같은 UX

느낌을 주는 사이트를 만들었다고 하고요. 그래서 리액트 같은 거 안 쓰고도 이걸로 되게 쉽게 부드러운

SPA 사이트를 만들 수가 있으니까 서버사이드 렌더링 같은 거 기존에 많이 하던 곳들은 한번 생각해 보셔도

좋을 것 같구요 아니면 새로운 개인 프로젝트에 써봐도 재밌을 것 같습니다 물론 저는 안 쓸 거고요

html은 프로그래밍 언어 맞네요 역시

코딩애플

HTML 기능 업그레이드를 위한 라이브러리 htmx 소개

HTML로 다양한 기능 편리하게 구현, 자바스크립트 코드 양 감소

리액트보다 쉬운 코드 구현 가능

깃허브 추천 오픈소스 프로젝트로 선정

설치는 HTML 파일에 스크립트 태그 추가만으로 간편하게 가능

HTMX를 이용한 서버 데이터 활용

서버에서 데이터 가져와 HTML로 보여주는 방식 설명

버튼 클릭 시 서버에서 상품 정보 가져와서 표시하는 예시

자바스크립트, 리액트와 비교하여 HTMX를 사용한 간편한 코드 구현 설명

HTMX 문법을 사용하여 버튼 클릭 시 GET 요청으로 서버에서 HTML 가져오고, 결과를 화면에 덮어쓰는 과정 설명

서버에서 HTML을 가져오는 방식에 대한 설명과 기존 JSON 방식과의 차이점

폴링 기능을 이용하여 몇 초마다 서버에 요청을 보내는 방법 설명

hx-target을 이용하여 서버에서 가져온 HTML을 특정 위치에 삽입하는 방법 설명

a 태그나 폼 태그 사용 시 새로고침 방지하는 방법(hx-boost 속성)

부드러운 페이지 전환 구현 방법 설명

서버 센트 이벤트나 웹소켓 연결, 로딩 중 UI 표시 등 자바스크립트 없이 간편하게 구현 가능

HTMX의 단점 및 적용 시 고려 사항

서버와 데이터를 자주 주고받지 않으면 불필요한 라이브러리일 수 있음

HTML 애니메이션 구현에는 적합하지 않을 수 있음

기존 서버 API를 HTML 전송 방식으로 변경해야 함

서버사이드 렌더링을 하는 프로젝트에 적합하며, 외부 서버 데이터 활용에는 효과적이지 않음

법전 검색 웹사이트에서 리액트 대신 HTMX를 사용하여 성능 개선 및 코드 간소화 사례 소개

리액트 대안으로 부드러운 SPA 사이트 구현 가능

서버사이드 렌더링 프로젝트나 새로운 개인 프로젝트에 적용을 고려해 볼 만 함