๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
React-Native

React Native ์žฅ๋‹จ์ ๊ณผ CLI, Expo ๋น„๊ต์™€ ํ›„๊ธฐ

by LasBe 2023. 7. 13.
๋ฐ˜์‘ํ˜•

๐Ÿ“’ React-Native ์žฅ๋‹จ์ 


๐Ÿ“Œ ์žฅ์ 

๐Ÿ”Ž ์ƒ์‚ฐ์„ฑ

JS๋กœ ์•ˆ๋“œ๋กœ์ด๋“œ์™€ IOS ์–ดํ”Œ์„ ๋™์‹œ์— ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ”Ž CodePush๋ฅผ ํ†ตํ•œ ๋ฐฐํฌ

์›ํ•˜๋Š” ๊ธฐ๋Šฅ์˜ ๋ฐฐํฌ๋ฅผ ์•„๋ฌด ๋•Œ๋‚˜ ์Šคํ† ์–ด๋ฅผ ๊ฑฐ์น˜์ง€ ์•Š๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋„ค์ดํ‹ฐ๋ธŒ ์ฝ”๋“œ์— ๋ณ€๋™์ด ์žˆ์„ ๋• CodePush๋ฅผ ์‚ฌ์šฉํ•˜์ง„ ๋ชปํ•˜๊ณ  ์Šคํ† ์–ด ์—…๋ฐ์ดํŠธ๋ฅผ ์ด์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ”Ž ์‰ฝ๊ณ  ๋น ๋ฅธ UI ์ž‘์„ฑ

JavaScript์™€ ๋ฆฌ์•กํŠธ๋งŒ ์ž˜ ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด ๋ชจ๋ฐ”์ผ UI๋ฅผ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

 

๐Ÿ“Œ ๋‹จ์ 

๐Ÿ”Ž ์ž์ฃผ ์‹คํŒจํ•˜๋Š” ์•ฑ ๊ตฌ๋™, ๋„ˆ๋ฌด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋Š” Build Time

๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ํ”„๋กœ์ ํŠธ ๊ฐœ๋ฐœ ํ›„, ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ ๋˜๋Š” ๊ฐœ๋ฐœ์šฉ ๊ธฐ๊ธฐ๋กœ ๊ฐœ๋ฐœ ๋ชจ๋“œ๋ฅผ ๊ตฌ๋™์„ ํ•  ๋•Œ ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์—” ๋ฌธ์ œ์—†์ด ์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ ๋ธŒ๋žœ์น˜๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ ๋„ค์ดํ‹ฐ๋ธŒ ์ฝ”๋“œ์— ๋ณ€๋™ ์‚ฌํ•ญ์ด ๋ฐœ์ƒํ•˜๊ฑฐ๋‚˜ ํ•˜๋ฉด, ๊ฐ„ํ˜น๊ฐ€๋‹ค๊ฐ€ ์•ฑ ๊ตฌ๋™์ด ์ œ๋Œ€๋กœ ์•ˆ๋˜๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ”Ž ๊ฐ€๋”์”ฉ ์ผ๊ด€์„ฑ ์—†๋Š” UI

๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์—” ๊ดœ์ฐฎ์ง€๋งŒ, ๊ฐ€๋”์”ฉ์€ Android์—์„œ ๋ณด์ด๋Š” UI์™€ iOS์—์„œ ๋ณด์ด๋Š” UI๊ฐ€ ์ผ๊ด€์„ฑ์ด ์—†๊ฒŒ ๋‚˜ํƒ€๋‚  ๋•Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด์„œ iOS์—์„œ๋Š” ๊ดœ์ฐฎ๊ฒŒ ๋ณด์ด๋Š”๋ฐ Android์—์„œ๋Š” ์Šคํƒ€์ผ์ด ๋ฌธ์ œ๊ฐ€ ์žˆ์–ด์„œ ์ด๋ฅผ ๊ณ ์น˜๊ธฐ ์œ„ํ•œ ์Šคํƒ€์ผ ์ฝ”๋“œ๋ฅผ ๋” ์ถ”๊ฐ€ํ•ด์•ผ ๋  ๋•Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ๊ฒฝ์šฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํ•œ ์ชฝ์—์„œ ์ž˜ ์ž‘๋™ํ•œ๋‹ค๊ณ  ํ•ด์„œ ๋‹ค๋ฅธ ์ชฝ์—์„œ๋„ ์ž˜ ์ž‘๋™ํ•  ๊ฒƒ์ด๋ผ๋Š” ๊ฒƒ์„ ๋ณด์žฅํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ฐœ๋ฐœ ์ดํ›„์—๋Š” ๊ฐ ๊ธฐ๊ธฐ์—์„œ ์ž˜ ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•˜๋Š” ์ž‘์—…์€ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค.

๐Ÿ”Ž ์„ฑ๋Šฅ ๋ฌธ์ œ

๋„ค์ดํ‹ฐ๋ธŒ ๋ธŒ๋ฆฟ์ง€๋ฅผ ์‚ฌ์šฉํ•ด JS ์Šค๋ ˆ๋“œ์™€ ๋„ค์ดํ‹ฐ๋ธŒ ์Šค๋ ˆ๋“œ๋ฅผ ์—ฐ๊ฒฐ์‹œ์ผœ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๋ณด๋‹ค ์„ฑ๋Šฅ์ด ๋–จ์–ด์ง‘๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ์—๋Š” ์ตœ์ ํ™”์— ๋Œ€ํ•ด์„œ ์‹ ๊ฒฝ์„ ์จ๊ฐ€๋ฉด์„œ ๋‚ญ๋น„๋˜๋Š” ๋ Œ๋”๋ง์„ ์ค„์—ฌ๊ฐ€๋ฉด์„œ ๊ฐœ๋ฐœ์„ ํ•ด์•ผ ์•ฑ์—์„œ ๋†’์€ ์„ฑ๋Šฅ์„ ๋ณด์ž…๋‹ˆ๋‹ค.

๐Ÿ”Ž ์ ์€ ์ •๋ณด

React Native์— ๋Œ€ํ•œ ํ•™์Šต ์ž๋ฃŒ์™€ ์ •๋ณด๋“ค์ด ์ ๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ์„ ๋•Œ ์ง์ ‘ ํ•ด๊ฒฐํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค.

 

๐Ÿ“’ React-Native ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ฐฉ๋ฒ•


๐Ÿ“Œ React Native CLI

๐Ÿ”Ž ์žฅ์ 

  • ์ง์ ‘ ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœ ๊ฐ€๋Šฅ
  • ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์ด ์žˆ๋Š” ๊ฒฝ์šฐ, ๋ชจ๋“ˆ์„ ์ง์ ‘๋งŒ๋“ค์–ด ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ๋‹ค์–‘ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋“ˆ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

๐Ÿ”Ž ๋‹จ์ 

  • ๊ธฐ๋ณธ์ ์œผ๋กœ Android, IOS์— ๋Œ€ํ•œ ๋„ค์ดํ‹ฐ๋ธŒ ์ง€์‹์ด ํ•„์ˆ˜์  (๋†’์€ ๋Ÿฌ๋‹์ปค๋ธŒ)
  • ๊ธฐ๋ณธ์ ์ธ ์„ค์ •์ด ๋˜์–ด ์žˆ์ง€ ์•Š์•„ ์ดˆ๊ธฐ ์„ค์ •์ด ๊นŒ๋‹ค๋กœ์›€
  • ๋นŒ๋“œ์‹œ ํ”Œ๋žซํผ๋งˆ๋‹ค Android Studio, Xcode์„ ์ด์šฉํ•œ ๋ณ„๋„์˜ ๊ณผ์ •๊ณผ ์žฅ๋น„๊ฐ€ ํ•„์š” (๋งฅ๋ถ, ์•„์ดํฐ)

 

๐Ÿ“Œ Expo CLI

๐Ÿ”Ž ์žฅ์ 

  • ์ดˆ๊ธฐ ๊ตฌ์„ฑ์ด ์‰ฌ์–ด์„œ ๋น ๋ฅด๊ณ  ๊ฐ„ํŽธํ•˜๊ฒŒ ์„ค์น˜๊ฐ€ ๊ฐ€๋Šฅ
  • React Natvie๋ฅผ ์œ„ํ•œ ๊ธฐ๋ณธ ์„ค์ •์„ ๋ฏธ๋ฆฌ ๊ตฌ์„ฑ
  • ์ง์ ‘ ๊ฐœ๋ฐœํ•˜๊ธฐ ์–ด๋ ค์šด ๊ธฐ๋Šฅ๋“ค ๊ธฐ๋ณธ ํƒ‘์žฌ (์•ฑํ‘ธ์‹œ, ์• ํ”Œ๋กœ๊ทธ์ธ ๋“ฑ)
  • ๋„ค์ดํ‹ฐ๋ธŒ ํŒŒ์ผ๋“ค์„ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ˆจ๊ฒจ๋‘๊ณ  Expo๊ฐ€ ์ž๋™์œผ๋กœ ๊ด€๋ฆฌ
  • Android / Xcode๋ฅผ ์„ค์น˜ํ•˜์ง€ ์•Š์•„๋„ QR์ฝ”๋“œ๋ฅผ ํ†ตํ•ด์„œ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋ฅผ ์‹คํ–‰
  • Apple / Google Store์— ๋ฐฐํฌ์™€ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๊ธฐ์— ๊ฐ„ํŽธํ•˜๋‹ค.
    • ๋ฐฐํฌ๋งˆ๋‹ค ๊ฒ€์‚ฌ๋ฅผ ๋ฐ›์ง€ ์•Š๋Š”๋‹ค.
    • Expo Wrapper๋ฅผ ํฌํ•จํ•œ Standalone ์•ฑ ๋ฐฐํฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.

๐Ÿ”Ž ๋‹จ์ 

  • ์ˆจ๊ฒจ์ ธ ์žˆ๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ํŒŒ์ผ์„ ์ˆ˜์ •ํ•˜๊ธฐ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅ์— ๊ฐ€๊น๋‹ค.
  • expo์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์“ธ ์ˆ˜ ์—†๋‹ค.
  • ๋„ค์ดํ‹ฐ๋ธŒ ์˜์—ญ์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์—†์–ด ์ผ์ • ์ˆ˜์ค€ ์ด์ƒ์œผ๋กœ ๊ฐ€๋ฉด ๋ช…ํ™•ํ•œ ํ•œ๊ณ„๊ฐ€ ์žˆ๋‹ค.
  • Expo ์„œ๋ฒ„๋กœ ๋นŒ๋“œํ•  ๊ฒฝ์šฐ ๋ฌด๋ฃŒ ์‚ฌ์šฉ์ž๋“ค์€ ์›จ์ดํŒ…ํ•˜๋“ฏ ์ž์‹ ์˜ ์•ฑ ๋นŒ๋“œ๋ฅผ ์ฐจ๋ก€๊ฐ€ ์˜ฌ ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ค์•ผ ํ•œ๋‹ค.

 

๐Ÿ“’ ํ›„๊ธฐ


์ฒซ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ์— ์•ž์„œ ์ด๋Ÿฐ ์ €๋Ÿฐ ๊ธ€๋“ค์„ ์ฐพ์•„๋ดค์—ˆ์Šต๋‹ˆ๋‹ค.

 

๊ฑฐ์˜ ๋ชจ๋“  ๊ธ€๋“ค์„ ์ •๋…ํ–ˆ์ง€๋งŒ ๋‹ค๋“ค ํ•˜๋Š” ๋ง๋“ค์€ "๊ฒฐ๊ตญ ejectํ•œ๋‹ค"๋กœ ๋ชจ์•„์กŒ์Šต๋‹ˆ๋‹ค.

 

๊ทธ๋ž˜๋„ ์•ฑ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ์ง€์‹์ด ์ „๋ฌดํ•œ ์ƒํ™ฉ์—์„œ ๋œ์ปฅ CLI๋กœ ๊ฐœ๋ฐœํ•˜๊ธฐ์—” ๊ฒ๋‚˜ Expo๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

 

ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์•ฑ์„ ์‹คํ–‰์‹œํ‚ค๋Š”๋ฐ๊นŒ์ง€๋Š” ๋„ˆ๋ฌด๋‚˜ ์‰ฝ๊ฒŒ ์ง„ํ–‰ํ•ด ๋ณ„๊ฑฐ ์—†๋‹ค๊ณ  ์ƒ๊ฐ์„ ํ–ˆ์ง€๋งŒ

์–ผ๋งˆ ๊ฐ€์ง€๋„ ์•Š์•„ ๊ณ ๋น„๋ฅผ ๋งŒ๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

์•ฑ ๊ธฐํš์— ์žˆ๋Š” ๊ธฐ๋Šฅ๋“ค์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•ด์„  ๋ช‡๋ช‡๊ฐœ์˜ ํŠน์ • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์ˆ˜๋˜๋Š” ์ƒํ™ฉ์ด์—ˆ๋Š”๋ฐ

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

 

๊ทธ๋ ‡๊ฒŒ ํ›„๋‹ฌ๋ฆฌ๋Š” ๋งˆ์Œ์œผ๋กœ eject๋ฅผ ํ•œ ํ›„ ์–ด๋Š์ •๋„ ๊ธฐ๋Šฅ์ ์ธ ๋ชจ์Šต์„ ๊ฐ–์ถ”๊ฒŒ ๋งŒ๋“  ์ง€๊ธˆ,
๋Œ์ด์ผœ๋ณด๋ฉด CLI์— ๊ทธ๋ ‡๊ฒŒ ๊ฒ๋จน์ง€ ์•Š์•˜์–ด๋„ ๋  ๊ฒƒ ๊ฐ™์•˜์Šต๋‹ˆ๋‹ค.

 

์ƒ๊ฐ๋ณด๋‹ค Expo์— ๋น„ํ•ด ๊ทธ๋ ‡๊ฒŒ ์–ด๋ ต์ง€ ์•Š์œผ๋ฉฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ ํƒ์˜ ํญ์ด ๋” ๋„“์–ด์ ธ์„œ ์˜คํžˆ๋ ค eject๋ฅผ ์ผ์ฐ ํ•˜๊ธธ ์ž˜ํ–ˆ๋‹ค๊ณ  ๋Š๋‚๋‹ˆ๋‹ค.

 

๋˜ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜์˜ ๊ฒฝ์šฐ expo๋Š” ์•ˆ๋“œ๋กœ์ด๋“œ, IOS ๋‘˜ ๋‹ค ์„ค์น˜๋ฅผ ์ž๋™์ ์œผ๋กœ ํ•ด์ฃผ์ง€๋งŒ CLI์˜ ๊ฒฝ์šฐ ์–ด๋Š์ •๋„ ์ˆ˜๋™์œผ๋กœ ์„ค์ •ํ•ด์ค˜์•ผ ํ•˜๋Š” ๊ณผ์ •์ด ์žˆ๋Š”๋ฐ ์ด ๊ฒƒ ๋˜ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ณต์‹๋ฌธ์„œ๋‚˜ ๋ธ”๋กœ๊ทธ ๊ธ€์„ ๋ณด๋ฉด ์„ค์น˜ ๊ณผ์ •์„ ์นœ์ ˆํ•˜๊ฒŒ ์•Œ๋ ค์ค˜ ํฌ๊ฒŒ ์–ด๋ ค์šด ๋ถ€๋ถ„๋„ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

 

์–ด๋Š์ •๋„ ์‚ฌ์šฉํ•ด๋ณธ ์ง€๊ธˆ ๊ฒฐ๋ก ์„ ๋‚ด๋ฆฌ์ž๋ฉด ํ•ธ๋“œํฐ ์ž์ฒด ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•œ ๊ธฐ๋Šฅ์ด ๋งŽ์€ ์–ดํ”Œ์˜ ๊ฒฝ์šฐ CLI๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ,
JS์˜ ๋น„์ค‘์ด ๋†’์€ ๊ฐ„๋‹จํ•œ ์–ดํ”Œ์„ ๋งŒ๋“ค ๊ฒฝ์šฐ Expo๋ฅผ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

 

๊ทธ๋ž˜๋„ ํ•œ๋ฒˆ CLI ๋„์ „ํ•ด๋ณด์„ธ์š”.

 

๐Ÿ“Œ 2025๋…„ "React Native CLI" vs "Expo" ๊ทผํ™ฉ

2025.01.15 - [React-Native] - 2025๋…„ React Native ํ˜„ํ™ฉ๊ณผ CLI vs Expo ๋น„๊ต๋ถ„์„

 

2025๋…„ React Native ํ˜„ํ™ฉ๊ณผ CLI vs Expo ๋น„๊ต๋ถ„์„

๐Ÿ“’ 2025๋…„ React Native ํ˜„ํ™ฉ๊ณผ CLI vs Expo Go ๋น„๊ต๋ถ„์„2023.07.13 - [React-Native] - React Native ์žฅ๋‹จ์ ๊ณผ CLI, Expo ๋น„๊ต์™€ ํ›„๊ธฐ์ด ๊ธ€์„ ์“ด ์ง€๋„ ์–ด์–ธ 1๋…„ ํ•˜๊ณ ๋„ 6๊ฐœ์›”์ด ์ง€๋‚ฌ์Šต๋‹ˆ๋‹ค. ๊ทธ๋™์•ˆ ํ”Œ๋Ÿฌํ„ฐ๊ฐ€ ์น˜๊ณ  ์˜ฌ๋ผ

lasbe.tistory.com

2025๋…„.

์ด ๊ธ€์„ ์ž‘์„ฑํ•œ์ง€ ์–ผ๋งˆ ์ง€๋‚˜์ง€ ์•Š์•˜๋Š”๋ฐ RN ์ƒํƒœ๊ณ„์—๋Š” ์—„์ฒญ๋‚œ ๋ณ€ํ™”๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

RN CLI์™€ Expo ๊ทผํ™ฉ์ด ๊ถ๊ธˆํ•˜์‹œ๋‹ค๋ฉด ์œ„ ๊ธ€์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€


์˜คํ”ˆ ์ฑ„ํŒ