{"id":14323,"date":"2024-01-02T10:02:51","date_gmt":"2024-01-02T01:02:51","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=14323"},"modified":"2024-01-05T22:07:56","modified_gmt":"2024-01-05T13:07:56","slug":"%ea%b0%80%ec%9e%a5-%ed%9a%a8%ec%9c%a8%ec%a0%81%ec%9d%b8%ed%9a%a8%ea%b3%bc%ec%a0%81%ec%9d%b8-%ed%94%84%eb%a1%a0%ed%8a%b8%ec%97%94%eb%93%9c-%ea%b0%9c%eb%b0%9c-%eb%b0%a9%eb%b2%95","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=14323","title":{"rendered":"\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \ubc29\ubc95\uc758 \uc815\uc11d"},"content":{"rendered":"<p>IT \uae30\uc220 \uc911 \uc6f9\uc744 \uc704\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc744 \uc704\ud55c \uae30\uc220\uc740 \uadf8 \ubcc0\ud654\uac00 \ub9e4\uc6b0 \uc2ec\ud558\uace0 \ubcc0\ub355\uc2a4\ub7fd\uc2b5\ub2c8\ub2e4. \ud55c\ub54c jQuery\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc5d0\uc11c \ub9e4\uc6b0 \ud575\uc2ec\uc801\uc778 \uc790\ub9ac\ub97c \ucc28\uc9c0\ud588\ub2e4\uac00 \uc9c0\uae08\uc740 \uacfc\uac70\uc5d0 \ube44\ud574 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\uc73c\uba70 \ud604\uc7ac\ub294 Vue\ub098 React\uc640 \uac19\uc740 \uae30\uc220\uc774 \uadf8 \uc790\ub9ac\ub97c \ucc28\uc9c0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><center><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/jquery.png\" alt=\"\" width=\"200\" \/><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/vuejs.png\" alt=\"\" width=\"200\" \/><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/react.png\" alt=\"\" width=\"200\" \/><\/center><\/p>\n<p>\uc815\uc0c1\uc801\uc73c\ub85c \uc791\ub3d9\ud558\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 \uaf2d \ud544\uc694\ud55c \uae30\uc220\uc740 HTML, CSS, JS(\uc774\ud558 Javascript)\uc785\ub2c8\ub2e4. HTML\uc740 \uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870\ub97c \uc815\uc758\ud558\uace0 CSS\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \uc2dc\uac01\uc801\uc73c\ub85c \uc5b4\ub5bb\uac8c \ubcf4\uc77c\uc9c0\u001d\ub97c \uc815\uc758\ud558\uba70 JS\ub294 \uc815\uc801\uc778 \uc6f9 \ud398\uc774\uc9c0\ub97c \ub3d9\uc801\uc73c\ub85c \ub9cc\ub4dc\ub294 \uc0dd\uba85\ub825\uc744 \ubd80\uc5ec\ud574 \uc90d\ub2c8\ub2e4. \uc774 3\uac00\uc9c0\ub9cc \uc54c\uba74 \uc6f9 \ud398\uc774\uc9c0 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud568\uc5d0\ub3c4 \uc815\uc791 \uc2e4\ubb34\uc5d0\uc11c\ub294 \ub2e4\ub978 \ub300\uc548\uc744 \uace0\ubbfc\ud569\ub2c8\ub2e4. jQuery, Vue, React \ub4f1\uacfc \uac19\uc740 \uac83\ub4e4\uc744 \ub9d0\uc774\uc8e0.<\/p>\n<p>\ubb38\uc81c\ub294 \uc774\ub7f0 \uac83\ub4e4\uc740 \uc6f9 \ud45c\uc900\uc774 \uc544\ub2c8\ubbc0\ub85c \uc790\uc8fc \ubcc0\ud558\uace0 \ubcc0\ub355\uc2a4\ub7fd\uc2b5\ub2c8\ub2e4. \ud2b9\uc815\ud55c \ud68c\uc0ac\ub098 \uac1c\ubc1c\uc790\uc5d0 \uc758\ud574 \ub9cc\ub4e4\uc5b4\uc9c0\ubbc0\ub85c \ud574\ub2f9 \uae30\uc220\uc740 \ub2e4\uc591\ud55c \uc774\uc720\ub85c \uc778\ud574 \uc2dc\uc7a5\uc5d0\uc11c \uc0ac\ub77c\uc9c0\uae30\ub3c4 \ud569\ub2c8\ub2e4. \uc0ac\uc2e4 \ub9e4\uc6b0 \uc720\uba85\ud55c \uc624\ud508\uc18c\uc2a4 \uc911 \ub9ce\uc740 \uac83\ub4e4\uc774 1\uc778 \uac1c\ubc1c\uc790\ub098 \uc18c\uaddc\ubaa8\uc758 \uac1c\ubc1c \uc870\uc9c1\uc5d0 \uc758\ud574 \ub9cc\ub4e4\uc5b4\uc9c0\uace0 \uc720\uc9c0\ub429\ub2c8\ub2e4. \ubb3c\ub860 \uc791\ub2e4\uace0 \ud574\uc11c \ubb38\uc81c\ub77c\u001d\ub294 \uac83\uc740 \uc544\ub2d9\ub2c8\ub2e4. \uc624\ud788\ub824 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc5d0 \uc788\uc5b4\uc11c \uc791\uc740 \uc870\uc9c1\uc740 \ud070 \uc870\uc9c1 \ubcf4\ub2e4 \ud6e8\uc52c \ud6a8\uc728\uc801\uc774\uace0 \ud6a8\uacfc\uc801\uc73c\ub85c \uc791\ub3d9\ud558\uace0 \ub354 \uc801\ud569\ud560 \ub54c\uac00 \ub9ce\uc2b5\ub2c8\ub2e4. \uc791\uace0 \ud06c\uace0\ub294 \ud544\uc694\uc5d0 \uc758\ud574 \uc815\ud574\uc9c0\ub294 \uac83\uc73c\ub85c \uc11c\ub85c \uc7a5\ub2e8\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n<p>jQuery\ub098 Vue, React\uc5d0 \ub300\ud55c \ub2e4\ub978 \uad00\uc810\uc5d0\uc11c\uc758 \ubb38\uc81c\ub294 \uc774\ub7f0 \uae30\uc220\ub4e4\uc740 \uac1c\ubc1c\uc790\uc5d0\uac8c HTML, CSS, JavaScript\uc5d0 \ub300\ud55c \uc120\ud589 \ud559\uc2b5\uc744 \uc694\uad6c\ud558\uba74\uc11c \ub3d9\uc2dc\uc5d0 \ucd94\uac00\uc801\uc778 \uc9c0\uc2dd\uc5d0 \ub300\ud55c \ud559\uc2b5\uc744 \uac15\uc694\ud569\ub2c8\ub2e4. \uc774\ub7f0 \ucd94\uac00\uc801\uc73c\ub85c \uc54c\uc544\uc57c\ud560 \uae30\uc220\uc740 HTML, CSS, JavaScript\uc5d0 \ub300\ud55c \ub0b4\uc6a9\ubcf4\ub2e4 \ud6e8\uc52c \ub354 \ubc29\ub300\ud560 \ub54c\uac00 \ub9ce\uc2b5\ub2c8\ub2e4. \ub610 \uc790\uc8fc \ubcc0\ud558\uace0 \ub9e4\uc6b0 \ub3c5\ucc3d\uc801\uc774\uae30\uae4c\uc9c0 \ud569\ub2c8\ub2e4. \ub610 \uc544\ub2c8\ub2e4 \uc2f6\uc73c\uba74 \uadf8\ub0e5 \ud3d0\uae30\ub418\uace0 \ub2e4\ub978 \ub300\uc548\uc774 \ub098\uc635\ub2c8\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \uae30\uc220\uc758 \ud750\ub984\uc740 \uacfc\uac70\ubd80\ud130 \uc9c0\uae08\uae4c\uc9c0 \ub298 \uc774\ub7f0 \ud750\ub984\uc758 \ubc18\ubcf5\uc785\ub2c8\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub4e4\uc740 \ubd84\uba85 \uc774\ub7ec\ud55c \ubb38\uc81c\uac00 \uc788\uc74c\uc744 \uc54c\uba74\uc11c\ub3c4 \uacb0\uad6d\uc5d0\ub294 \ub300\uc138\uac00 \ub418\ub294 \ud504\ub85c\ud2b8\uc5d4\ub4dc \uae30\uc220\uc744 \uc0ac\uc6a9\ud558\ub370, \uadf8 \uc774\uc720\ub294 \ub9ce\uc740 \uac1c\ubc1c\uc790, \ub9ce\uc740 \uac1c\ubc1c\uc0ac\uc5d0\uc11c \uc0ac\uc6a9\ub418\uace0 \uc788\ub2e4\ub294 \uc774\uc720\uac00 \uac00\uc7a5 \uc808\ub300\uc801\uc785\ub2c8\ub2e4.<\/p>\n<p>\uc800 \uc5ed\uc2dc\ub3c4 \uc81c \uc2a4\uc2a4\ub85c\ub97c \ub2e4\ub3c5 \uac70\ub9ac\uba70 React\ub97c \ud559\uc2b5\ud558\uace0 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc0ac\uc6a9 \ud588\uc2b5\ub2c8\ub2e4. \ud604\uc7ac \uc2dc\uc810\uc5d0\uc11c React\u001d\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \ubd84\uc57c\uc5d0\uc11c \uc810\uc720\uc728 1\uc704\ub77c \uc0ac\uc2e4\uc740 \uc5b4\ub5a4 \ubb38\uc81c\ub97c \ub354 \uc774\uc0c1 \ubb38\uc81c\uac00 \uc544\ub2cc \uac83\uc73c\ub85c \ubc14\uafd4 \ubc84\ub9bd\ub2c8\ub2e4. React\ub294 \ub098\uc058\uc9c0 \uc54a\uc558\uace0 \uc644\uc804\ud788 \uc0c8\ub85c\uc6b4 \ubc29\ubc95\uc73c\ub85c \uc6f9 \ud398\uc774\uc9c0\ub97c \ub9e4\uc6b0 \ud6a8\uacfc\uc801\uc73c\ub85c \uac1c\ubc1c\ud560 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ud504\ub85c\uc81d\ud2b8\ub97c \ub9c8\ubb34\ub9ac\ud558\uace0 \ud68c\uc0c1\ud574 \ubcf4\uba74 \uc6f9\uc758 \uae30\ubcf8 \uae30\uc220\uc740 HTML, CSS, JS\ub9cc\uc73c\ub85c\ub3c4 \ucda9\ubd84\ud788 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud558\ub2e4\ub294 \uac83\uc744 \uae68\ub2eb\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. <\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/html_css_js.png\" alt=\"\" width=\"600\" class=\"aligncenter size-full wp-image-14338\" \/><\/p>\n<p>\uc774 \uae00\uc740 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc744 \uc704\ud574 \uac00\uc7a5 \uae30\ubcf8\uc801\uc774\uba70 \uadfc\ubcf8\uc801\uc778, \ud558\uc9c0\ub9cc \ub9e4\uc6b0 \ud6a8\uacfc\uc801\uc778 \ubc29\ubc95\uc774\ub77c\uace0 \uc0dd\uac01\ub418\ub294 \uac83\ub4e4\uc744 \uc5ec\ub7ec\ubd84\uc5d0\uac8c \uacf5\uc720\ud558\uace0 \ub354 \uac1c\uc120\ud574 \ub098\uac00\uae30 \uc704\ud55c \ubaa9\uc801\uc744 \uac16\uc2b5\ub2c8\ub2e4. \ub300\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\ub3c4 \uc9c4\ud589\ud558\uae30 \uc704\ud574 \uc81c \uacbd\ud5d8\uc5d0 \uae30\ubc18\ud55c \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\uc220\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ucc38\uace0\ub85c\ub294 \uc800\ub294 \uacf5\uac04\uc815\ubcf4\uc640 \uad00\ub828\ub41c \uc2dc\uc2a4\ud15c \uac1c\ubc1c\uc5d0 \ub300\ud55c \ubc31\uc5d4\ub4dc\uc640 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\uc785\ub2c8\ub2e4. \uacf5\uac04\uc815\ubcf4\uc2dc\uc2a4\ud15c\uc5d0 \ub300\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc740 \ub300\ubd80\ubd84 \uc6f9 \uae30\ubc18\uc758 SPA(Single Page Application)\uc73c\ub85c \uadf8 \uaddc\ubaa8\uac00 \uc0c1\ub300\uc801\uc73c\ub85c \ub9e4\uc6b0 \ud07d\ub2c8\ub2e4. \ud68c\uc0ac\uc5d0\uc11c \uc9c0\uc624\uc11c\ube44\uc2a4\uc6f9\uc774\ub77c\ub294 \uc11c\ube44\uc2a4\ub97c \uc81c\uacf5\ud558\uace0 \uc788\ub294\ub370 \uc774 \uc11c\ube44\uc2a4 \uac1c\ubc1c \uc5ed\uc2dc \uc544\ub798\uc758 \uae30\uc220 \ub4f1\uc744 \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n<ul style='padding-left: 4em'>\n<li>HTML, CSS<\/li>\n<li>JS \ub610\ub294 TS(\uc774\ud558 TypeScript)<\/li>\n<li>TS \uc9c0\uc6d0\uacfc \ubc88\ub4e4\ub9c1(Bundling)\uc744 \uc704\ud55c vite<\/li>\n<li>OOP(\uac1d\uccb4\uc9c0\ud5a5 \ud504\ub85c\uadf8\ub798\ubc0d)<\/li>\n<\/ul>\n<p>4\ubc88\uc9f8\uc778 OOP \ud56d\ubaa9\uc740 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc5d0 \ud55c\uc815\ub418\uc9c0 \uc54a\uc740 \uc77c\ubc18\uc801\uc778 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0\uc11c \uc5b8\uae09\ub418\ub294 \uac83\uc73c\ub85c \uc5c4\ubc00\ud788 \ub9d0\ud558\uba74 JS\ub098 TS\uc5d0 \ud3ec\ud568\ub418\ub294 \uac83\uc785\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758 \uaddc\ubaa8\uac00 \ucee4\uc11c \uc791\uc131\ud574\uc57c\ud560 \uc18c\uc2a4 \ucf54\ub4dc\uac00 \ubc29\ub300\ud558\ub2e4\uba74 JS \ub300\uc2e0 TS\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4. TS\ub294 JS\uc758 \ubb38\uc81c\uc810\uc73c\ub85c \uc5b8\uae09\ub418\ub294 \ubd88\uba85\ud655\ud55c \ud0c0\uc785 \uc120\uc5b8\u001d\uc744 \ud574\uacb0\ud558\uace0 \ub354 \ub098\uc740 class \uc791\uc131 \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. OOP\ub97c \uc0ac\uc6a9\ud558\uac8c \ub418\uba74 \ud6e8\uc52c \ud6a8\uacfc\uc801\uc778 \uac1c\ubc1c\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. OOP\ub294 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158(\uc774\ud558 \uc571)\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\ub85c \uac1c\ubc1c\ud558\ub3c4\ub85d \uc720\ub3c4\ud558\uace0 \uac1d\uccb4\uac04\uc758 \uad00\uacc4\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ub9fa\ub3c4\ub85d \ud558\uba70 \uae30\ub2a5 \ud655\uc7a5\uc131\uacfc \ud6a8\uc728\uc801\uc778 \uc720\uc9c0\ubcf4\uc218\ub97c \uac00\ub2a5\ud558\uac8c \ub429\ub2c8\ub2e4. OOP\uac00 \uc0dd\uc18c\ud55c \ubd84\ub4e4\uc774\ub77c\uba74 OOP\ub294 \uc7a0\uc2dc \uc78a\uc73c\uc2dc\uace0 OOP \ub300\uc2e0 JS\ub098 TS\uc758 class \ud0a4\uc6cc\ub4dc\ub85c \uc0dd\uac01\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 OOP\uc5d0 \ub300\ud55c \uae4a\uc774 \uc788\ub294 \ud65c\uc6a9\ubcf4\ub2e4\ub294 class\uc5d0 \ub300\ud55c \uae30\ucd08\uc801\uc778 \uc0ac\uc6a9\uc744 \ud1b5\ud574 \uc2e4\uc2b5\uc744 \uc9c4\ud589\ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/typescript.png\" alt=\"\" width=\"400\" class=\"aligncenter size-full wp-image-14341\" \/><\/p>\n<p>vite\ub294 TypeScript \uc5b8\uc5b4\uc5d0 \ub300\ud55c \uc9c0\uc6d0\uacfc \uc5ec\ub7ec\uac1c\uc758 \uc18c\uc2a4 \ucf54\ub4dc \ud30c\uc77c\uc744 \ud558\ub098\ub85c \ubb36\uc5b4 \uc8fc\ub294 \ubc88\ub4e4\ub9c1 \uae30\ub2a5 \uc81c\uacf5, \uc6f9 \uac1c\ubc1c\uc5d0 \ud544\uc694\ud55c \uc6f9\uc11c\ubc84 \uc81c\uacf5, \ubc30\ud3ec \ub4f1\uacfc \uac19\uc740 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. vite\ub294 React \ub4f1\uacfc \uac19\uc740 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud574\uc11c\ub3c4 \uc0ac\uc6a9\ub418\uae30\ub3c4 \ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/vite.png\" alt=\"\" width=\"500\" class=\"aligncenter size-full wp-image-14346\" \/><\/p>\n<p>\uc55e\uc11c \uc124\uba85\ud55c \ub0b4\uc6a9\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uc124\uba85\ud558\uae30 \uc704\ud574\uc11c \uc2e4\uc81c \uc6f9\uc571\uc744 \ub9cc\ub4e4\uba74\uc11c \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub9cc\ub4e4 \uc6f9\uc571\uc740 Tic-Tac-Toe\uc774\uba70 \uc774\ub97c \uc120\ud0dd\ud55c \uc774\uc720\ub294 \ub9ac\uc5d1\ud2b8 \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c \ub9ac\uc5d1\ud2b8\ub97c \uc124\uba85\ud558\uae30 \uc704\ud55c \uc6f9\uc571\uc73c\ub85c \ubc14\ub85c \uc774 Tic-Tac-Toe\uc774\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. <a href='https:\/\/react.dev\/learn\/tutorial-tic-tac-toe'>\ud574\ub2f9 \uc0ac\uc774\ud2b8<\/a>\ub97c \uc0b4\ud3b4\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/react-tic-tac-toe.png\" alt=\"\" width=\"2412\" height=\"1570\" class=\"aligncenter size-full wp-image-14353\" \/><\/p>\n<p>\uc704\uc758 \ud654\uba74\uc740 react\ub97c \uc774\uc6a9\ud574 \ub9cc\ub4e0 \uc6f9\uc571\uc778\ub370, react\uc5d0 \ub300\ud55c \uc81c\ubc95 \ub9ce\uc740 \ub0b4\uc6a9\uc744 \uae30\ubc18\uc73c\ub85c \uc791\uc131\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 Tic-Tac-Toe \uac8c\uc784\uc758 \uaddc\uce59\uc5d0 \ub300\ud55c \ud50c\ub808\uc774\uac00 \uac00\ub2a5\ud558\uace0 \uac8c\uc784 \uacfc\uc815\uc5d0 \ub300\ud55c \uc774\ub825\uc744 \uad00\ub9ac\ud558\uc5ec \uc6d0\ud558\ub294 \ub2e8\uacc4\ub85c \uac8c\uc784\uc744 \ub418\ub3cc\ub9b4 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc6f9\uc571\uc744 \uc55e\uc11c \uc5b8\uae09\ud588\ub358 HTML\/CSS\uc640 TS\ub97c \uc774\uc6a9\ud574 \ub3d9\uc77c\ud558\uac8c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. TS\uac00 \uc544\ub2cc JS\ub85c \ub9cc\ub4e4\uc218\ub3c4 \uc788\uc9c0\ub9cc \uc2e4\ubb34\uc5d0 \uc801\ud569\ud55c TS\ub97c \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. TS\ub294 \ud0c0\uc785\uc5d0 \ub300\ud55c \uc9c0\uc815\uacfc null \uac1d\uccb4\uc5d0 \ub300\ud55c \uc5c4\uaca9\ud55c \uac80\uc0ac \ub4f1 JS\ubcf4\ub2e4 \ub354 \ub098\uc740 \ucf54\ub4dc \ud655\uc7a5\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\uc801 \ud2b9\uc131\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc6b0\ub9ac\uac00 \ub9cc\ub4e4 \uc774 \uc6f9\uc571\uc758 \ud074\ub798\uc2a4\ub2e4\uc774\uc5b4\uadf8\ub7a8(StarUML\ub85c \uc791\uc131\ud568)\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \ud074\ub798\uc2a4\ub2e4\uc774\uc5b4\uadf8\ub7a8\uc740 UML\uc758 \ud55c \uc885\ub958\ub85c \ud074\ub798\uc2a4 \uac04\uc758 \uad00\uacc4\ub97c \ub9e4\uc6b0 \ud6a8\uacfc\uc801\uc73c\ub85c \uae30\uc220\ud55c \uc124\uacc4\uc11c\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/tic-tac-toe-uml.png\" alt=\"\" width=\"600\" class=\"aligncenter size-full wp-image-14355\" \/><\/p>\n<p>App\uc774\ub77c\ub294 \ud074\ub798\uc2a4\uac00 \uc788\uace0 \uc774 App\uc740 Game\uc774\ub77c\ub294 \ud074\ub798\uc2a4\uc5d0 \ub300\ud55c \uac1d\uccb4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 Game \ud074\ub798\uc2a4\ub294 Board\uc640 History \ud074\ub798\uc2a4\uc758 \uac1d\uccb4\ub97c \ub9f4\ubc84 \ud544\ub4dc\ub85c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 Board\uc640 History \ud074\ub798\uc2a4\uc758 \uac1d\uccb4\ub294  Game \ud074\ub798\uc2a4\uc758 \uac1d\uccb4\ub97c \ucc38\uc870\ud558\uace0 \uc788\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. Game\uc740 Tic-Tac-Toe \uac8c\uc784\uc758 \uc9c4\ud589\uc744 \uad00\ub9ac\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 Board\ub294 3&#215;3\uc758 \uac8c\uc784\ud310\uc744 \uad00\ub9ac\ud558\uba70 History\ub294 \uac8c\uc784 \ud50c\ub808\uc774 \uacfc\uc815\uc5d0 \ub300\ud55c \uc774\ub825\uc744 \uad00\ub9ac\ud574 \uc6d0\ud558\ub294 \uc774\uc804 \uacfc\uc815\uc73c\ub85c \ubcf5\uad6c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ucf54\ub4dc\ub97c \uc785\ub825\ud560 \uac1c\ubc1c\ud234\uc740 VS.Code\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 vite\ub97c \uc124\uce58\ud558\uae30 \uc704\ud574 node.js\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. VS.Code\uc640 node.js\uc5d0 \ub300\ud55c 2\uac1c\uc758 \ud504\ub85c\uadf8\ub7a8\uc774 \uc124\uce58\ub418\uc5c8\ub2e4\uba74 \uc2e4\uc2b5\uc744 \uc9c4\ud589\ud558\ub294\ub370 \ucda9\ubd84\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub97c \ud558\ub098 \ub9cc\ub4e4\uace0 \uc774 \ud3f4\ub354\ub97c VS.Code\uc5d0\uc11c \uc624\ud508\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ud130\ubbf8\ub110\uc744 \uc5f4\uace0 \ub2e4\uc74c\ucc98\ub7fc vite\ub97c \ud1b5\ud574 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/tic-tac-toe-vite.png\" alt=\"\" width=\"1654\" height=\"574\" class=\"aligncenter size-full wp-image-14360\" \/><\/p>\n<p>\uc548\ub0b4\ub41c \ub0b4\uc6a9\ub300\ub85c \ub2e4\uc74c \uba85\ub839\uc744 \uc785\ub825\ud574 \uc644\ub8cc\ud569\ub2c8\ub2e4.<\/p>\n<p><code>npm install<br \/>\nnpm run dev<\/code><\/p>\n<p>\uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c htttp:\/\/localhost\/5173\uc73c\ub85c \uc811\uc18d\ud574 \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uacb0\uacfc\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/vite-first.png\" alt=\"\" width=\"1894\" height=\"1334\" class=\"aligncenter size-full wp-image-14362\" \/><\/p>\n<p>\uc0dd\uc131\ub41c \ud3f4\ub354\uc640 \ud30c\uc77c\uc744 \ubcf4\uba74, \uba3c\uc800 node_modules \ud3f4\ub354\uc5d0\ub294 \uac1c\ubc1c\ud658\uacbd \ub610\ub294 \uac1c\ubc1c\uc5d0 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub4e4\uc774 \uc800\uc7a5\ub429\ub2c8\ub2e4. public \ud3f4\ub354\uc5d0\ub294 \uc774\ubbf8\uc9c0 \ub4f1\uacfc \uac19\uc740 \ubc30\ud3ec\ub420 \ub9ac\uc18c\uc2a4 \ud30c\uc77c\uc774 \uc874\uc7ac\ud558\uace0 src\uc5d0\ub294 \uc2e4\uc81c \uc6b0\ub9ac\uac00 \ucf54\ub529\ud560 \ucf54\ub4dc \ud30c\uc77c\uc774 \uc704\uce58\ud558\uac8c \ub429\ub2c8\ub2e4. src\uc5d0 \uc774\ubbf8 \uba87\uac00\uc9c0 \ud30c\uc77c\uc774 \uc791\uc131\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 index.html\uc740 \uc6f9\uc571\uc774 \uc2e4\ud589\ub420\ub54c \uac00\uc7a5 \uba3c\uc800 \ud45c\uc2dc\ub420 \ud648\ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.<\/p>\n<p>\ubd88\ud544\uc694\ud55c \ub0b4\uc6a9\uc744 \uc815\ub9ac\ud558\uba74, \uba3c\uc800 index.html\uc758 title \ub0b4\uc6a9\uc744 Tic-Tac-Toe\ub85c \ubcc0\uacbd\ud558\uace0 src\/vite.svg \ud30c\uc77c\uc744 \uc0ad\uc81c\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 src \ud3f4\ub354\uc5d0 \uc788\ub294 style.css \ud30c\uc77c\uc740 \ub0b4\uc6a9\uc744 \ubaa8\ub450 \uc9c0\uc6b0\uace0 \ud30c\uc77c\ub9cc \ub0a8\uaca8\ub461\ub2c8\ub2e4. counter.ts\uc640 typescript.svg \ud30c\uc77c\uc744 \uc0ad\uc81c\ud569\ub2c8\ub2e4. main.ts\ub294 \ub2e4\uc74c\ucc98\ub7fc \ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"ts\">\r\nimport '.\/style.css'\r\n<\/pre>\n<p>\uc774\uc81c \uc0c8\ub85c\uc6b4 \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc900\ube44\uac00 \ubaa8\ub450 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc5d0\ub294 \uc55e\uc11c \uc0b4\ud3b4\ubcf8 \ud074\ub798\uc2a4\ub2e4\uc774\uc5b4\uadf8\ub7a8\uc5d0\uc11c \uc5b8\uae09\ub41c \ud074\ub798\uc2a4\ub4e4\uc744 \ucd94\uac00\ud574 \uc6f9\uc571\uc744 \uc644\uc131\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774\ud6c4\uc758 \ub0b4\uc6a9\uc740 <a href='https:\/\/www.youtube.com\/playlist?list=PLe6NQuuFBu7HCoG6k8Sm35gm3IcspS1-j'>\uc81c \uc720\ud29c\ube0c \ucc44\ub110<\/a>\uc744 \ud1b5\ud574 \uc81c\uacf5\ub429\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>IT \uae30\uc220 \uc911 \uc6f9\uc744 \uc704\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc744 \uc704\ud55c \uae30\uc220\uc740 \uadf8 \ubcc0\ud654\uac00 \ub9e4\uc6b0 \uc2ec\ud558\uace0 \ubcc0\ub355\uc2a4\ub7fd\uc2b5\ub2c8\ub2e4. \ud55c\ub54c jQuery\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc5d0\uc11c \ub9e4\uc6b0 \ud575\uc2ec\uc801\uc778 \uc790\ub9ac\ub97c \ucc28\uc9c0\ud588\ub2e4\uac00 \uc9c0\uae08\uc740 \uacfc\uac70\uc5d0 \ube44\ud574 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\uc73c\uba70 \ud604\uc7ac\ub294 Vue\ub098 React\uc640 \uac19\uc740 \uae30\uc220\uc774 \uadf8 \uc790\ub9ac\ub97c \ucc28\uc9c0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc815\uc0c1\uc801\uc73c\ub85c \uc791\ub3d9\ud558\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 \uaf2d \ud544\uc694\ud55c \uae30\uc220\uc740 HTML, CSS, JS(\uc774\ud558 Javascript)\uc785\ub2c8\ub2e4. HTML\uc740 \uc6f9 \ud398\uc774\uc9c0\uc758 \uad6c\uc870\ub97c \uc815\uc758\ud558\uace0 CSS\ub294 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=14323\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \ubc29\ubc95\uc758 \uc815\uc11d&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-14323","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14323"}],"version-history":[{"count":27,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14323\/revisions"}],"predecessor-version":[{"id":14391,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14323\/revisions\/14391"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14323"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}