๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“ฑ Cross Platform/React Native

[React Native] Expo๋ž€? (feat. ์„ค์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•)

by Fomagran ๐Ÿ’ป 2022. 2. 16.
728x90
๋ฐ˜์‘ํ˜•

์•ˆ๋…•ํ•˜์„ธ์š” Foma๐Ÿ’ป ์ž…๋‹ˆ๋‹ค.

 

๋ณธ๊ฒฉ์ ์œผ๋กœ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ–ˆ๋Š”๋ฐ์š”.

 

๊ทธ ์ค‘ ์ดˆ๋ณด์ž๊ฐ€ ์ž…๋ฌธํ•˜๊ธฐ ์‰ฌ์šด Expo์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ณ  ์„ค์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~


React native๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

 

1. React-Native-CLI

 

React-Native-CLI๋Š” ์–ด๋– ํ•œ ํˆด์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์˜ค๋กœ์ง€ React natvie๋งŒ์„ ์ด์šฉํ•ด์„œ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

 

์ด๊ฒƒ์€ ์ดˆ๊ธฐ์— ์„ค์ •์ด ๊นŒ๋‹ค๋กญ๊ณ , Android Studio, Xcode ๋“ฑ์œผ๋กœ ๊ฐ ํ”Œ๋žซํผ๋งˆ๋‹ค ์„ค์น˜ํ•˜๊ณ  ๋นŒ๋“œํ•ด์•ผ ํ•˜๋Š” ๋‹จ์ ์ด ์žˆ์ง€๋งŒ

 

๊ฐœ๋ฐœ์ž ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ์ž์œ ๋กญ๊ฒŒ ์ œ์–ด ๊ฐ€๋Šฅํ•œ ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

 

2. Expo-CLI

 

Expo-CLI๋Š” ์ดˆ๊ธฐ์— ์„ค์ •์ด ๊ฐ„๋‹จํ•˜๊ณ , ๊ฐœ๋ฐœ์„ ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํŠนํžˆ ๊ฐ ํ”Œ๋žซํผ IDE๋ฅผ ์„ค์น˜ํ•˜์ง€ ์•Š๊ณ ๋„ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ํฐ ์žฅ์ ์ž…๋‹ˆ๋‹ค.

 

ํ•˜์ง€๋งŒ ๋„ค์ดํ‹ฐ๋ธŒ ํŒŒ์ผ์„ ์ œ์–ดํ•  ์ˆ˜ ์—†๊ณ , ๋ชจ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์—†์œผ๋ฉฐ Expo์—์„œ ์ œ๊ณ ์•„๋Š” ๊ธฐ๋Šฅ๋งŒ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

 

์ด ๋‘ ๊ฐœ๋ฐœ ๋ฐฉ์‹ ์ค‘์— ์ „ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์ฒ˜์Œ ์ ‘ํ•ด๋ณด๊ธฐ ๋•Œ๋ฌธ์— ์šฐ์„  Expo-CLI๋กœ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•ด๋ณด๊ณ  ์—ฌ๋Ÿฌ ๋‹จ์ ๋“ค์ด ๋Š๊ปด์ง„๋‹ค๋ฉด React-Native-CLI๋กœ ๋„˜์–ด๊ฐˆ ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค.


Expo๋ž€?

 

๊ณต์‹ ๋ฌธ์„œ์—” ์•„๋ž˜์™€ ๊ฐ™์ด ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

 

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase. - Expo -

 

๊ฐ„๋‹จํ•˜๊ฒŒ ํ•ด์„ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

'Expo๋Š” JavaScript๋‚˜ TypeScript๋กœ iOS,Android,Web ์•ฑ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ด์ž ํ”Œ๋žซํผ์ด์•ผ!' 

 

์กฐ๊ธˆ ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ์„ค๋ช…ํ•˜๋ฉด ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ํฌ๋กœ์Šค ํ”Œ๋žซํผ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•œ ๋นŒ๋“œ๋„๊ตฌ์ด๋ฉฐ, ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋“ˆ์„ ๋ณด๋‹ค ์‰ฝ๊ณ  ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” XDE์ž…๋‹ˆ๋‹ค.


Pricing

 

Expo๋Š” ๋ฌด๋ฃŒ ๋ฒ„์ „๊ณผ ์œ ๋ฃŒ ๋ฒ„์ „์ด ๋‚˜๋ˆ ์ ธ ์žˆ๋Š”๋ฐ์š”.

 

๋ฌด๋ฃŒ์™€ ์œ ๋ฃŒ๋ฅผ ๋น„๊ตํ•ด๋ณด๋ฉด ๋ฌด๋ฃŒ๋งŒ ์‚ฌ์šฉํ•ด๋„ ๊ฑฐ์˜ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 


์ดˆ๊ธฐ ์„ธํŒ…

 

Expo๋ฅผ ์„ค์น˜ํ•˜๊ธฐ ์œ„ํ•ด์„  ๋จผ์ € Node.js, Visual Studio Code, Android Studio,Xcode(๋งฅ ์œ ์ €๋ผ๋ฉด)๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 

(์œˆ๋„์šฐ ๊ธฐ์ค€์œผ๋กœ ์„ค๋ช…๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.)

 

Node.js ์„ค์น˜

 

 

๋‹ค์šด๋กœ๋“œ | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

Visual Studio Code ์„ค์น˜

 

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

Android Studio ์„ค์น˜

 

 

Download Android Studio and SDK tools  |  Android Developers

The official IDE for Android app developers.

developer.android.com

 

Xcode ์„ค์น˜ (๋งฅ ์œ ์ €๋ผ๋ฉด)

 

 

Xcode - Apple Developer

Xcode includes everything you need to create amazing apps for iPhone, iPad, Mac, Apple Watch, and Apple TV.

developer.apple.com


Expo-CLI ์„ค์น˜

 

cd ์›ํ•˜๋Š” ๊ณณ
npm install expo-cli

 

 

 

๋งŒ์•ฝ Window PowerShell PSSecurityException ์ด ์‹œ์Šคํ…œ์—์„œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ... ์ด์™€ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋œฌ๋‹ค๋ฉด ์•„๋ž˜ ๊ธ€์„ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

 

 

 

[Error ํ•ด๊ฒฐ๋ฒ• ํฌํ•จ] Window PowerShell PSSecurityException ์ด ์‹œ์Šคํ…œ์—์„œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ..

React Native๋ฅผ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์‹œ์ž‘ํ•˜๋ ค๊ณ  expo์—์„œ ์•ฑ์„ ์ƒ์„ฑํ•˜๋Š” ๊ณผ์ •์—์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. ๋ฐœ์ƒํ•œ ์ด์œ ๋Š” ์ด๊ฒƒ์„ ์„ค์น˜ํ•  ๊ถŒํ•œ์ด ์—†๋‹ค๋Š” ๊ฒƒ์ธ๋ฐ, ๋งฅ์—์„œ๋Š” sudo๋กœ ํ•ด๊ฒฐํ•˜๋ฉด ๋˜์—ˆ์ง€๋งŒ windo

fomaios.tistory.com

 

expo ํ”„๋กœ์ ํŠธ๋ฅผ ์ดˆ๊ธฐํ™” ํ•ด์ค๋‹ˆ๋‹ค.

 

expo init "์›ํ•˜๋Š” ํ”„๋กœ์ ํŠธ ์ด๋ฆ„"

 

blank - a minimal app as clean as an empty canvas๋ฅผ ์„ ํƒํ•ด์ค๋‹ˆ๋‹ค.

 

 

๊ทธ๋Ÿฌ๋ฉด ๋‹ค์šด๋กœ๋“œ๊ฐ€ ์ง„ํ–‰๋˜๊ณ  

 

 

์„ฑ๊ณต์ ์œผ๋กœ ํ…œํ”Œ๋ฆฟ์ด ๋งŒ๋“ค์–ด์กŒ๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ํ™”๋ฉด์ด ๋œฐ๊ฑฐ์—์š”.

 

 

๊ทธ ๋‹ค์Œ ์•„๋ž˜์™€ ๊ฐ™์ด ์น˜๋ฉด ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๊ฐ€ Visual Studio Code๋กœ ๋œฐ๊ฑฐ์—์š”.

 

code .

 

 

๋น„์ฅฌ์–ผ ์ŠคํŠœ๋””์˜ค ์ฝ”๋“œ์—์„œ ์ƒˆ ํ„ฐ๋ฏธ๋„์„ ๋งŒ๋“ค๊ณ  

 

 

ํ„ฐ๋ฏธ๋„์— ํ•ด๋‹น ์•ฑ์œผ๋กœ ์ด๋™ํ•œ ๋’ค npm start๋ฅผ ํ•ด์ค๋‹ˆ๋‹ค.

 

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋กœ์ปฌํ˜ธ์ŠคํŠธ๋กœ ์„œ๋ฒ„๊ฐ€ ๋œฐ๊ฑฐ์—์š”.

 

cd "ํ”„๋กœ์ ํŠธ ์ด๋ฆ„"
npm start

 

ํ•ด๋‹น ์ฃผ์†Œ๋กœ ์ด๋™ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ์‚ฌ์ดํŠธ๊ฐ€ ๋œฐ๊ฑฐ์—์š”.

 

์ด ์ค‘ ์›ํ•˜๋Š” ํ”Œ๋žซํผ ๊ฐ€์ƒ๊ธฐ๊ธฐ๋ฅผ ์„ ํƒํ•ด์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

(๋‹จ, ํ•ด๋‹น IDE๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.)

 

 

๋˜๋Š” ํœด๋Œ€ํฐ์— Expo Go๋ฅผ ์„ค์น˜ํ•œ ๋’ค

 

 

ํœด๋Œ€ํฐ์œผ๋กœ QR์ฝ”๋“œ๋ฅผ ์Šค์บ”ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ํ™”๋ฉด์ด ๋‚˜์˜ค๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

 

์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ธฐ๊ธฐ๋‚˜ ๊ฐ€์ƒ ๊ธฐ๊ธฐ๊ฐ€ ๋ฆฌํ”„๋ ˆ์‰ฌ ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


Expo๋ฅผ ์ด์šฉํ•ด์„œ ์„ค์น˜๋ฅผ ํ•˜๊ณ  ์ดˆ๊ธฐ ์•ฑ์„ ์‹คํ–‰์‹œ์ผœ ๋ณด์•˜๋Š”๋ฐ, ์ •๋ง ๊ฐ„๋‹จํ•˜๊ณ  ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ฝ”๋“œ๊ฐ€ ๋ฐ”๋€Œ๋Š” ๊ฒƒ์ด ์‹ ๊ธฐํ–ˆ๋‹ค.

 

๋˜ ์•ฑ์˜ ์ƒˆ ๋ฒ„์ „์„ ์žฌ๋ฐฐํฌ ์—†์ด ์ฝ”๋“œ ์ˆ˜์ •๋งŒ์œผ๋กœ๋„ ์—…๋ฐ์ดํŠธ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š”๋ฐ.. ์ง„์งœ ๊ธฐ๋Œ€๋œ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€