{"id":24102071,"url":"https://github.com/in-ch/inchtmx","last_synced_at":"2026-05-04T17:35:58.602Z","repository":{"id":208914998,"uuid":"722781483","full_name":"in-ch/inchtmx","owner":"in-ch","description":"\u003c/\u003e inchTMX - high power tools for HTML  Clone coding","archived":false,"fork":false,"pushed_at":"2024-01-09T13:58:51.000Z","size":81,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-15T01:34:17.226Z","etag":null,"topics":["ajax","html","html5","htmx","javascript","typescript","xmlhttprequest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/in-ch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-24T00:02:29.000Z","updated_at":"2023-12-02T06:33:14.000Z","dependencies_parsed_at":"2024-01-09T14:53:24.082Z","dependency_job_id":null,"html_url":"https://github.com/in-ch/inchtmx","commit_stats":null,"previous_names":["in-ch/htmx-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/in-ch/inchtmx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Finchtmx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Finchtmx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Finchtmx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Finchtmx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/in-ch","download_url":"https://codeload.github.com/in-ch/inchtmx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/in-ch%2Finchtmx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32618151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","html","html5","htmx","javascript","typescript","xmlhttprequest"],"created_at":"2025-01-10T17:35:12.591Z","updated_at":"2026-05-04T17:35:58.584Z","avatar_url":"https://github.com/in-ch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# README 겸 commit 상세 changelog\n\n### htmx 초기 세팅(1)\n\n- commit: bef4e112882abac9e37570c16193a7e540b3df37\n\n주어진 코드는 IIFE (Immediately Invoked Function Expression) 패턴을 사용하여 정의되어 있다.\nIIFE는 함수를 정의하고 즉시 호출하는 패턴으로, 스크립트가 로드되자마자 실행.\n코드의 마지막 부분에서는 return { version: \"0.0.1\" }을 통해 INCH 객체를 반환\n\n따라서 해당 스크립트를 로드하면 IIFE가 즉시 실행되어 INCH 객체를 생성하고 반환한다. 그리고 INCH 객체가 반환되어 INCH.version을 통해 해당 버전을 확인할 수 있다.\n\n실행 순서:\n\n스크립트가 로드되면 IIFE가 실행.\n\u003ccode\u003eprocessElement\u003c/code\u003e 함수는 \u003ccode\u003edocument.body\u003c/code\u003e를 시작으로 DOM의 모든 자식 요소를 검사하며 \u003ccode\u003ehx-get\u003c/code\u003e 속성을 가진 요소에 대해 이벤트 리스너를 등록한다.\n\u003ccode\u003eready\u003c/code\u003e 함수를 사용하여 DOM이 완전히 로드될 때까지 기다린 후, \u003ccode\u003eprocessElement\u003c/code\u003e 함수가 실행\nINCH 객체가 반환되어 전역 변수 INCH에 할당\n결과적으로 스크립트가 로드되면 IIFE가 즉시 실행되고, \u003ccode\u003eprocessElement\u003c/code\u003e 함수가 DOM을 탐색하여 이벤트 리스너를 등록하게 된다. 이후에는 사용자의 상호작용에 따라 해당 이벤트 리스너가 호출되어 API 요청이 발생할 것이다.\n\n\u003chr /\u003e\n\n### htmx 초기 세팅(2)\n\n- commit: 71cfdaa8ef444cda42ec57f517c8612e39fcece3\n\n1. \u003ccode\u003ehx-target\u003c/code\u003e이 추가되었다.\n\n2. \u003ccode\u003ehx-swap-style\u003c/code\u003e이 추가되었다.\n   현재는 outerHTML, append만 지원하는 거 같다.\n\n3. 현재는 \u003ccode\u003ehx-get\u003c/code\u003e 기능만 있어 get 메소드만 지원하나\n   추후 다른 메소드까지 지원할 수 있도록 하려는 것 같다.\n\n\u003chr /\u003e\n\n### htmx 초기 세팅(3)\n\n- commit: f0a199b4a6601d22766a799507ceaa0f034572c5\n\n1. \u003ccode\u003ehx-swap-style\u003c/code\u003e의 속성 값으로 prepend가 추가되었다.\n2. \u003ccode\u003emakeNode\u003c/code\u003e의 함수명이 \u003ccode\u003emakeFragment\u003c/code\u003e로 변경되었다.\n   \u003cdetails\u003e\n      \u003csummary\u003enode와 fragment의 차이점\u003c/summary\u003e\n      - node\n         DOM에서 모든 노드의 기본 인터페이스를 나타낸다. 단순한 Text도 하나의 node이다.\n         `\u003cp\u003e이것은 \u003cstrong\u003e텍스트\u003c/strong\u003e입니다.\u003c/p\u003e`에서 `텍스트`,`입니다.`가 Text 노드이다.\n         즉, 좀 더 포괄적인 의미가 된다.\n      - fragment\n         fragment는 HTMLElement의 집합이다.\n\n   즉, 해당 함수명을 좀 더 명시적으로 fragment를 만든다는 의미를 내포하기 위해 변경한 것이다.\n   \u003c/details\u003e\n\n3. 204 status code는 no content이다. api response가 성공을 해도 204는 swap이 일어나지 않도록 제외시켰는데, 아마 컨텐츠가 없는데 스왑이 일어나니깐 버그가 발생해서 추가한 것 같다.\n\n\u003chr /\u003e\n\n### htmx 초기 세팅(4)\n\n- commit: 897f5134aaaaf6e960060252e540cc703df020e0\n\n1. 드디어 \u003ccode\u003ehx-swap-style\u003c/code\u003e이 \u003ccode\u003ehx-swap\u003c/code\u003e으로 변경됐다.\n2. click 이벤트 리스너에 이벤트 버블링이 발생했던 거 같다. \u003ccode\u003ee.stopPropagation()\u003c/code\u003e 함수가 추가됐다.\n3. 테스트를 할 수 있는 index.html이 추가돼었다.\n4. \u003ccode\u003egetAttribute\u003c/code\u003e 함수가 추가돼었다. data- 접두어에 대응하기 위해 추가되었다.\n\n### htmx 초기 세팅(5)\n\n- commit: 6f86acdc762ecaf5fa4011c4f9523d320f819430\n\n1. \u003ccode\u003egetAttribute\u003c/code\u003e의 이름이 \u003ccode\u003egetAttributeValue\u003c/code\u003e 함수로 이름이 바뀌었다.\n2. 기존 click 트리거만 지원하는 거에서 change, submit 등등 다양한 트리거를 지원하게끔 기능이 추가되었다.\n3. trigger의 load 기능이 추가되었다. \n4. 변수 선언 방식이 let에서 var로 변경되었다. -\u003e es6를 지원하지 않는 환경에서만 지원되도록 하기 위함인 것 같다. \n5. [classes-tool](https://htmx.org/extensions/class-tools/) 이 기능이 추가되었다. hx-add-class라는 속성과 hx-remove-class(나중에 약어로 classes로 변경되는 것 같다.)을 통해서 클래스를 추가하거나 제거할 수 있도록 한다.\n\n### htmx 초기 세팅(6)\n\n- commit: 499747ef8c36faa1091323c4587eec2dbb55303e\n\n1. header를 지원하기 위한 기능들이 추가되었다. -\u003e 추후에 삭제된다.\n2. history 기능이 추가되었다. -\u003e 추후에 삭제된다.\n3. \u003ccode\u003eswapResponse\u003c/code\u003e에 중복코드가 많아 \u003ccode\u003eprocessResponseNodes\u003c/code\u003e를 추가\n\n### htmx 초기 세팅(7)\n\n- commit: 830c606fee29e9c900c7561e4cd07d2b532b2d23\n\n1. \u003ccode\u003ehx-trigger\u003c/code\u003e의 \u003ccode\u003eevery\u003c/code\u003e 기능이 추가되었고 \n   이를 지원하기 위해 \u003ccode\u003eprocessPolling\u003c/code\u003e 함수가 추가되었다. 재귀식으로 지속적으로 호출한다.\n2. \u003ccode\u003ehx-indicator\u003c/code\u003e 기능이 추가되었다.\n3. 다양한 get, post, put 등 등 method 등이 지원하도록 기능이 추가되었다.\n\n### htmx 초기 세팅(8)\n\n- commit: 578e8aaf3ab4eec927ba9ee872aa18a5e528f58a\n\n1. \u003ccode\u003ehx-include\u003c/code\u003e가 추가됐다. [hx-include 문서](https://htmx.org/attributes/hx-include/)\n2. \u003ccode\u003ehx-data-internal\u003c/code\u003e가 추가되지만 추후에 삭제되는 듯 하다.\n\n### htmx 초기 세팅(9) - ic-swap-direct, swap style merge 추가\n\n- commit: 7291039584f354d7a5500631ceeefe7ba6d7a27b\n\n1. \u003ccode\u003eic-swap-direct\u003c/code\u003e가 추가되었다. 원래 swap을 할 때 \u003ccode\u003eprocessElement\u003c/code\u003e를 거치게 되는데 이 옵션이 있다면 바로 swap을 해버린다.\n2. \u003ccode\u003eswap\u003c/code\u003e 스타일에 \u003ccode\u003emerge\u003c/code\u003e가 추가되었다.\n\n### htmx 초기 세팅 (10) - hx-boost, hx-select, hx-delay 속성 추가\n\n- commit: 8f8dec9e3b0a3d9d59e6b017b2edc5e73b846de8\n\n1. `hx-boost` 속성이 추가되었다.\n2. `processElement`가 `processNode`로 이름이 변경되었다. \n3. `hx-select` 속성이 추가되었다.\n4. `hx-delay` 속성이 추가되었다.\n\n### htmx 초기 세팅 (11) - hx-trigger-once, hx-trigger-changed-only, hx-trigger, hx-reveal 속성 추가\n\n- commit: 440dbc14389c6725a9a45ac51e1c68d02695afff\n\n1. `hx-trigger-once` \u0026 `hx-trigger-changed-only` 속성 추가 \n   추후에 [trigger 문서](https://htmx.org/attributes/hx-trigger/)로 미뤄보았을 때 전부 `hx-trigger`로 통합되는 듯 하다.\n2. `hx-reveal` 속성이 추가됐는데 이건 요소가 사용자 화면에 등장했을 때만 ajax 요청을 날릴 수 있도록 하는 속성이다.\n\n### htmx 초기 세팅 (12) - sse 기능 추가\n\n- commit: \n\n1. sse 기능이 추가되었다.\n   SSE는 웹소켓과 달리, Client가 Server로부터 데이터만 받을 수 있는 방식\n\n### v0.0.1 릴리즈 \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fin-ch%2Finchtmx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fin-ch%2Finchtmx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fin-ch%2Finchtmx/lists"}