{"id":1978,"date":"2022-04-19T07:25:32","date_gmt":"2022-04-18T22:25:32","guid":{"rendered":"https:\/\/akal.co.kr\/?p=1978"},"modified":"2022-04-19T07:35:37","modified_gmt":"2022-04-18T22:35:37","slug":"2022-%ec%b6%94%ec%b2%9c-react-ui-framework","status":"publish","type":"post","link":"https:\/\/akal.co.kr\/?p=1978","title":{"rendered":"2022 \ucd94\ucc9c React UI Framework !!!"},"content":{"rendered":"\n<p>\uc6f9\uc744 \uc774\uc6a9\ud574\uc11c \ud504\ub85c\uadf8\ub7a8\uc744 \uad6c\ud604\ud558\ub824\uba74 UI\uc640 \uad00\ub828\ud574\uc11c \ub9ce\uc740 \uc791\uc5c5\uc744 \ud574\uc57c\ud558\ub294\ub370(\uae30\ubcf8\uc801\uc778 HTML\uacfc Javascript\ub97c \uc654\ub2e4\uac14\ub2e4 \ud574\uc57c\ud558\uace0 \ub4f1\ub4f1) Bootstrap\uc758 \ub4f1\uc7a5 \uc774\ud6c4 \ub9ce\uc740 \uc6f9 \uad00\ub828 \ud504\ub85c\uadf8\ub7a8\ub4e4\uc758 \ud654\uba74\uad00\ub9ac\uac00 \uc26c\uc6cc\uc84c\uace0, \uc774 Bootstrap\uacfc \uac19\uc740 \uae30\ubc18\uc758 \ub9ce\uc740 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \ud0c4\uc0dd\ud558\uc600\ub2e4. React\ub3c4 \uc6f9\uc0c1\uc5d0\uc11c Front-End\ub97c \uad6c\uc131\ud558\ub294 \uc694\uc18c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub2e4 \ubcf4\ub2c8 \uc774\ub7f0 UI\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uac70\uc758 \ud544\uc218\ub77c\uace0 \ub9d0\ud560\uc218 \uc788\uaca0\ub2e4. <br \/>\ubb50 ! \uc774\ub7f0 UI Framework \uc911\uc5d0\uc11c \ub9c8\uc74c\uc5d0 \ub4dc\ub294\uac8c \uc5c6\uac70\ub098 \ud544\uc694\ud55c \uae30\ub2a5\uc774 \uc5c6\uc73c\uba74 \uc9c1\uc811 \ub9cc\ub4e4\uc5b4 \uc368\uc57c\ud558\uaca0\uc9c0\ub9cc;;;<br \/>React \ud604\uc7ac \uc0ac\uc6a9\ub418\uace0 \uc788\ub294 React\uc6a9 UI Framework \uc911\uc5d0\uc11c \uc2e4\ubb34\uc5d0\uc11c \uc815\ub9d0 \uc4f8\ub9cc\ud55c \ub140\uc11d\ub4e4\ub9cc \uace8\ub77c\ubd24\ub2e4.<\/p>\n<p>\u00a0<\/p>\n\n\n\n<h1><a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"noopener\"><strong><span style=\"color: #3366ff;\">1. MUI<\/span><\/strong><\/a><\/h1>\n<p>\uad6c\uae00\uc5d0\uc11c \ubc1c\ud45c\ud55c \uba38\ud130\ub9ac\uc5bc UI \uc2dc\uc2a4\ud15c\uc744 \ubc1c\ud45c\ud588\ub294\ub370 \uc774 \ub3c4\uad6c\ub97c \uc774\uc6a9\ud558\uc2dc\uba74 \uc27d\uac8c \uba38\ud130\ub9ac\uc5bc UI\ub97c \uad6c\ud604\ud560 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<br \/>\uc0ac\uc6a9\ub7c9\uc774 \ub9ce\uc544\uc11c\uc778\uc9c0 \uc870\uae08\ub9cc \ucc3e\uc544\ub3c4 \ucc3e\uc744\uc218 \uc788\ub294 \ub2e4\uc591\ud55c \uc608\uc81c\ub4e4\uacfc Q&amp;A\uac00\u00a0 MUI\uc758 \uac00\uc7a5 \ud070 \uc7a5\uc810\uc774\ub2e4. \uac1c\uc778\uc801\uc73c\ub85c\ub294 Table\uacfc DataGrid\uac00 \ub098\ub258\uc5b4 \uc788\ub294\ub370, \ud55c\uad6d\uc801\uc778 \ub9db\uc744 \ub0b4\uae30\uac00 \uc5b4\ub835\ub2e4. \ud2b9\ud788 DataGrid\ub294 \uc11c\uc591\uc801\uc778 \uc778\ud130\ud398\uc774\uc2a4\ub77c\uc11c&#8230;\uc880 \ub09c\uac10\ud558\ub2e4. \uc774\uac8c \ubb34\uc2a8 \uc18c\ub9b0\uace0 \ud558\ub2c8 \uac8c\uc2dc\ud310\ud615 \uac8c\uc2dc\ubb3c \uc704\uc8fc\uc778 \uc6b0\ub9ac\ub098\uc758 \uc778\ud130\ud398\uc774\uc2a4\ub791 \uc678\uad6d\uc758 \ud3ec\ub7fc\uc6a9 \uacf5\uac1c\ud504\ub85c\uadf8\ub7a8\ub4e4\uc758 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ube44\uad50\ud558\uba74 \uc27d\uac8c \uc774\ud574\ub418\uc2e4\ub4ef&#8230;<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_JuwvE0dWMy-1024x517.png\" alt=\"\" class=\"wp-image-1980\" width=\"768\" height=\"388\" srcset=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_JuwvE0dWMy-1024x517.png 1024w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_JuwvE0dWMy-300x151.png 300w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_JuwvE0dWMy-768x388.png 768w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_JuwvE0dWMy-1536x775.png 1536w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_JuwvE0dWMy.png 1920w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h1><a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #3366ff;\"><strong>2. Ant Design (Antd)<\/strong><\/span><\/a><\/h1>\n<p>\ubc18\ub4dc\uc2dc \ud544\uc694\ud55c \uae30\ub4f1\ub4e4\uc740 \uc804\ubd80\ub2e4 \uad6c\ud604\ub418\uc5b4 \uc788\uace0, \uc911\uad6d\uc5d0\uc11c \uc81c\uc791\ub41c \ud504\ub808\uc784\uc6cc\ud06c\ub77c \uadf8\ub7f0\uc9c0 \ub3d9\uc591(?)\uc801 \ud639\uc740 \ud55c\uad6d\uc801(?)\uc73c\ub85c \uc0dd\uac01\ud558\ub294 \uc778\ud130\ud398\uc774\uc2a4\uc5d0 \uc801\uc6a9\ud558\uae30 \uc27d\ub2e4.<br \/>TypeScript\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc774 \uc804\ud658\ub418\uba74\uc11c \uc608\uc81c\ub3c4 TypeScript\uc640 \uae30\uc874\uc608\uc81c\ub97c \uc81c\uacf5\ud558\uace0 \uc788\ub2e4. \uae30\uc874 \ubc84\uc804\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ud638\ud658\uc131\uc774 \ub5a8\uc5b4\uc9c8\ub54c\uac00 \uc788\uc73c\ub2c8 \ubc84\uc804\ubcc4\ub85c \uc798 \ud30c\uc545\ud574\uc57c \ud55c\ub2e4.<br \/>\uae30\ubcf8 \uc0d8\ud50c\uc608\uc81c\uac00 \ud48d\ubd80\ud558\uace0 API \ubc0f \uc5ec\ub7ec\uac00\uc9c0 \ub514\uc790\uc778 \uac00\uc774\ub4dc \ub4e4\ub3c4 \uc798 \uc900\ube44\ub418\uc5b4 \uc788\ub2e4.\u00a0<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_BYxbv9cmtX-1024x517.png\" alt=\"\" class=\"wp-image-1981\" width=\"768\" height=\"388\" srcset=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_BYxbv9cmtX-1024x517.png 1024w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_BYxbv9cmtX-300x151.png 300w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_BYxbv9cmtX-768x388.png 768w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_BYxbv9cmtX-1536x775.png 1536w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_BYxbv9cmtX.png 1920w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h1><a href=\"https:\/\/react.semantic-ui.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #3366ff;\"><strong>3. Semantic UI React<\/strong><\/span><\/a><\/h1>\n<p>\uac1c\uc778\uc801\uc73c\ub85c \uc815\ub9d0 \uc88b\uc544\ud558\ub294 \ud615\ud0dc\uc758 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uac00\uc9c0\uace0 \uc788\ub2e4. \uc6f9 \uc804\uc6a9\uc758 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc81c\uc791\ud55c\ub2e4\uba74 \ubb34\uc870\uac74 \uc774\ub140\uc11d\uc744 \uc0ac\uc6a9\ud560\uac83 \uac19\ub2e4. \ud604\uc7ac \ubc84\uadf8\uac00 \uc788\uc5b4\uc11c \ud29c\ud1a0\ub9ac\uc5bc\uc5d0 \ub098\uc640\uc788\ub294\ub300\ub85c \uc124\uce58\ud574\ub3c4 \uc791\ub3d9\ud558\uc9c0 \uc54a\ub294\ub2e4. <br>\uae30\ubcf8\uc801\uc73c\ub85c import \ud574\uc57c\ud558\ub294 CSS \ud30c\uc77c\uc5d0 \ubb38\uc81c\uac00 \uc788\uc5b4\uc11c \ubc1c\uc0dd\ud558\ub294 \ubb38\uc81c\ub85c&nbsp;npx\ub85c react \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uba74 react-script 15 \ubc84\uc804\uc774 \uc124\uce58\ub418\ub294\ub370 react-script\ub97c 14\ubc84\uc804\uc73c\ub85c \ub9de\ucdb0\uc8fc\uac70\ub098 \ud639\uc740 \uc2e4\ud589\ud558\uba74\uc11c ;;\uc744 ;\uc73c\ub85c \uc218\uc815\ub418\ub3c4\ub85d \ud574\uc11c \uc2e4\ud589\uc2dc\ucf1c\uc57c \ud55c\ub2e4.<br>21\ub144 10\uc6d4\uacbd\ubd80\ud130 \ub9ac\ud3ec\ud305\ub41c \ubc84\uadf8\uc778\uac83 \uac19\uc740\ub370 \ud604\uc7ac \ubc30\ud3ec\ub418\ub294 react \ubc84\uc804\uc5d0 \ub9de\ucdb0\uc11c \uc81c\ub300\ub85c \uc218\uc815\ub418\uc9c0 \uc54a\uc740 \ub4ef \ud558\ub2e4. \uc774\uac78 \uc54c\uc544\ub0b8\ub2e4\uace0 \ud55c\ucc38 \uac78\ub838\ub2e4. \ub108\ubb34 \ub9c8\uc74c\uc5d0 \ub4e4\uc5c8\ub294\ub370 \uc4f0\uc9c8 \ubabb\ud574\uc11c \ucc38 \ub2f5\ub2f5\ud588\ub294\ub370&#8230;<br>\uc5b4\uca0c\ub4e0 \ud574\uacb0\ud574\uc11c \uc0ac\uc6a9\ud560\uc218 \uc788\uac8c \ub418\uc5c8\ub2e4.<br><br>HTML\uacfc Web base\uc758 Bootstrap\ucc98\ub7fc Semantic UI \uc5d0\uc11c \ucd9c\ubc1c\ud574\uc11c react\uc9c0\uc6d0 \ubc84\uc804\uae4c\uc9c0 \ub098\uc628 \ub140\uc11d\uc774\ub2e4. \uba87\uba87\uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc740 \ubc18\uc751\ud615\uc5d0 \uace0\ub824\ub418\uc5b4 \uc788\uc9c0 \uc54a\ub2e4. \ud558\uc9c0\ub9cc \uadf8 \ub355\ubd84\uc5d0 \uc624\ud788\ub824 PC\uc6a9 Web base\uc5d0\uc11c\ub294 \ub354 \uc88b\uc740 UI\ub97c \ub9cc\ub4e4\uc218 \uc788\uc9c0 \uc54a\uc744\uae4c \uc0dd\uac01\ub418\uae30\ub3c4 \ud55c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/react.semantic-ui.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_33ulpkQiNn-1024x517.png\" alt=\"\" class=\"wp-image-1982\" width=\"768\" height=\"388\" srcset=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_33ulpkQiNn-1024x517.png 1024w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_33ulpkQiNn-300x151.png 300w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_33ulpkQiNn-768x388.png 768w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_33ulpkQiNn-1536x775.png 1536w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_33ulpkQiNn.png 1920w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h1><a href=\"https:\/\/blueprintjs.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #3366ff;\"><strong>4. Blueprint JS<\/strong><\/span><\/a><\/h1>\n<p>\uc870\uae08 \ubd80\uc871\ud574\ubcf4\uc774\uc9c0\ub9cc \ub098\ub984 \uc790\uae30\ub9cc\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac00\uc9c0\uace0 \uc788\uae30\ub3c4 \ud558\ub2e4.&nbsp;<br>\ub098\ub984 \uae54\ub054\ud558\uba74\uc11c \uc790\uae30\ub9cc\uc758 \uc0c9\uc744 \uac00\uc9c0\uace0 \uc788\ub294 \ud504\ub808\uc784\uc6cc\ud06c\ub2e4. \ud2b9\ud788 Table \uc774 Excel \ud615\ud0dc\ub85c \uad6c\ud604\ub418\uc5b4 \uc788\uc5b4\uc11c datagrid \ucc98\ub7fc \uc4f0\uace0 \uc2f6\uc740 \ubd84\ub4e4\uc5d0\uac8c\ub294 \uc720\uc6a9\ud560\ub4ef \ud558\ub2e4.&nbsp;<br>\uc790\uccb4\uc801\uc73c\ub85c \uc81c\uacf5\ud558\ub294 HotKey \uc9c0\uc815\uc740 \uc815\ub9d0 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \ub2e8\ucd95\ud0a4 \uc9c0\uc815\uc5d0 \uc0ac\uc6a9\ud55c\ub2e4\ub358\uc9c0 \ud2b9\uc218 \uc561\uc158\ud0a4\ub85c \uc0ac\uc6a9\ud558\uae30\uc5d0 \uc88b\ub2e4.<\/p>\n<p>Context API\uac00 \ub808\uac70\uc2dc \ubc84\uc804\ud615\ud0dc\ub85c \uc0ac\uc6a9\ub418\uace0 \uc788\uc5b4\uc11c \uae30\ubcf8\uc801\uc778 Warning\uc774 \ubc1c\uc0dd\ud558\ub294\uac8c \ub208\uc5d0 \uac70\uc2ac\ub9b0\ub2e4. \ucd94\ud6c4 \ubc84\uc804\uc5c5 \ub418\uc9c0 \uc54a\uc73c\uba74 \ub808\uac70\uc2dc API\uac00 \uc81c\uac70\ub418\uc5c8\uc744\ub54c \uc791\ub3d9\ud558\uc9c0 \uc54a\uc744 \uc704\ud5d8\uc131\uc744 \uac00\uc9c0\uace0 \uc788\ub2e4. (\ubb50 \uadf8\ub807\uac8c \ub458\uac83 \uac19\uc9c0\ub294 \uc54a\uace0&#8230;\uc815 \uc548\ub420\ub54c\ub294 react \ubc84\uc804\uc744 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud558\uba74 \ub418\ub2c8\uae4c..)&nbsp;<\/p>\n<p>\uac1c\uc131\uc788\ub294 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74 \ud55c\ubc88 \uc0b4\ud3b4\ubcfc\ub9cc \ud558\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/blueprintjs.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_QGZymwlWL7-1024x517.png\" alt=\"\" class=\"wp-image-1983\" width=\"768\" height=\"388\" srcset=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_QGZymwlWL7-1024x517.png 1024w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_QGZymwlWL7-300x151.png 300w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_QGZymwlWL7-768x388.png 768w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_QGZymwlWL7-1536x775.png 1536w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_QGZymwlWL7.png 1920w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h1><a href=\"https:\/\/www.primefaces.org\/primereact\/\" target=\"_blank\" rel=\"noopener\" data-wplink-edit=\"true\"><span style=\"color: #3366ff;\"><strong>5. PrimeReact<\/strong><\/span><\/a><\/h1>\n<p>\uc774\uac83\uc800\uac83 \ucc3e\ub2e4\uac00 \uc6b0\uc5f0\ud788 \ucc3e\uac8c\ub41c \ud504\ub808\uc784\uc6cc\ud06c. \ucc98\uc74c\uc5d0 \uc0b4\ud3b4\ubcfc\ub54c\ub294 \ub610 Bootstrap \uc544\ub958\uc791 \uc774\uac70\ub098 \ud0c0 \ud504\ub808\uc784\uc6cc\ud06c \uc544\ub958\uc791 \uc815\ub3c4\ub85c \uc0dd\uac01\ud588\ub294\ub370 \uc900\ube44\ub41c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc0dd\uac01\ubcf4\ub2e4 \ud6e8\uc52c \ub9ce\uc544\uc11c \uae5c\uc9dd \ub180\ub780 \ub140\uc11d\uc774\ub2e4.<br>\ud0c0 \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \ucc3e\uc544\ubcf4\uae30 \ud798\ub4e0 inputMask, speed dial, DataTable \uc758 \uac04\ud3b8\ud55c Cell edit \uae30\ub2a5, Data Scroller, overlay panel, splitter,&nbsp; ContextMenu, Panel Menu, MegaMenu, Slide Menu, Dock \ubc0f Chart.js, Galleria \uae4c\uc9c0 \ub0b4\ubd80\uc5d0 \ud0d1\uc7ac\ud558\uace0 \uc788\uc5b4\uc11c \uc544\uc8fc \ub2e4\uc591\ud55c \ud45c\ud604\uc744 \uc774 \ud55c\uac1c\uc758 \ub77c\uc774\ube0c\ub7ec\ub85c \uc27d\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<br>\ud2b9\ud788 Table\uc5d0\uc11c Inline Edit\ub97c \uad6c\ud604\ud560\ub54c Antd\ubcf4\ub2e4 \ub354 \uc27d\uac8c \uad6c\ud604\ud560\uc218 \uc788\ub2e4.&nbsp;<br>\uc804\ubc18\uc801\uc778 \uc778\ud130\ud398\uc774\uc2a4 \uad6c\uc870\ub294 antd \ub97c \ub9ce\uc774 \ub2ee\uc544\uc788\ub2e4. Theme\ub3c4 \ubbf8\ub9ac \uc5ec\ub7ec\uac00\uc9c0\uac00 \uc900\ube44\ub418\uc5b4 \uc788\uc5b4\uc11c \uc27d\uac8c \uc801\uc6a9\uc774 \uac00\ub2a5\ud558\ub2e4\ub294 \uc7a5\uc810\uc774 \uc788\ub2e4.<br><br>\ub9ce\uc774 \uc54c\ub824\uc9c0\uc9c0 \uc54a\uc740 \ud504\ub808\uc784\uc6cc\ud06c\uc778\ub370\ub3c4 \ubd88\uad6c\ud558\uace0 \ub9ce\uc740 \uae30\ub2a5\uc744 \ud0d1\uc7ac\ud574\uc11c \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \ub9ce\uc740 \ub3c4\uc6c0\uc774 \ub418\ub294 \ud504\ub808\uc784\uc6cc\ud06c\ub77c\uace0 \ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.primefaces.org\/primereact\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_6tsukL1pc0-1024x517.png\" alt=\"\" class=\"wp-image-1984\" width=\"768\" height=\"388\" srcset=\"https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_6tsukL1pc0-1024x517.png 1024w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_6tsukL1pc0-300x151.png 300w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_6tsukL1pc0-768x388.png 768w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_6tsukL1pc0-1536x775.png 1536w, https:\/\/akal.co.kr\/wordpress\/wp-content\/uploads\/2022\/04\/chrome_6tsukL1pc0.png 1920w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<p>\uadf8\ub7fc \ubb34\uc5c7\uc744 \uc368\uc57c\ud560\uae4c ?<\/p>\n<p>\uc778\ud130\ub137\uc5d0\uc11c \ub9ce\uc740 \uc815\ubcf4\ub97c \uc5bb\uc73c\uba74\uc11c \uc9c4\ud589\ud558\uace0 \uc2f6\ub2e4\uba74 MUI \uc640 Ant Design\uc744 \ucd94\ucc9c\ud55c\ub2e4. \uc774\uc911\uc5d0 \ub514\uc790\uc778 UI \uac10\uc131\uc774 \ub9de\ub294 \ub140\uc11d\uc73c\ub85c \uc0ac\uc6a9\ud558\uba74 \ub41c\ub2e4.<br \/>\ucd5c\ub300\ud55c \ub9ce\uc740 \uc4f8\ub9cc\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc27d\uac8c \ud14c\ub9c8\ub97c \uc801\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74 PrimeReact\ub97c \ucd94\ucc9c\ud55c\ub2e4.<br \/>\uac1c\uc131\ub118\uce58\uba74\uc11c \ub3c5\ud2b9\ud55c UI\ub97c \uc0ac\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74 Semantic-UI react \ud639\uc740 Blueprint JS \ub97c \uc0ac\uc6a9\ud574\ubcf4\uae38 \uad8c\ud55c\ub2e4.<br \/><br \/>\ud639\uc740 \ub369\uce58\uac00 \ucee4\uc9c0\ub294\uac83\uc744 \ub450\ub824\uc6cc\ud558\uc9c0 \uc54a\ub294\ub2e4\uba74 \uc5ec\ub7ec\uac00\uc9c0 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc11e\uc5b4\uc368\ub3c4 \ubb34\ubc29\ud558\ub2e4. \ub2e8, \ud504\ub808\uc784\uc6cc\ud06c\ubcc4 \uad81\ud569\uc740 \ud655\uc778\ud574\ubcf4\uc9c0 \uc54a\uc558\uc9c0\ub9cc, Antd + blueprint JS \ub97c \uc11e\uc5b4\uc11c \uc0ac\uc6a9\ud574\ubcf8 \uacb0\uacfc \ud06c\uac8c \ubb38\uc81c\uac00 \ub418\ub294 \uc77c\uc740 \uc5c6\uc5c8\ub2e4.<br \/><br \/>\ub2e4\uc12f\uac00\uc9c0 \ubaa8\ub450 \uc548\uc815\uc131\uc774 \ub192\uace0 \uc0ac\uc774\ud2b8 \ub808\ud37c\ub7f0\uc2a4\uac00 \uc798 \uad6c\ucd95\ub418\uc5b4 \uc788\uc5b4\uc11c \ucad3\uc544\uac00\ub294\ub370 \ud070 \uc5b4\ub824\uc6c0\uc740 \uc5c6\uc744 \uac83\uc774\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9\uc744 \uc774\uc6a9\ud574\uc11c \ud504\ub85c\uadf8\ub7a8\uc744 \uad6c\ud604\ud558\ub824\uba74 UI\uc640 \uad00\ub828\ud574\uc11c \ub9ce\uc740 \uc791\uc5c5\uc744 \ud574\uc57c\ud558\ub294\ub370(\uae30\ubcf8\uc801\uc778 HTML\uacfc Javascript\ub97c \uc654\ub2e4\uac14\ub2e4 \ud574\uc57c\ud558\uace0 \ub4f1\ub4f1) Bootstrap\uc758 \ub4f1\uc7a5 \uc774\ud6c4 \ub9ce\uc740 \uc6f9 \uad00\ub828 \ud504\ub85c\uadf8\ub7a8\ub4e4\uc758 \ud654\uba74\uad00\ub9ac\uac00 \uc26c\uc6cc\uc84c\uace0, \uc774 Bootstrap\uacfc \uac19\uc740 \uae30\ubc18\uc758 \ub9ce\uc740 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \ud0c4\uc0dd\ud558\uc600\ub2e4. React\ub3c4 \uc6f9\uc0c1\uc5d0\uc11c Front-End\ub97c \uad6c\uc131\ud558\ub294 \uc694\uc18c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub2e4 \ubcf4\ub2c8 \uc774\ub7f0 UI\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uac70\uc758 \ud544\uc218\ub77c\uace0 \ub9d0\ud560\uc218 \uc788\uaca0\ub2e4.<\/p>\n","protected":false},"author":1,"featured_media":1980,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11,9,817],"tags":[1498,1499],"_links":{"self":[{"href":"https:\/\/akal.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/1978"}],"collection":[{"href":"https:\/\/akal.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/akal.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/akal.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/akal.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1978"}],"version-history":[{"count":0,"href":"https:\/\/akal.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/1978\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/akal.co.kr\/index.php?rest_route=\/wp\/v2\/media\/1980"}],"wp:attachment":[{"href":"https:\/\/akal.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/akal.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/akal.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}