{"id":245,"date":"2026-06-26T13:33:53","date_gmt":"2026-06-26T13:33:53","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=245"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"class","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=245","title":{"rendered":"class"},"content":{"rendered":"<h3>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud074\ub798\uc2a4(JavaScript Class)<\/h3>\n<blockquote>\n<p><strong>Info<\/strong>: \ud83d\udcc1 \uc644\uc131\ud30c\uc77c<br \/>\n<a href=\"https:\/\/jsfiddle.net\/qwerew0\/qfezhc0g\/11\/\">https:\/\/jsfiddle.net\/qwerew0\/qfezhc0g\/11\/<\/a><\/p>\n<\/blockquote>\n<hr>\n<h2>1. \uac1c\uc694<\/h2>\n<ul>\n<li><strong>class ? \uac1d\uccb4 \ud329\ud1a0\ub9ac(\uacf5\uc7a5)<\/strong><br \/>\n<strong>Class\ub294 \uac1d\uccb4\uc758 \ubaa8\uc591\uacfc \ub3d9\uc791\uc5d0 \ub300\ud574 \ubbf8\ub9ac \uc815\uc758\ud574 \ub193\uc740 \ud2c0<br \/>\n\ud074\ub798\uc2a4\ub294 \uac1d\uccb4\uc758 \uae30\ubcf8\uac12(\uc18d\uc131)\uc744 \uc815\ud574\ub193\uace0  \uba54\uc18c\ub4dc\ub97c \uc5ec\ub7ec\ubc88 \uc815\uc758\ud558\uae30 \uc704\ud574\uc500<\/strong><\/li>\n<\/ul>\n<p><a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/JavaScript\/Reference\/Classes\">https:\/\/developer.mozilla.org\/ko\/docs\/Web\/JavaScript\/Reference\/Classes<\/a><\/p>\n<h4>\ud074\ub798\uc2a4 \uc815\uc758\ud558\uae30<\/h4>\n<p>\ud074\ub798\uc2a4\ub294 <code>class<\/code> \ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc815\uc758\ub429\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-text\">class ClassName {\n  \/\/ \ud074\ub798\uc2a4 \ub0b4\uc6a9\n}\n<\/code><\/pre>\n<h4>\ud074\ub798\uc2a4 \uc0dd\uc131\uc790<\/h4>\n<p>\ud074\ub798\uc2a4\ub294 \uc0dd\uc131\uc790\ub97c \uac00\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0dd\uc131\uc790\ub294 \ud074\ub798\uc2a4\uc758 \uac1d\uccb4\ub97c \ub9cc\ub4e4 \ub54c \ud638\ucd9c\ub418\uba70 \uac1d\uccb4\uc758 \ucd08\uae30 \uc0c1\ud0dc\ub97c \uc124\uc815\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-text\">class ClassName {\n  constructor() {\n    \/\/ \uc0dd\uc131\uc790 \ub0b4\uc6a9\n  }\n}\n<\/code><\/pre>\n<p><Accordion title=\"\uc0dd\uc131\uc790\ud568\uc218\"><br \/>\n\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud074\ub798\uc2a4\uc5d0\uc11c constructor(\uc0dd\uc131\uc790)\ub294 \ud074\ub798\uc2a4\ub85c\ubd80\ud130 \uac1d\uccb4\ub97c \uc0dd\uc131\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \ud2b9\ubcc4\ud55c \uba54\uc11c\ub4dc\uc785\ub2c8\ub2e4. \ud074\ub798\uc2a4\ub97c \uc778\uc2a4\ud134\uc2a4\ud654(\uac1d\uccb4\ub97c \uc0dd\uc131)\ud560 \ub54c \uc774 \uba54\uc11c\ub4dc\uac00 \uc790\ub3d9\uc73c\ub85c \uc2e4\ud589\ub418\uba70, \ud574\ub2f9 \uac1d\uccb4\uc758 \ucd08\uae30\ud654\ub97c \ub2f4\ub2f9\ud569\ub2c8\ub2e4. constructor \ub0b4\ubd80\uc5d0\ub294 \uac1d\uccb4\ub97c \ucd08\uae30\ud654\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br \/>\n\uc0dd\uc131\uc790 \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc5ed\ud560\uc744 \uc218\ud589\ud569\ub2c8\ub2e4:<br \/>\n1. \uac1d\uccb4\uc758 \ud504\ub85c\ud37c\ud2f0 \ucd08\uae30\ud654: constructor \ub0b4\ubd80\uc5d0 \uc788\ub294 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac1d\uccb4\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \ucd08\uae30\ud654\ud569\ub2c8\ub2e4. \uac1d\uccb4\uc758 \uc0c1\ud0dc\uc640 \uc18d\uc131\uc744 \uc815\uc758\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<br \/>\n1. \uc778\uc790 \uc804\ub2ec: \ud074\ub798\uc2a4\ub85c\ubd80\ud130 \uac1d\uccb4\ub97c \uc0dd\uc131\ud560 \ub54c, \uc0dd\uc131\uc790 \ud568\uc218\uc758 \ub9e4\uac1c\ubcc0\uc218\ub97c \ud1b5\ud574 \uc678\ubd80\uc5d0\uc11c \uc804\ub2ec\ub41c \uc778\uc790\ub4e4\uc744 \uac1d\uccb4 \ub0b4\ubd80\ub85c \ubc1b\uc544\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud65c\uc6a9\ud558\uc5ec \uac1d\uccb4\ub97c \uac1c\ubcc4\uc801\uc73c\ub85c \ucd08\uae30\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br \/>\n1. \ubd80\ubaa8 \ud074\ub798\uc2a4\uc758 \uc0dd\uc131\uc790 \ud638\ucd9c: \uc0c1\uc18d\uc744 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0, \ud558\uc704 \ud074\ub798\uc2a4\uc5d0\uc11c constructor\ub97c \uc815\uc758\ud560 \ub54c, <strong>`super()`<\/strong>\ub97c \ud638\ucd9c\ud558\uc5ec \uc0c1\uc704 \ud074\ub798\uc2a4\uc758 \uc0dd\uc131\uc790\ub97c \uc2e4\ud589\uc2dc\ud0b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ud558\uc704 \ud074\ub798\uc2a4\uc5d0\uc11c\ub3c4 \uc0c1\uc704 \ud074\ub798\uc2a4\uc758 \ucd08\uae30\ud654 \ub85c\uc9c1\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br \/>\n<\/Accordion><\/p>\n<h4>\ud074\ub798\uc2a4 \uba54\uc18c\ub4dc<\/h4>\n<p>\ud074\ub798\uc2a4 \ub0b4\uc5d0\uc11c \uba54\uc18c\ub4dc\ub294 \ud568\uc218\uc640 \uac19\uc774 \uc815\uc758\ub429\ub2c8\ub2e4. \uba54\uc18c\ub4dc\ub294 \ud074\ub798\uc2a4\uc758 \uac1d\uccb4\uc5d0\uc11c \ud638\ucd9c\ub429\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-text\">class ClassName {\n  constructor() {\n    \/\/ \uc0dd\uc131\uc790 \ub0b4\uc6a9\n  }\n\n  methodName() {\n    \/\/ \uba54\uc18c\ub4dc \ub0b4\uc6a9\n  }\n}\n<\/code><\/pre>\n<h4>\ud074\ub798\uc2a4 \uc0c1\uc18d<\/h4>\n<p>\ud074\ub798\uc2a4\ub294 \ub2e4\ub978 \ud074\ub798\uc2a4\ub97c \uc0c1\uc18d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0c1\uc18d\uc740 <code>extends<\/code> \ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc815\uc758\ub429\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-text\">class ChildClassName extends ParentClassName {\n  \/\/ \ud074\ub798\uc2a4 \ub0b4\uc6a9\n}\n<\/code><\/pre>\n<p><em>\ucc38\uace0: \uc704\uc758 \ucf54\ub4dc\ub294 ES6\uc5d0\uc11c \ub3c4\uc785\ub41c \uc0c8\ub85c\uc6b4 \uad6c\ubb38\uc785\ub2c8\ub2e4. \ub530\ub77c\uc11c \uad6c\ud615 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \uc791\ub3d9\ud558\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/em><\/p>\n<hr>\n<h2>2. class \uc120\uc5b8<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/01-15.png\" alt=\"\"><\/p>\n<p><strong>\ud074\ub798\uc2a4\ub294 \uc0dd\uc131\uc790\ud568\uc218\uc640 \uba54\uc11c\ub4dc\ub97c \uac16\ub294\ub2e4<\/strong><\/p>\n<ol>\n<li>Dog \ud074\ub798\uc2a4\uc5d0 \uc0dd\uc131\uc790 \ud568\uc218\ub97c \uc120\uc5b8\ud558\uace0 name \uc18d\uc131\uc5d0 \uac12\uc744 \ud560\ub2f9\ud55c\ub2e4.<br \/>\nprintName \ud568\uc218\uc5d0 name \uc744 \ucf58\uc194\ub85c \ucd9c\ub825\ud558\ub294 \ub0b4\uc6a9\uc744 \uc791\uc131\ud55c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/02-10.png\" alt=\"\"><\/p>\n<pre><code class=\"language-javascript\">class Dog{\n\tconstructor(){\n\tthis.name=&quot;mango&quot;\n\t}\n\tprintName(){\n\tconsole.log(this.name);\n\t}\n}\nconst dog= new Dog();\ndog.printName();\n<\/code><\/pre>\n<ol>\n<li>\uc0c1\uc218\uc5d0 new \ud0a4\uc6cc\ub4dc\ub85c \ud074\ub798\uc2a4 \uc778\uc2a4\ud134\uc2a4\ub97c \ud560\ub2f9\ud55c\ub2e4<\/li>\n<li>\uc774\uc81c \uc0c1\uc218 dog \uc740 Dog \uc778\uc2a4\ud134\uc2a4\uc758 \uba54\uc18c\ub4dc\ub97c \uc0ac\uc6a9\ud560\uc218 \uc788\ub2e4<\/li>\n<\/ol>\n<h2>3. class \uc0c1\uc18d<\/h2>\n<pre><code class=\"language-javascript\">class Breed{\n\tconstructor(){\n\tthis.kind=&quot;\ub9d0\ud2f0\uc988&quot;;\n\t}\n\tprintKind(){\n\tconsole.log(this.kind)\n\t}\n}\nclass Dog** extends Breed**{\n\tconstructor(){\n**\tsuper();**\n\tthis.name=&quot;\ub9dd\uace0&quot;\n\t}\n\tprintName(){\n\tconsole.log(this.name);\n\t}\n}\nconst dog= new Dog();\ndog.printName();\ndog.printKind();\n<\/code><\/pre>\n<p>Dog \ub294 Breed \uc758 \uc18d\uc131\uc744 \uc0c1\uc18d\ubc1b\ub294\ub2e4<br \/>\n\uc11c\ube0c\ud074\ub798\uc2a4 Dog \uc5d0\uc11c\ub294 super() \uba54\uc18c\ub4dc\ub97c \ud638\ucd9c\ud574\uc57c \ud55c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud074\ub798\uc2a4(JavaScript Class) Info: \ud83d\udcc1 \uc644\uc131\ud30c\uc77c https:\/\/jsfiddle.net\/qwerew0\/qfezhc0g\/11\/ 1. \uac1c\uc694 class ? \uac1d\uccb4 \ud329\ud1a0\ub9ac(\uacf5\uc7a5) Class\ub294 \uac1d\uccb4\uc758 \ubaa8\uc591\uacfc \ub3d9\uc791\uc5d0 \ub300\ud574 \ubbf8\ub9ac \uc815\uc758\ud574 \ub193\uc740 \ud2c0 \ud074\ub798\uc2a4\ub294 \uac1d\uccb4\uc758 \uae30\ubcf8\uac12(\uc18d\uc131)\uc744 \uc815\ud574\ub193\uace0 \uba54\uc18c\ub4dc\ub97c \uc5ec\ub7ec\ubc88 \uc815\uc758\ud558\uae30 \uc704\ud574\uc500 https:\/\/developer.mozilla.org\/ko\/docs\/Web\/JavaScript\/Reference\/Classes \ud074\ub798\uc2a4 \uc815\uc758\ud558\uae30 \ud074\ub798\uc2a4\ub294 class \ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc815\uc758\ub429\ub2c8\ub2e4. class ClassName { \/\/ \ud074\ub798\uc2a4 \ub0b4\uc6a9 } \ud074\ub798\uc2a4 \uc0dd\uc131\uc790 \ud074\ub798\uc2a4\ub294 \uc0dd\uc131\uc790\ub97c \uac00\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0dd\uc131\uc790\ub294 \ud074\ub798\uc2a4\uc758 \uac1d\uccb4\ub97c &#8230; <a title=\"class\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=245\" aria-label=\"class\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-245","post","type-post","status-publish","format-standard","hentry","category-javascript-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=245"}],"version-history":[{"count":2,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/245\/revisions"}],"predecessor-version":[{"id":2235,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/245\/revisions\/2235"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}