{"id":5634,"date":"2026-05-08T23:03:10","date_gmt":"2026-05-08T14:03:10","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=5634"},"modified":"2026-05-08T23:39:34","modified_gmt":"2026-05-08T14:39:34","slug":"expo-project-start","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/05\/08\/expo-project-start\/","title":{"rendered":"[Expo] Project Start"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c Expo\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4.
React Native Expo is a tool that allows you to build mobile apps with JavaScript.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb nodejs\ud658\uacbd\uc5d0\uc11c \uc2e4\ud589\ub418\uae30\ub54c\ubb38\uc5d0 nodejs\ub97c \ubc18\ub4dc\uc2dc \uc124\uce58\ud574\uc57c\ud569\ub2c8\ub2e4.
Since it runs in a Node.js environment, you must install Node.js.<\/p>\n\n\n\n

https:\/\/nodejs.org\/ko\/download<\/a><\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb Watchman\uc124\uce58\ub294 \uad8c\uc7a5\ud569\ub2c8\ub2e4. \ucf54\ub4dc \ubcc0\uacbd\uc0ac\ud56d\uc744 \uc2e4\uc2dc\uac04 \uac10\uc9c0\ud569\ub2c8\ub2e4.
Installing Watchman is recommended. It detects code changes in real time.<\/p>\n\n\n\n

brew install watchman<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb Expo GO \uc571 \uc124\uce58 \/ Install Expo Go<\/p>\n\n\n\n
\u2714\ufe0f \uc5ec\ub7ec\ubd84\uc758 \ubaa8\ubc14\uc77c \ud3f0\uc5d0 \uc571\uc2a4\ud1a0\uc5b4\ub098 \ud50c\ub808\uc774\uc2a4\ud1a0\uc5b4\uc5d0\uc11c Expo Go \uc571\uc744 \uc124\uce58\ud569\ub2c8\ub2e4.
Install the Expo Go app from the App Store or Play Store on your mobile phone.<\/p>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb 1.\ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791 \/ project start<\/h3>\n\n\n\n
\u00a0\u2714\ufe0f \ud130\ubbf8\ub110\uc5d0\uc11c \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uba74 expo \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.
Install the expo project by running the following command in the terminal.<\/p>\n\n\n\n
\u2714\ufe0f \uc571\uc774\ub984\uc744 \ubb3c\uc5b4\ubcf4\uba74 \uc785\ub825\ud558\uba74\ub429\ub2c8\ub2e4. \uc800\ub294 start-app\uc73c\ub85c \ud569\ub2c8\ub2e4.
If it asks for the app name, just enter it. I use ‘start-app’.<\/p>\n\n\n\n
npx create-expo-app@latest\n...\n\u2714 What is your app named? \u2026 start-app<\/strong><\/code><\/pre>\n\n\n\n
2.\uc5d1\uc2a4\ud3ec \uc2e4\ud589 \/ run expo app<\/h3>\n\n\n\n
\u2714\ufe0f \uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.(\uc911\uc694\ud568!)
Navigate to the created project directory. (Important!)<\/p>\n\n\n\n
cd start-app<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ud130\ubbf8\ub110\uc5d0\uc11c \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uba74 QR\ucf54\ub4dc\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4.
Enter the following command in the terminal to run the QR code.<\/p>\n\n\n\n
npx expo start<\/code><\/pre>\n\n\n\n
\"\"
Expo QR Code<\/figcaption><\/figure>\n\n\n\n
\u2714\ufe0f \ubaa8\ubc14\uc77c \ud3f0\uc5d0\uc11c Expo Go \uc571\uc73c\ub85c QR\ucf54\ub4dc\ub97c \uc2a4\uce94\ud558\uba74 \uae30\ubcf8 \uc571\ud654\uba74\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can view the main app screen by scanning the QR code with the Expo Go app on your mobile phone.<\/p>\n\n\n\n
\n
\"\"
App<\/figcaption><\/figure>\n\n\n\n
\"\"
Expo GO<\/figcaption><\/figure>\n<\/figure>\n\n\n\n
\n\n\n\n
3.\ud504\ub85c\uc81d\ud2b8 \ub9ac\uc14b \/ project reset<\/h3>\n\n\n\n
\u2714\ufe0f \uae30\uc874\uc758 \ud504\ub85c\uc81d\ud2b8\ub97c \uc644\uc804\ud788 \ub9ac\uc14b\ud569\ub2c8\ub2e4.
Completely reset the existing project.<\/p>\n\n\n\n
npm run reset-project<\/code><\/pre>\n\n\n\n
MacBookAir start-app % npm run reset-project<\/strong>\n\n> start-app@1.0.0 reset-project\n> node .\/scripts\/reset-project.js\n\nDo you want to move existing files to \/app-example instead of deleting them? (Y\/n): y\n\ud83d\udcc1 \/app-example directory created.\n\u27a1\ufe0f \/app moved to \/app-example\/app.\n\u27a1\ufe0f \/components moved to \/app-example\/components.\n\u27a1\ufe0f \/hooks moved to \/app-example\/hooks.\n\u27a1\ufe0f \/constants moved to \/app-example\/constants.\n\u27a1\ufe0f \/scripts moved to \/app-example\/scripts.\n\n\ud83d\udcc1 New \/app directory created.\n\ud83d\udcc4 app\/index.tsx created.\n\ud83d\udcc4 app\/_layout.tsx created.\n\n\u2705 Project reset complete. Next steps:\n1. Run `npx expo start` to start a development server.\n2. Edit app\/index.tsx to edit the main screen.\n3. Delete the \/app-example directory when you're done referencing it.\nMacBookAir start-app % <\/code><\/pre>\n\n\n\n
4.\ucf54\ub4dc\uc218\uc815 \/ Code modification<\/h3>\n\n\n\n
\u2714\ufe0f \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0\uc11c  app  \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.
Navigate to the app directory within the project directory.<\/p>\n\n\n\n
\u2714\ufe0f \uae30\uc874\uc758 index.tsx\ud30c\uc77c\uc744 \ub2e4\ub978\uc774\ub984\uc73c\ub85c \ubc31\uc5c5\ud569\ub2c8\ub2e4.(\uc608: b_index.tsx)
Back up the existing index.tsx file with a different name (e.g., b_index.tsx).<\/p>\n\n\n\n
MacBookAir app % ls\n_layout.tsx\tb_index.tsx\tindex.js\nMacBookAir app % <\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c index.js\ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.
To use JavaScript, create an index.js file and enter the following code.<\/p>\n\n\n\n
— tsx\ub294 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\uc785\ub2c8\ub2e4.
tsx is a TypeScript file.<\/p>\n\n\n\n
— index.tsx\ub77c\ub294 \uae00\uc790\ub97c index.js\ub85c \uc218\uc815\ud588\uc2b5\ub2c8\ub2e4.
I changed the text ‘index.tsx’ to ‘index.js’.<\/p>\n\n\n\n
import { Text, View } from \"react-native\";\n\nexport default function Index() {\n  return (\n    <View\n      style={{\n        flex: 1,\n        justifyContent: \"center\",\n        alignItems: \"center\",\n      }}\n    >\n      <Text>Edit app\/index.js<\/strong> to edit this screen.<\/Text>\n    <\/View>\n  );\n}<\/code><\/pre>\n\n\n\n
— Expo Go\uc5d0\uc11c \ud655\uc778\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ud654\uba74\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. 
If you check on Expo Go, you can see the following screen.<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c Expo\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4.React Native Expo is a tool that allows you to build mobile apps with JavaScript. \ud83d\udc49\ud83c\udffb nodejs\ud658\uacbd\uc5d0\uc11c \uc2e4\ud589\ub418\uae30\ub54c\ubb38\uc5d0 nodejs\ub97c \ubc18\ub4dc\uc2dc \uc124\uce58\ud574\uc57c\ud569\ub2c8\ub2e4.Since it runs in a Node.js environment, you must install Node.js. https:\/\/nodejs.org\/ko\/download \ud83d\udc49\ud83c\udffb Watchman\uc124\uce58\ub294 \uad8c\uc7a5\ud569\ub2c8\ub2e4. \ucf54\ub4dc \ubcc0\uacbd\uc0ac\ud56d\uc744 \uc2e4\uc2dc\uac04 \uac10\uc9c0\ud569\ub2c8\ub2e4.Installing Watchman is recommended. It detects code changes […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,1],"tags":[],"class_list":["post-5634","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=5634"}],"version-history":[{"count":33,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5634\/revisions"}],"predecessor-version":[{"id":5672,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/5634\/revisions\/5672"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=5634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=5634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=5634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}