{"id":2347,"date":"2024-10-31T15:27:12","date_gmt":"2024-10-31T06:27:12","guid":{"rendered":"http:\/\/blog.moramcnt.com\/?p=2347"},"modified":"2024-10-31T15:27:12","modified_gmt":"2024-10-31T06:27:12","slug":"react-native-%ea%b0%9c%eb%b0%9c-%ed%99%98%ea%b2%bd%ea%b5%ac%ec%b6%95","status":"publish","type":"post","link":"http:\/\/blog.moramcnt.com\/?p=2347","title":{"rendered":"React Native \uac1c\ubc1c \ud658\uacbd\uad6c\ucd95"},"content":{"rendered":"

I. \ubaa9\ud45c<\/b><\/p>\n

\uc548\ub4dc\ub85c\uc774\ub4dc \ubc0f IOS \uac1c\ubc1c\uc744\u00a0 \ud55c \uc18c\uc2a4\uc5d0\uc11c \uac1c\ubc1c\ud558\uae30 \uc704\ud558\uc5ec React Native\ub97c \uc120\ud0dd\ud558\uc600\uace0, \uac1c\ubc1c\uc744 \uc704\ud55c\u00a0 \ud658\uacbd\uc124\uc815\uc744 \ud574\ubcf8\ub2e4.<\/p>\n

 <\/p>\n

II. \uc5f0\uad6c<\/b> \ubc0f<\/b> \uac1c\ubc1c\ub0b4\uc6a9<\/b><\/p>\n

1. \uad00\ub828 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uc124\uce58<\/b><\/p>\n

\ubcf8 \ub9e4\ub274\uc5bc\uc740 iMac (macOS, Ver 13.6.1)\uc5d0\uc11c \uc791\uc131\ub418\uc5c8\uc73c\ub098, Android\uc758 \uacbd\uc6b0\ub294 Windows 10\uc5d0\uc11c\ub3c4 \ub3d9\uc791\uac00\ub2a5 \ud569\ub2c8\ub2e4.<\/p>\n

1) Node.js <\/b>\uc124\uce58<\/b><\/p>\n

\uac00. \ub9e5 :\u00a0Homebrew\ub97c \uc774\uc6a9\ud558\uc5ec \uc124\uce58<\/p>\n\n\n\n
brew install node<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\ub098. Windows<\/p>\n

https:\/\/nodejs.org\/\uc5d0\uc11c<\/a> \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc5ec \uc124\uce58<\/p>\n

 <\/p>\n

2) <\/b>React Native Cli <\/b>\uc124\uce58<\/b><\/p>\n

Node.js\uc758 npm\uc744 \uc774\uc6a9\ud558\uc5ec \uc124\uce58<\/p>\n

\u2013 g : \uc804\uc5ed\uc73c\ub85c \uc124\uce58<\/p>\n\n\n\n
sudo npm install -g react-native-cli<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\u00a03)\u00a0 Vscode <\/b>\uc124\uce58<\/b><\/p>\n

Microsoft\uc758 Visual Studio Code\ub97c \uc774\uc6a9\ud558\uc5ec \uac1c\ubc1c<\/p>\n

\ub9e5, \uc708\ub3c4\uc6b0 \ubaa8\ub450 https:\/\/code.visualstudio.com\/<\/a> \uc5d0\uc11c \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc5ec \uc124\uce58<\/p>\n

 <\/p>\n

2. \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/b><\/p>\n

1) \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 :\u00a0\uc2e0\uaddc \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560\ub54c\ub9cc \ud544\uc694\ud568.<\/p>\n\n\n\n
\n

npx react-native init npc –version 0.68.2<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\ucc38\uace0 : https:\/\/velog.io\/@sonwanseo\/TypeError-cli.init-is-not-a-function-React-Native<\/a><\/p>\n

\"\"<\/p>\n

\n

 <\/p>\n

3. \ud504\ub85c\uc81d\ud2b8 \uc124\uce58<\/b><\/p>\n

1) SVN \uccb4\ud06c\uc544\uc6c3<\/p>\n

\uc774\ubbf8 \ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub418\uc5b4 SVN \uc800\uc7a5\uc18c\uc5d0 \ub4f1\ub85d\ub418\uc5b4 \uc788\ub294 \uacbd\uc6b0<\/p>\n

\uac00. Command + Shift + P \ubc84\ud2bc\uc744 \ub20c\ub7ec SVN:Checkout \uc744 \uc120\ud0dd\ud558\uace0 \uc5d4\ud130<\/p>\n

\"\"<\/p>\n

\ub098. SVN \uc8fc\uc18c \uc785\ub825<\/p>\n

SVN \uc8fc\uc18c\ub97c \uc785\ub825\ud55c\ud6c4 \uc5d4\ud130<\/p>\n

http:\/\/\ubcf4\uc548\uc0c1 \uc0dd\ub7b5\/npc-app<\/a><\/p>\n

\ub2e4. \ub808\ud3ec\uc9c0\ud1a0\ub9ac \uc704\uce58 \uc9c0\uc815<\/p>\n

– \/Users\/\uacc4\uc815\/Projects\/49.NPCSolutions\/02.Solutions\/NPCAppSolution \uc774\ub77c\ub294 \ud3f4\ub354\ub97c \uc0ac\uc804\uc5d0 \ub9cc\ub4e4\uc5b4 \ub193\ub294\ub2e4.<\/p>\n

– VSCODE\uc5d0\uc11c \uc18c\uc2a4 \ud30c\uc77c\uc744 \uc800\uc7a5\ud560 \uc704\uce58 \uc120\ud0dd<\/p>\n

\"\"<\/p>\n

\ub77c. \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354 \uc0dd\uc131<\/p>\n

\"\"<\/p>\n

\ub9c8. SNV \uacc4\uc815\uc815\ubcf4 \uc785\ub825<\/p>\n

\"\"<\/p>\n

\ubc14. \uc18c\uc2a4 \ub2e4\uc6b4\ub85c\ub4dc \uc644\ub8cc<\/p>\n

\"\"<\/p>\n

2) React Native \ud504\ub85c\uc81d\ud2b8 \uc885\uc18d \ubaa8\ub4c8 \uc124\uce58<\/p>\n

NPM \uba85\ub839\uc744 \uc774\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\uc5d0 \ucc38\uc870\ub418\uc5b4 \uc788\ub294 \ubaa8\ub4c8\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc5ec \uc124\uce58\ud55c\ub2e4.<\/p>\n

Vscode\uc758 \ubcf4\uae30> \ud130\ubbf8\ub110\uc744 \ud074\ub9ad\ud558\uba74 \uc544\ub798\uc640 \uac19\uc774 \ud558\ub2e8\uc5d0 \uba85\ub839\uc744 \uc785\ub825\ud560\uc218 \uc788\ub294 \uacf3\uc774 \ub098\uc624\ub294\ub370 \uc5ec\uae30\uc758 \ud130\ubbf8\ub110\ucc3d\uc5d0\uc11c \uc544\ub798\uc640 \uac19\uc774 npm install\uc744 \uc785\ub825\ud55c\ud6c4 \uc5d4\ud130<\/p>\n

\"\"<\/p>\n

3) \uc548\ub4dc\ub85c\uc774\ub4dc \uc124\uc815<\/p>\n

\uc548\ub4dc\ub85c\uc774\ub4dc \uac1c\ubc1c\uc744 \uc704\ud55c SDK\ubc0f \ube4c\ub4dc\ud234\uc744 \uc124\uce58\ud558\uae30 \uc704\ud574 \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\ub97c \uc774\uc6a9\ud558\uc5ec \uc124\uce58\ud55c\ub2e4.<\/p>\n

\uac00. \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624 \uc124\uce58<\/p>\n

\uae30\ubcf8\uc801\uc778 \uc124\uce58\ubc29\ubc95\uc740 \uc0dd\ub7b5<\/p>\n

\ub098. SDK \ubc0f BuldTool \ub2e4\uc6b4\ub85c\ub4dc<\/p>\n

\ud504\ub85c\uc81d\ud2b8\uc758 android > build.gradle\ud30c\uc77c\uc744 \uc5f4\uc5b4\ubcf4\uba74 \uc544\ub798\ucc98\ub7fc buildToolsVersion \ubc0f SDK\ubc84\uc804\ub4f1\uc744 \uba85\uae30\ud55c\uacf3\uc774 \ubcf4\uc77c \uac83\uc774\ub2e4.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

\uc704\uc640 \uac19\uc774 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc815\uc758\ud55c \ubc84\uc804\uc744 \ud655\uc778\ud558\uace0, \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\uc758 Tools > SDK Manager\uc5d0\uc11c \ud574\ub2f9 SDK\ubc0f \ube4c\ub4dc \ud234\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud558\uba74 \ub41c\ub2e4.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

\u00a0\u00a0 \"\"<\/p>\n

 <\/p>\n

4) XCODE\uc124\uc815<\/p>\n

IOS\ub294 App Store\uc5d0\uc11c Xcode\ub97c \ucd5c\uc2e0\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\uba74 \ub41c\ub2e4.<\/p>\n

5) Vscode\ub97c \ud1b5\ud574 \ud504\ub85c\uc81d\ud2b8 \uc2e4\ud589<\/p>\n

\uac00. \uc548\ub4dc\ub85c\uc774\ub4dc<\/p>\n

\ud558\ub2e8 vscode\uc758 \ud130\ubbf8\ub110\uc5d0\uc11c react-native run-android \ub610\ub294 npm run android \uba85\ub839\uc744 \ud1b5\ud574 \uc548\ub4dc\ub85c\uc774\ub4dc \ub514\ubc84\uae45\uc744 \ud560 \uc218 \uc788\ub2e4. \ubb3c\ub860 \uc774\ub54c \uc548\ub4dc\ub85c\uc774\ub4dc\uc5d0\uc120 \uac1c\ubc1c\uc790\ubaa8\ub4dc\uac00 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\uc5b4\uc57c \ud55c\ub2e4.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

\uac04\ud639 svn\uc73c\ub85c \ucc98\uc74c \uc784\ud3ec\ud2b8 \ubc1b\uc558\uc744 \uacbd\uc6b0\uc5d0\ub294 gradlew\uac00 \uc2e4\ud589\uad8c\ud55c\uc774 \uc5c6\uc5b4 \uc5d0\ub7ec\uac00 \ub09c\ub2e4\uba74 chmod 755\ub85c \uad8c\ud55c\uc744 \ubd80\uc5ec\ud55c\ud6c4\uc5d0 \uc2e4\ud589\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
\n

cd android<\/p>\n

chmod 755 .\/android\/gradlew\u00a0 <\/b><\/p>\n

\u00a0<\/b><\/p>\n

react-native run-android<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\uc131\uacf5\uc801\uc73c\ub85c \ucef4\ud30c\uc77c \ub418\uba74 \uc544\ub798\uc640 \uac19\uc774 Debug\ub97c \ud560 \uc218 \uc788\ub294 \ucf58\uc194\uc774 \ub098\ud0c0\ub098\uac8c \ub41c\ub2e4.\uc774 \ucf58\uc194\uc740 console.log\ub85c \uc18c\uc2a4\uc0c1\uc5d0 \uc8fc\uc11d\uc744 \ub2ec\uac8c \ub418\uba74 \uc18c\uc2a4\ub97c \uc218\uc815\ud558\uac8c \ub418\uba74 \uc2e4\uc2dc\uac04\uc73c\ub85c \ubc18\uc601\ub418\uc5b4 \ub85c\uadf8\ub97c \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n

\"\"<\/p>\n

\ub098. IOS<\/p>\n

IOS\ub97c \uad6c\ub3d9\ud558\uae30 \uc704\ud574\uc11c\ub294 \ucd5c\ucd08 \ud55c\ubc88\uc740 pod install\uc744 \uc774\uc6a9\ud558\uc5ec \ubaa8\ub4c8\uc744 \uc124\uce58\ud558\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
cd ios<\/p>\n

pod install<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\"\"<\/p>\n

\uadf8 \uc774\ud6c4\ub294 android \uc640 \ub3d9\uc77c\ud558\uac8c react-native run-ios\ub97c \uc774\uc6a9\ud558\uc5ec \uc2dc\ubbac\ub808\uc774\ud130\ub97c \uad6c\ub3d9\ud558\uc5ec \ud654\uba74\uc744 \ubcf4\uba74 \ub41c\ub2e4.<\/p>\n

\uc2e4\uc81c \ud3f0\uc5d0\uc11c \uad6c\ub3d9\uc744 \uc6d0\ud558\ub2e4\uba74 react-native run-ios \u2013device=\ud3f0ID \ub97c \uc785\ub825\ud558\uba74 \ub41c\ub2e4.<\/p>\n

 <\/p>\n

III. \uacb0\ub860<\/b><\/p>\n

\uac1c\ubc1c\uc744 \uc704\ud55c \ud658\uacbd\uc124\uc815\uc774 \uc644\ub8cc\ub418\uace0, \ub514\ubc84\uadf8 \ubaa8\ub4dc\ub85c \ucef4\ud30c\uc77c\ub3c4 \uac00\ub2a5\ud558\uac8c \ub418\uc5c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"

I. \ubaa9\ud45c \uc548\ub4dc\ub85c\uc774\ub4dc \ubc0f IOS \uac1c\ubc1c\uc744\u00a0 \ud55c \uc18c\uc2a4\uc5d0\uc11c \uac1c\ubc1c\ud558\uae30 \uc704\ud558\uc5ec React Native\ub97c \uc120\ud0dd\ud558\uc600\uace0, \uac1c\ubc1c\uc744 \uc704\ud55c\u00a0 \ud658\uacbd\uc124\uc815\uc744 \ud574\ubcf8\ub2e4.   II. \uc5f0\uad6c \ubc0f \uac1c\ubc1c\ub0b4\uc6a9 1. \uad00\ub828 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uc124\uce58 \ubcf8 \ub9e4\ub274\uc5bc\uc740 iMac (macOS, Ver 13.6.1)\uc5d0\uc11c \uc791\uc131\ub418\uc5c8\uc73c\ub098, Android\uc758 \uacbd\uc6b0\ub294 Windows 10\uc5d0\uc11c\ub3c4 \ub3d9\uc791\uac00\ub2a5 \ud569\ub2c8\ub2e4. 1) Node.js \uc124\uce58 \uac00. \ub9e5 :\u00a0Homebrew\ub97c \uc774\uc6a9\ud558\uc5ec \uc124\uce58 brew install node   \ub098. Windows https:\/\/nodejs.org\/\uc5d0\uc11c \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc5ec […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[21],"tags":[259,267],"class_list":["post-2347","post","type-post","status-publish","format-standard","hentry","category-mobile","tag-react-native","tag-267"],"_links":{"self":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2347"}],"version-history":[{"count":2,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2347\/revisions"}],"predecessor-version":[{"id":2362,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=\/wp\/v2\/posts\/2347\/revisions\/2362"}],"wp:attachment":[{"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2347"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.moramcnt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}