{"id":22531309,"url":"https://github.com/hobom-s/hb-html-parser","last_synced_at":"2026-04-18T15:33:01.143Z","repository":{"id":212293833,"uuid":"681066276","full_name":"HoBom-s/hb-html-parser","owner":"HoBom-s","description":"HoBom HTML Framework","archived":false,"fork":false,"pushed_at":"2023-12-15T02:54:01.000Z","size":63,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-02T06:13:15.564Z","etag":null,"topics":["babel","css3","html5","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HoBom-s.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-08-21T07:30:10.000Z","updated_at":"2024-02-07T06:48:40.000Z","dependencies_parsed_at":"2023-12-15T03:45:49.569Z","dependency_job_id":"65e1813c-5c62-49ff-88de-bc3028c7278b","html_url":"https://github.com/HoBom-s/hb-html-parser","commit_stats":null,"previous_names":["hobom-s/hb-html-parser"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoBom-s%2Fhb-html-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoBom-s%2Fhb-html-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoBom-s%2Fhb-html-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoBom-s%2Fhb-html-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HoBom-s","download_url":"https://codeload.github.com/HoBom-s/hb-html-parser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245972916,"owners_count":20702745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["babel","css3","html5","javascript"],"created_at":"2024-12-07T08:07:01.130Z","updated_at":"2026-04-18T15:33:01.101Z","avatar_url":"https://github.com/HoBom-s.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## HoBom FrontEnd Library\n\n\u003e jQuery 라이브러리 중에서 자주 사용하는 Methods만 모아서 JavaScript로 구현\n\u003e\n\u003e 초기 셋팅 필요 없이 빠르게 HTML 및 JavaScript를 작성할 수 있음\n\u003e\n\u003e (물론 약간의 초기 셋팅이 필요하긴 하지만...)\n\n\u003cbr /\u003e\n\n사용 방법이 어렵지 않기 때문에 **templates**폴더의 **index.html** 예시를 본다면 쉽게 사용할 수 있을 것이라고 예상.\n\n기본적인 템플릿은 **templates** 폴더의 **index.html** 확인\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n### 설명\n\n\u003e HoBom HTML Parser는 HTML의 파일을 Parsing하여 JavaScript Class를 생성해 줌\n\u003e\n\u003e Parsing된 JavaScript Class로 DOMElement를 제어할 수 있음\n\u003e\n\u003e 즉 하나의 HTML파일에 JavaScript 파일 하나가 매칭\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n## HoBom HTML Parser V2\n\n큰 규모의 Project에 적합한 Framework는 결코 아님. 주로 작은 규모의 Project에 사용하도록 함.\n\n순수 JavaScript로 작성됐기 때문에 속도도 굉장함.\n\nFramework라고 이름을 지은 만큼 명확한 규칙이 있음. 아마 이 부분이 사용하는 데 있어 처음이자 마지막 **러닝커브**일 것 같음.\n\n\u003e V1의 기능을 기반으로 Class 기반 HTML Template Control을 목적으로 했음\n\u003e\n\u003e 정해진 규칙대로 HTML을 작성하면 HoBom HTML Parser가 HTML의 내용을 Parsing을 진행한 후\n\u003e\n\u003e **JavaScript Class Template**을 작성해 줌\n\u003e\n\u003e 굳이 HTML의 내용을 보지 않고 Class 안에서 HTML을 Control하는 것이 주요 목적\n\n\u003cbr /\u003e\n\n### 사용 방법\n\n```\n1. HTML을 아래의 규칙에 맞춰 작성후 [npm start]\n\n2. templates 밑에 class 디렉토리에 생성된 파일 확인\n\n3. main.js에서 생성된 class를 인스턴스화\n  - new FormGroup();\n```\n\n### 1. HTML\n\n아래의 규칙에 따라서 HTML을 작성하도록 함\n\n-   **templates** 디렉토리에서 HTML 파일 작성\n    -   id=\"root\" 이 기준\n    -   각각의 data-template-name 은 고유해야 함\n-   data-template\n    -   Template의 시작 지점\n    -   TEMPLATE은 반드시 TEMPLATE 이어야 함 (data-template=\"TEMPLATE\")\n-   data-group\n    -   data-template 밑에 Group\n    -   GROUP은 반드시 GROUP이어야 함 (data-group=\"GROUP\")\n-   data-list\n    -   data-group 밑에 List\n    -   LIST는 반드시 LIST이어야 함 (data-list=\"LIST\")\n-   data-item\n\n    -   data-list 밑에 Item\n    -   ITEM은 반드시 ITEM이어야 함 (data-item=\"ITEM\")\n\n사용 예시는 아래와 같음.\n\n```html\n\u003cdiv id=\"root\"\u003e\n    \u003cdiv data-template=\"TEMPLATE\" data-template-name=\"FormTemplate\"\u003e\n        \u003cform id=\"form-group\" data-group=\"GROUP\" data-template-name=\"FormGroup\"\u003e\n            \u003cdiv data-list=\"LIST\" data-template-name=\"InputList\"\u003e\n                \u003cinput\n                    type=\"text\"\n                    name=\"username\"\n                    data-item=\"ITEM\"\n                    data-template-name=\"InputUserNameItem\"\n                /\u003e\n                \u003cinput\n                    type=\"password\"\n                    name=\"password\"\n                    data-item=\"ITEM\"\n                    data-template-name=\"InputUserPasswordItem\"\n                /\u003e\n            \u003c/div\u003e\n        \u003c/form\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n### 2. JavaScript\n\n정해진 곳에서 본인이 원하는 기능을 넣으면 됨. class가 생성됐을텐데 원하는 class의 constructor **[생성자]** 에서 기능을 작성하면 됨.\n\n예를 들어서 input의 change 이벤트를 바인딩 하고 싶다면 아래와 같이 작성.\n\n```js\nexport class InputUserNameItemParser extends HoBomHTMLParserBase {\n    constructor() {\n        super();\n\n        this.templateId = \"ITEM\";\n        this.templateName = \"InputUserNameItem\";\n        this.templateNode = this.matchNode(\"InputUserNameItem\");\n\n        // Change Event\n        this.templateNode.on(\"change\", (e) =\u003e {\n            const { value } = e.target;\n\n            console.log(value);\n        });\n    }\n}\n```\n\n**V1**의 기능은 HoBomHTMLParserBase에 정의가 돼 있으므로 적절한 시기에 불러와서 사용하면 됨.\n\n위의 예시에서 덧붙이자면,,,\n\n```js\nexport class InputUserNameItemParser extends HoBomHTMLParserBase {\n    constructor() {\n        super();\n\n        this.templateId = \"ITEM\";\n        this.templateName = \"InputUserNameItem\";\n        this.templateNode = this.matchNode(\"InputUserNameItem\");\n\n        this.$.transport(\"/api/url\", {\n            methods: \"GET\",\n            success: function (data) {\n                // ...success\n            },\n            error: function (error) {\n                // ...fail\n            },\n        });\n    }\n}\n```\n\n\u003cbr /\u003e\n\n### 3. Template Initialize\n\nclass 파일이 생성된 것을 확인한 후 templates 디렉토리의 main.js에 **TemplateParser** 초기화 작업 수행.\n\n이후 class 디렉토리의 **TemplateParser** 에서 initialize 수행.\n\n```js\n// main.js\nimport { FormTemplateParser } from \"./class/FormTemplate.js\";\n\nnew FormTemplateParser();\n\n// FormTemplate.js\nexport class FormTemplateParser extends HoBomHTMLParserBase {\n    constructor() {\n        super();\n\n        this.templateId = \"TEMPLATE\";\n        this.templateName = \"FormTemplate\";\n        this.templateNode = this.matchNode(\"FormTemplate\");\n\n        this.initialize([\n            FormGroupParser,\n            InputListParser,\n            InputUserNameItemParser,\n            InputUserPasswordItemParser,\n        ]);\n    }\n}\n```\n\n\u003cbr /\u003e\n\n---\n\n## HoBom HTML Parser V1\n\n### 1. HTMLElement Selector\n\n```javascript\n\u003cdiv class=\"temp\"\u003e\u003c/div\u003e\n\u003cdiv id=\"temp2\"\u003e\u003c/div\u003e\n\n$(\".temp\");\n$(\"#temp2\");\n```\n\n### 2. HTMLElement Event Binding\n\n```javascript\n\u003cbutton class=\"temp-btn\"\u003ebutton\u003c/button\u003e;\n\n$(\".temp-btn\").on(\"click\", () =\u003e {\n    alert(\"hi\");\n});\n```\n\n### 3. HTMLElement Create\n\n2가지 방법이 있음\n\n1.\n\n```js\n$.crate(\"div\");\n```\n\n2.\n\n```js\nconst divElem = $.create(\"div\");\n\n$.createElementFromString(divElem, `\u003cinput /\u003e`);\n```\n\n### 4. API 통신\n\n[DEPRECATED]\njQuery의 **ajax**처럼 구현 했음. 그러나 기존의 jQuery의 경우 굳이 사용하지 않는 불필요한 Option이 너무 많았기 때문에 필요한 것만 경량화 하여 구현.\n\n지원되지 않는 브라우저를 고려하여 **XMLHttpRequest**를 사용하여 구현 했음.\n\n[NEW]\n**axios** 모듈처럼 활용 가능.\n\n```javascript\n// transport Method 활용\n// [deprecated]\n// $.transport(\"https://fakestoreapi.com/products\", {\n//   methods: \"GET\",\n//   success: function (data) {\n//     const elem = $.create(\"div\");\n//     data.forEach((v) =\u003e {\n//       const elem = $.create(\"div\");\n//       $.createElementFromString(elem, `\u003cspan\u003e${v.title}\u003c/span\u003e`);\n//       $(\".root\").append(elem);\n//     });\n//   },\n//   error: function (error) {\n//     console.log(error);\n//   },\n// });\n\nconst { get } = $.http(\n    \"/api/baseUrl\",\n    {\n        \"Content-Type\": \"application/json\",\n        Authorization: \"Bearer [TOKEN]\",\n    },\n    3000,\n);\n\nget(\"/url\").then((data) =\u003e console.log(data));\n```\n\n### 5. Function Util\n\nData type이 Object, Array상관 없이 for 반복문 지원.\n\n```javascript\n// Like _.each, _.map ...\n\n// Array\n$.utils.each([1, 2, 3, 4], (item, idx) =\u003e console.log(item, idx));\n\n// Object\nconst obj = {\n    A: \"a\",\n    B: \"b\",\n};\n$.utils.each(obj, (key, value) =\u003e console.log(key, value));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhobom-s%2Fhb-html-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhobom-s%2Fhb-html-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhobom-s%2Fhb-html-parser/lists"}