▲

GN⁺: HN 소개: 브라우저에서 100% 구현한 HTMX Playground

 (lassebomh.github.io)
6P by neo 6달전 | favorite | 댓글 1개

HTMX Playground

  • HTMX Playground는 HTMX를 사용하여 간단한 코드 샌드박스 환경에서 놀아볼 수 있는 도구임.
  • 별도의 설정 없이 바로 사용 가능하며, 원래 htmx.org 예제에서 가져온 예시들을 확인할 수 있음.
  • 브라우저 내에서 백엔드와 유사한 환경에서 코드를 작성할 수 있으며, server.js 내에서 엔드포인트를 정의하고 자체 템플릿을 렌더링할 수 있음.
  • HTMX에서 나가는 요청을 가로채는 모의 서버를 실행하며, Django를 사용하는 사람들에게 친숙한 요청 처리 및 템플릿 엔진을 제공함.
  • 이 프로젝트는 HTMX에만 국한되지 않으므로, 다른 라이브러리들도 자유롭게 시도해볼 수 있음.

저장 및 공유

  • 오른쪽 상단의 "Copy as JSON" 버튼을 눌러 JSON 형식으로 복사할 수 있음.
  • 복사한 내용을 Gist에 업로드하고 "Load Playground"에 raw URL을 입력하면 해당 페이지의 URL이 업데이트되어 공유할 수 있음.
  • 코드는 GitHub에서도 사용 가능함.

주의사항

  • 페이지 내비게이션 기능이 없음.
  • 모바일 지원이 제한적임.
  • server.js는 상태를 가질 수 있지만, on.get("/") 뷰에서 상태를 업데이트하면 초기 페이지 로드 시 별도의 iframe을 통해 검색되기 때문에 상태 업데이트가 손실될 수 있음.

사용된 라이브러리

  • Svelte
  • Ace (코드 에디터)
  • PollyJS (모의 서버)
  • Nunjucks (템플릿 엔진)

GN⁺의 의견

  • HTMX Playground는 웹 개발자들에게 HTMX를 사용하여 인터랙티브 웹 애플리케이션을 빠르게 프로토타이핑할 수 있는 유용한 도구임.
  • Django와 같은 백엔드 프레임워크에 익숙한 개발자들이 쉽게 접근할 수 있는 환경을 제공함으로써, 프론트엔드와 백엔드 개발 경험을 통합하는 데 도움을 줌.
  • 이 도구는 코드를 쉽게 저장하고 공유할 수 있는 기능을 제공하여, 협업이나 교육 목적으로도 매우 유용할 수 있음.
▲
neo 6달전  [-]
Hacker News 의견

  • htmx 창작자로부터의 감사 인사

    • htmx 창작자: htmx를 만든 창작자로부터 감사의 말이 전해짐. 자신의 프로젝트에 대한 관심과 사용에 대해 매우 고무적임을 표현.

  • htmx 사용에 대한 우려와 질문

    • 개발자 풀 우려: 한 사용자가 htmx를 사용하는 것을 고려했으나, 개발자 풀이 작아 개발자 채용에 어려움을 느낌. 전용 프레임워크에 익숙하고, 전문적인 프론트엔드 개발자를 채용하는 것이 전문적인 풀스택 개발자를 찾는 것보다 쉬웠던 경험을 공유. 복잡한 코드를 다루는 것을 개발자들이 꺼려하고 백엔드 개발자가 병목 지점이 되는 것을 원치 않음. htmx가 이러한 문제를 인식하고 있는지, 그리고 이를 어떻게 해결하려고 하는지 질문.

  • htmx와 모바일 앱 지원에 대한 고민

    • 모바일 앱 지원: htmx의 개념을 좋아하고 관련 책을 읽기 시작했지만, 모바일 앱 지원이 필요할 때 프론트엔드와 백엔드를 대대적으로 재작성해야 한다는 점을 상기하고 고민. hyperview.org에 대해 알고 있으나, 관심 있는 사용 사례에는 react-native 앱이 적합하지 않음을 언급.

  • 에디터 선택과 오류 출력에 대한 의견

    • 에디터 및 오류 출력: 한 사용자가 모바일 지원이 제한적이라고 지적하며, Ace Editor 대신 Monaco Editor를 사용해야 한다고 주장. 그러나 Monaco가 모바일에서 의도적으로 작동하지 않아 Ace를 사용한다고 설명. GitHub 이슈 링크를 통해 이를 뒷받침.

  • htmx와 Django를 함께 사용한 경험 공유

    • htmx와 Django 사용: 사용자가 maplibre, Django, htmx를 함께 사용하고 있으며, 다른 사람들과 공유하기 위해 예제를 올릴 계획을 밝힘.

  • htmx 사용 경험과 피드백

    • htmx 사용 및 피드백: htmx를 업무에 사용했으며 잘 작동한다고 평가. 앞으로도 사용할 계획이지만, PHP 기반 버전을 만들 수도 있음. JSON을 URL 로드 필드에 붙여넣을 때 작업이 몇 번 손실되었고, 네트워크 요청 브라우저를 정리할 수 없는 문제(기능 요청)에 대한 경험을 공유.

  • 기술 지원에 대한 질문

    • ActiveX 지원 여부: 한 사용자가 htmx가 ActiveX를 지원하는지에 대해 질문.

  • 개발 도구 선택에 대한 풍자적인 댓글

    • Svelte 사용: htmx가 Svelte로 만들어졌는지 묻는 사용자. MPA(Multi-Page Application) 순수주의자들이 어디 있는지, 그들의 반응이 궁금하다는 풍자적인 댓글.

  • 오프라인 앱 개발에 대한 호기심

    • 오프라인 앱 개발: htmx와 HTML을 사용한 요청-응답을 통해 오프라인 앱을 만들고, 서비스 워커 내에 가상 서버를 정의하는 사람이 있는지 궁금해하는 사용자.

  • 웹사이트 설명의 오타 지적

    • 오타 지적: 웹사이트 메인 페이지의 설명에 오타가 있다고 지적하는 사용자. "intersepts"를 "intercepts"로 바로잡아야 한다고 언급.
답변달기