{"id":1000,"date":"2019-08-07T12:23:06","date_gmt":"2019-08-07T21:23:06","guid":{"rendered":"\/blog\/?p=1000"},"modified":"2023-09-21T09:26:50","modified_gmt":"2023-09-21T00:26:50","slug":"%ec%9c%88%eb%8f%84%ec%9a%b0%ec%97%90%ec%84%9c-react-%ea%b0%9c%eb%b0%9c%ed%99%98%ea%b2%bd-%ea%b5%ac%ec%b6%95","status":"publish","type":"post","link":"https:\/\/hasu0707.duckdns.org\/blog\/?p=1000","title":{"rendered":"\uc708\ub3c4\uc6b0\uc5d0\uc11c React \uac1c\ubc1c\ud658\uacbd \uad6c\ucd95"},"content":{"rendered":"\n<div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><span style=\"font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe; font-size: 14px;\">1. node.js LTS \ubc84\uc804 \uc124\uce58 (<\/span><a href=\"https:\/\/nodejs.org\/ko\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe; font-size: 14px;\">https:\/\/nodejs.org\/ko\/<\/span><\/a><span style=\"font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe; font-size: 14px;\">)<\/span><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">2. yarn \ud328\ud0a4\uc9c0 \uad00\ub9ac\uc790 \uc124\uce58<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">npm install --global yarn<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">:: yarn \ud328\ud0a4\uc9c0 \uad00\ub9ac\uc790 \uc5c5\ub370\uc774\ud2b8<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">yarn self-update<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">:: \uc758\uc874\uc131\uc744 \uccb4\ud06c\ud55c\ub2e4.<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">yarn<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">3. React \uc124\uce58<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">npm install -g create-react-app<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">:: create-react-app \ubc84\uc804 \ud655\uc778<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">create-react-app --version<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">:: \uc791\uc5c5 \ub514\ub809\ud1a0\ub9ac \uc0dd\uc131<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">mkdir D:\\react_test<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">cd \/D D:\\react_test<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">:: \ud14c\uc2a4\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc0dd\uc131<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">create-react-app my_app<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">cd my_app<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">npm start<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">:: \uc6f9\ube0c\ub77c\uc6b0\uc838\uac00 http:\/\/localhost:3000\/\uc744 \uc5f4\uba74\uc11c \uc2e4\ud589\ub41c\ub2e4.<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">\u25a0 npm \ubc0f yarn \uc124\uce58 \ub514\ub809\ud1a0\ub9ac<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">C:\\Program Files\\nodejs\\node_modules\\npm\\bin<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\yarn\\bin<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 13px;\"><br \/><\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">\u25a0 \ucc38\uace0\uc0ac\uc774\ud2b8<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">https:\/\/araikuma.tistory.com\/485<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">https:\/\/brunch.co.kr\/@brunch92ny\/33<\/span><\/font><\/div><div style=\"\"><font face=\"\uad74\ub9bc, \uad74\ub9bc\uccb4, Tahoma, Geneva, sans-serif\"><span style=\"font-size: 14px; font-family: &quot;Malgun Gothic&quot;, Gulim, GulimChe, Dotum, DotumChe;\">https:\/\/sujinlee.me\/webpack-react-tutorial\/<\/span><\/font><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. node.js LTS \ubc84\uc804 \uc124\uce58 (https:\/\/nodejs.org\/ko\/) 2. yarn \ud328\ud0a4\uc9c0 \uad00\ub9ac\uc790 \uc124\uce58 npm install &#8211;global yarn :: yarn \ud328\ud0a4\uc9c0 \uad00\ub9ac\uc790 \uc5c5\ub370\uc774\ud2b8 yarn self-update :: \uc758\uc874\uc131\uc744 \uccb4\ud06c\ud55c\ub2e4. yarn 3. React \uc124\uce58 npm install -g create-react-app :: create-react-app \ubc84\uc804 \ud655\uc778 create-react-app &#8211;version :: \uc791\uc5c5 \ub514\ub809\ud1a0\ub9ac \uc0dd\uc131 mkdir D:\\react_test cd \/D D:\\react_test :: \ud14c\uc2a4\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc0dd\uc131 create-react-app my_app cd [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[23],"tags":[],"class_list":["post-1000","post","type-post","status-publish","format-standard","hentry","category-development_web"],"_links":{"self":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1000"}],"version-history":[{"count":0,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1000\/revisions"}],"wp:attachment":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}