React Native Study

์ด ๊ธ€์€ React Native๋ฅผ ํ•ด๋ณด๊ณ  ์‹ถ์€๋ฐ ์–ด๋””๋ถ€ํ„ฐ ์–ด๋–ป๊ฒŒ ์‹œ์ž‘ํ•ด์•ผ ํ• ์ง€ ๋ง‰๋ง‰ํ•œ ๋ถ„๋“ค์ด๋‚˜, React Native ์Šคํ„ฐ๋””๋ฅผ ํ•˜๋ ค๋Š” ๋ถ„๋“ค์—๊ฒŒ ์กฐ๊ธˆ์ด๋‚˜๋งˆ ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ํ•˜๋Š” ๋งˆ์Œ์— ์Šคํ„ฐ๋””๊ฐ€ ๋๋‚˜๊ณ  ์ƒˆ๋กญ๊ฒŒ ๊ธ€์„ ์ •๋ฆฌํ–ˆ๋‹ค.

ํ•ด๋‹น ๋‚ด์šฉ ์™ธ์— ์ถ”๊ฐ€์ ์œผ๋กœ ํ•„์š”ํ•˜๊ฑฐ๋‚˜ ๊ถ๊ธˆํ•œ ๋‚ด์šฉ๋“ค์€ Facebook group - ์ƒํ™œ์ฝ”๋”ฉ, Facebook group - React Korea ๊ฐ™์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋ฌผ์–ด๋ณด๋ฉด ์ข‹์€ ๋‹ต๋ณ€์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

๊ฐœ์ธ์ ์œผ๋กœ ๊ถ๊ธˆํ•œ ๋‚ด์šฉ์€ ์ด๋ฉ”์ผ๋กœ ๋ฌธ์˜๋ฅผ ...

๊ธฐ์กด์— ์Šคํ„ฐ๋””๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •๋ฆฌํ•œ ๋‚ด์šฉ๋“ค์€ **์Šคํ„ฐ๋”” ์ •๋ฆฌ ๋ฌธ์„œ**๋กœ ์˜ฎ๊ฒผ๋‹ค.

์Šคํ„ฐ๋”” ์ •๋ฆฌ ๋ฌธ์„œ์—๋Š” ์Šคํ„ฐ๋”” ์‹œ์ž‘ ์ „ ์•„์  ๋‹ค๋ถ€ํ„ฐ, ์Šคํ„ฐ๋”” ๋ชฉํ‘œ ์„ค์ • ๊ณผ์ •, ์Šคํ„ฐ๋”” ์ฃผ์ฐจ๋ณ„ ๋‚ด์šฉ ์ •๋ฆฌ, React Native๊ฐ€ ์•„๋‹Œ ์š”์ฆ˜ ๊ด€์‹ฌ ์žˆ๋Š” ๋‚ด์šฉ์ด๋‚˜ ๋ฐœํ‘œ ๋‚ด์šฉ ๋“ฑ์ด ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.

์ƒ˜ํ”Œ ์ž‘์—…์„ ํ•œ ์ฝ”๋“œ, ๋ฌธ์„œ๋“ค์— ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์ด ์žˆ์–ด์„œ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ๊ฑฐ๋‚˜ ์ž˜๋ชป๋œ ๋‚ด์šฉ์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์œผ์‹  ๋ถ„๋“ค์€ ์–ธ์ œ๋“  ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ™์ด ๋” ๋‚˜์€ ์ฝ˜ํ…์ธ ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„๋“ค๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ํŠœํ† ๋ฆฌ์–ผ์ฒ˜๋Ÿผ ํ•˜๋‚˜์”ฉ ๋”ฐ๋ผ ํ•ด๋ณด๊ธฐ๋ฅผ ์›ํ•˜๋Š” ๋ถ„๋“ค์€ ์ด ๊ธ€๋ณด๋‹ค๋Š” React Native Express, react-native-tutorial-korean์ด ์ง€๊ธˆ๊นŒ์ง€ ๋ณธ ์ž๋ฃŒ ์ค‘์—์„œ๋Š” ์ œ์ผ ์ข‹์€ ๊ฒƒ ๊ฐ™๋‹ค.

์Šคํ„ฐ๋”” ๊ตฌ์„ฑ์› (4๋ช…)

์ด ์ž๋ฃŒ๋ฅผ ๋งŒ๋“œ๋Š”๋ฐ ๋„์›€์„ ์ฃผ์‹  ์šฐ๋ฆฌ ์Šคํ„ฐ๋”” ๊ตฌ์„ฑ์›์ž…๋‹ˆ๋‹ค. :)

์ถ”์ฒœ๋ชฉ์ฐจ

  1. ์Šคํ„ฐ๋”” ๋ชฉํ‘œ ์„ธ์šฐ๊ธฐ
  2. ํ”„๋กœ์ ํŠธ ํ™˜๊ฒฝ์„ค์ •
  3. React์˜ ์ดํ•ด
  4. React Native
    1. COMPONENTS
    2. APIS
    3. ์Šคํƒ€์ผ ์ž…ํžˆ๊ธฐ
    4. JavaScript Environment
  5. ์ƒ˜ํ”Œ ์•ฑ ๋งŒ๋“ค๊ธฐ
  6. ๋ฐฐํฌ์šฉ ํŒŒ์ผ ๋งŒ๋“ค๊ธฐ
  7. Codepush ์ ์šฉํ•˜๊ธฐ
  8. ๊ธฐํƒ€

1. ์Šคํ„ฐ๋”” ๋ชฉํ‘œ ์„ธ์šฐ๊ธฐ

๋‹จ์ˆœํ•˜๊ฒŒ Components, API ๋“ฑ์„ ๋”ฐ๋ผ ํ•˜๊ธฐ ๋ณด๋‹ค, ๋ณธ์ธ์ด ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๊ฐ„๋‹จํ•œ ์ƒ˜ํ”Œ ์•ฑ์„ ๋ชฉํ‘œ๋กœ ์„ธ์šฐ๊ณ  ์ง„ํ–‰ํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

์ƒ๊ฐ๋‚˜๋Š” ์•ฑ์ด ์—†์œผ๋ฉด Open API๋ฅผ ์ด์šฉํ•œ ๋‚ ์”จ ์•ฑ๋„ ๊ดœ์ฐฎ์Œ. (Weather Planet)

2. ํ”„๋กœ์ ํŠธ ํ™˜๊ฒฝ์„ค์ •

Mac๋„ ๋งŽ์ด ์•ˆ ์จ๋ณด๊ณ , ์•ฑ ๊ฐœ๋ฐœ๋„ ์ž˜ ๋ชจ๋ฅด๋Š” ๋ถ„๋“ค์—๊ฒŒ๋Š” ์ด ๊ณผ์ •์ด ์ œ์ผ ํž˜๋“ค ๊ฒƒ ๊ฐ™๋‹ค.

๊ทธ๋‚˜๋งˆ ๋‹คํ–‰์ธ ๊ฑด ์˜ˆ์ „(0.17 version)์—๋Š” ์—†์—ˆ์ง€๋งŒ, ์ง€๊ธˆ(0.39 version)์€ React Native Getting Started์— OS ๋ณ„๋กœ ์–ด๋–ป๊ฒŒ ์„ค์ •ํ•ด์•ผ ํ•˜๋Š”์ง€ ์ž˜ ์ •๋ฆฌ๊ฐ€ ๋˜์–ด์žˆ๋‹ค.

Wise์˜ React Native โ€“ ๊ธฐ๋ณธ ์„ธํŒ…ํ•˜๊ธฐ์—์„œ ๋งํฌ์˜ ๋‚ด์šฉ๋“ค์ด ์ง€๊ธˆ ๋งŽ์ด ๋ฐ”๋€Œ์–ด์„œ ํ•ด๋‹น ๊ธ€๋งŒ ๋ณด๊ณ  ์ดํ•ด๊ฐ€ ์–ด๋ ค์šด ๋ถ€๋ถ„๋“ค์ด ์žˆ์œผ๋‹ˆ ๊ฐ€๋ณ๊ฒŒ ์ฐธ๊ณ .

React Native Getting Started๋ฅผ ์ง„ํ–‰ํ•˜๋‹ค๊ฐ€ ๊ฐœ๊ฐœ์ธ์˜ ์ž‘์—…ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ํ™˜๊ฒฝ ๋ณ€์ˆ˜๋ฅผ ์ด๋ฏธ ๋‹ค๋ฅด๊ฒŒ ์ง€์ •ํ–ˆ๋˜๊ฐ€ ๊ธฐํƒ€ ๋‹ค๋ฅธ ์—ฌ๋Ÿฌ ์ด์Šˆ๋“ค๋กœ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋Ÿฐ ๊ฒฝ์šฐ ์ฃผ๋ณ€ ์ง€์ธ๋“ค์ด๋‚˜ Facebook group - ์ƒํ™œ์ฝ”๋”ฉ, Facebook group - React Korea ๊ฐ™์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋ฌผ์–ด๋ณด๋ฉด ์ข‹์€ ์ •๋ณด๋ฅผ ์–ป์„ ๊ฒƒ์ด๋‹ค.

๊ธฐ๋ณธ ํ™˜๊ฒฝ์„ค์ •์ด ๋๋‚ฌ์œผ๋ฉด react-native/Examples/UIExplorer/๋ฅผ ์‹คํ–‰ํ•ด๋ณด์ž.

์ด์œ ๋Š” React Native์—์„œ ์‚ฌ์šฉํ•˜๋Š” Component, API ๊ธฐ๋ณธ ๊ธฐ๋Šฅ๋“ค์„ ํ•˜๋‚˜์”ฉ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

์‹คํ–‰ํ•˜๋Š” ๊ณผ์ •์€ React Native UIExplorer ์„ค์น˜ ๋ฐ ํ™•์ธ(MAC)์„ ์ฐธ๊ณ .

์‹คํ–‰ํ•˜์ง€ ์•Š๊ณ ๋„ USE REACT NATIVE - IOS BASE COMPONENTS์—์„œ๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

3. React์˜ ์ดํ•ด

React Native๋ฅผ ์ง„ํ–‰ํ•˜๋ ค๋ฉด props, state ๋“ฑ ๊ธฐ๋ณธ์ ์ธ React์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

React์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹์ด ์—†์œผ๋ฉด, [React.JS] ๊ฐ•์ขŒ๋ฅผ ํ†ตํ•ด์„œ ๊ธฐ๋ณธ ์ง€์‹์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  React LifeCycle์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๋” ๋•๊ธฐ ์œ„ํ•ด์„œ ๋‹ค์Œ ๋งํฌ๋“ค๋„ ์ฐธ๊ณ ํ•˜์ž.

4. React Native

React Native > Docs์—๋Š” THE BASICS, GUIDES, GUIDES (IOS), GUIDES (ANDROID), COMPONENTS, APIS์œผ๋กœ ์ •๋ฆฌ๋˜์–ด ์žˆ๋‹ค.

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

ํ•ด๋‹น ๊ธ€์€ React Native์—์„œ ์‚ฌ์šฉํ•˜๋Š” Component, API ๋“ค๊ณผ ์Šคํƒ€์ผ์„ ์ž…ํžˆ๋Š” ๋ฐฉ์‹์„ ํ†ตํ•ด์„œ ์›ํ•˜๋Š” ์•ฑ์„ ๋งŒ๋“œ๋Š” ๊ณผ์ •์„ ์„ค๋ช…ํ•˜๊ณ ์ž ํ•œ๋‹ค.

์ฐธ๊ณ ์šฉ ์ƒ˜ํ”Œ ์˜ˆ์ œ๋“ค์€ ๋ชจ๋“  Props, Methods๋ฅผ ํ…Œ์ŠคํŠธํ•˜์ง€๋Š” ์•Š์•˜๋‹ค.

ํ•ด๋‹น ์ƒ˜ํ”Œ์„ clone ํ•ด์„œ ์ƒ˜ํ”Œ์— ์—†๋Š” Props, Method๋“ค์„ ๋‹ค ํ…Œ์ŠคํŠธํ•ด๋ณด๊ธฐ๋ฅผ ๊ถŒ์žฅํ•˜๋ฉฐ, ํ…Œ์ŠคํŠธํ•˜๋ฉด์„œ UIExplorer์˜ ๋‚ด์šฉ๋„ ๊ฐ™์ด ์ฐธ๊ณ ํ•ด๋ณด์ž.

ํ™˜๊ฒฝ์„ค์ •์—์„œ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ๊ณผ run์„ ํ•ด๋ดค์„ ๊ฒƒ์ด๋‹ค.

react-native init ํ”„๋กœ์ ํŠธ๋ช…

์ตœ์ดˆ ์ƒ์„ฑ๋œ ํ”„๋กœ์ ํŠธ์—์„œ iOS๋Š” index.ios.js, ์•ˆ๋“œ๋กœ์ด๋“œ๋Š” index.android.js ํŒŒ์ผ์ด index ํŒŒ์ผ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

React Native์˜ ์žฅ์ ์ด ํ•˜๋‚˜์˜ ์ฝ”๋“œ๋กœ iOS์™€ ์•ˆ๋“œ๋กœ์ด๋“œ๋ฅผ ๋™์‹œ์— ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ index.ios.js, index.android.js ๋™์‹œ์— ์ ์šฉํ•ด์„œ app์ด๋ผ๋Š” ํด๋”๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ƒ˜ํ”Œ ์ž‘์—…๋“ค์„ ํ–ˆ๋‹ค.

import {
    AppRegistry
} from 'react-native';

import { App } from './app';

AppRegistry.registerComponent('ํ”„๋กœ์ ํŠธ๋ช…', () => App);

4.1 COMPONENTS

React Native Component๋Š” React Native Component ์˜ˆ์ œ !!์— ์ •๋ฆฌ๋ฅผ ํ–ˆ๋‹ค.

์ƒ˜ํ”Œ ์˜ˆ์ œ๋“ค์„ ์ฐธ๊ณ ํ•˜๋ฉด์„œ ์›ํ•˜๋Š” ์Šคํƒ€์ผ์„ ํ…Œ์ŠคํŠธํ•ด๋ณด์ž.

xxxxxIOS, xxxxxAndroid์™€ ๊ฐ™์ด iOS, ์•ˆ๋“œ๋กœ์ด๋“œ๋งŒ ์ง€์›ํ•˜๋Š” ๋ถ€๋ถ„๋“ค์€ ์ œ์™ธํ–ˆ์ง€๋งŒ, iOS or ์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ์„ ๋™์‹œ์— ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์•„๋‹Œ ํ•˜๋‚˜๋งŒ ๋งŒ๋“œ๋Š” ๋ถ„๋“ค์€ ํ•ด๋‹น ๋‚ด์šฉ๋„ ๊ผญ ํ…Œ์ŠคํŠธํ•ด๋ณด์„ธ์š”.

4.2 APIS

React Native API๋Š” Component์ฒ˜๋Ÿผ ์ƒ˜ํ”Œ ์ฝ”๋“œ๋ฅผ ๋‹ค ๋งŒ๋“ค๊ณ  ์‹ถ์—ˆ์ง€๋งŒ ๋ฐ”์œ ์—…๋ฌด๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ Docs๋ฅผ ์ •๋ฆฌํ•˜๋Š” ์ˆ˜์ค€์—์„œ ๊ฒฝํ—˜ํ•œ ๋‚ด์šฉ๋“ค์„ ์ถ”๊ฐ€๋กœ ์ž‘์„ฑํ–ˆ๋‹ค. ์•ˆ ์จ๋ณธ API๋“ค๋„ ์žˆ์–ด์„œ ํ•ด๋‹น API๋“ค์€ ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์„ ํ†ตํ•ด์„œ ๋ณต์‚ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ๋ฅผ ํ–ˆ๋‹ค.

React Native API์—์„œ ์ •๋ฆฌ๋œ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

4.3 ์Šคํƒ€์ผ ์ž…ํžˆ๊ธฐ

๊ธฐ๋ณธ์ ์ธ ์ปดํฌ๋„ŒํŠธ๋กœ ์–ด๋Š ์ •๋„ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค๋ฉด ์ด์ œ ํ‘œํ˜„์˜ ๋‹จ๊ณ„์ธ ์Šคํƒ€์ผ์„ ์ž…ํžˆ๋Š” ๊ณผ์ •์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. ๊ธฐ๋ณธ์ ์œผ๋กœ StyleSheet์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•, width์™€ height, flexbox์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

React Native ์Šคํƒ€์ผ ๊ด€๋ จ์— ์ •๋ฆฌ๋ฅผ ํ–ˆ๋‹ค.

CSS Flexbox์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์ž˜ ๋ชจ๋ฅด๊ฒ ์œผ๋ฉด, CSS TRICKS - A Complete Guide to Flexbox๋ฅผ ์ฐธ๊ณ ํ•˜์ž.

4.4 JavaScript Environment

๋ฒ„์ „ 0.5.0๋ถ€ํ„ฐ React Native๋Š” Babel ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

React Native 0.39์˜ JavaScript Environment์—์„œ ES5, 6, 7 ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฌธ๋ฒ•์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

ES6์— ๋Œ€ํ•ด ๋ชจ๋“  ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ๋งŽ์ด ์‚ฌ์šฉํ•  ๊ฒƒ ๊ฐ™์€ ๋‚ด์šฉ์„ ES6 - seye2์— ์ •๋ฆฌํ–ˆ๋‹ค.

5. ์ƒ˜ํ”Œ ์•ฑ ๋งŒ๋“ค๊ธฐ

์œ„์˜ ๋‚ด์šฉ๋“ค์„ ํ† ๋Œ€๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ƒ˜ํ”Œ ์•ฑ์„ ๋งŒ๋“ค์–ด ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๊ณต๊ณต๋ฐ์ดํ„ฐ ํฌํ„ธ API (์ „๊ตญ ์‘๊ธ‰์˜๋ฃŒ๊ธฐ๊ด€ ์กฐํšŒ ์„œ๋น„์Šค), ์œ„์น˜ ์ขŒํ‘œ - ๋‹ค์Œ ์ง€๋„ API๋ฅผ ํ†ตํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์‘๊ธ‰์‹ค ์‹ค์‹œ๊ฐ„ ๊ฐ€์šฉ ๋ณ‘์ƒ์ •๋ณด App๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค.

์•ฑ์„ ๋งŒ๋“œ๋Š” ๊ณผ์ •์—์„œ React Native COMPONENTS์—์„œ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค.

์ด๋Ÿฐ ๊ฒฝ์šฐ ์ง์ ‘ ์•ฑ ๊ฐœ๋ฐœ์„ ํ•ด๋„ ๋˜๊ฒ ์ง€๋งŒ, ๋‚ด๊ฐ€ ํ•„์š”ํ•œ ๋‚ด์šฉ์€ ์ด๋ฏธ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๋„ ํ•„์š”ํ–ˆ์„ ๊ฒƒ์ด๊ณ  ์ž˜ ์ฐพ์•„๋ณด๋ฉด ๋‹ค์–‘ํ•œ ์„œ๋“œํŒŒํ‹ฐ๋“ค์ด ์žˆ์œผ๋‹ˆ ์„ ํƒํ•ด์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

์–ด๋””์— ๋ฌด์—‡์ด ์žˆ๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์œผ๋ฉด, js.coach์˜ react-native์— ๋‹ค์–‘ํ•œ ์„œ๋“œํŒŒํ‹ฐ๋“ค์ด ์žˆ์œผ๋‹ˆ ํ•œ๋ฒˆ ์ญ‰ ๋ณด๊ณ  ๋‚˜์ค‘์— ํ•„์š”ํ•œ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐ€์ ธ๋‹ค ์“ฐ๋ฉด ๋œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ์นด๋ฉ”๋ผ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•ด์„œ react-native-camera๋ฅผ ์ ์šฉํ•˜๋Š” ๊ณผ์ •์— ๋Œ€ํ•ด์„œ React Native ์„œ๋“œํŒŒํ‹ฐ ์ปดํฌ๋„ŒํŠธ ์ ์šฉํ•˜๊ธฐ์— ์ •๋ฆฌํ–ˆ๋‹ค.

6. APK ๋ฐฐํฌ์šฉ ํŒŒ์ผ ๋งŒ๋“ค๊ธฐ

์ƒ˜ํ”Œ ์•ฑ์„ ๋งŒ๋“ค์—ˆ์œผ๋ฉด ์ด์ œ ์šฐ๋ฆฌ๊ฐ€ ํฐ์—์„œ ์ง์ ‘ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋ฐฐํฌ์šฉ ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.

Generating Signed APK์„ ๋ณด๊ณ ํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ…Œ์ŠคํŠธ ๊ณผ์ •์€ React Native - Generating Signed APK์— ์ •๋ฆฌํ–ˆ๋‹ค.

7. Codepush ์ ์šฉํ•˜๊ธฐ

๊ฐœ์ธ์ ์œผ๋กœ ์ƒ๊ฐํ•˜๋Š” React Native๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ์ค‘ ๊ฐ€์žฅ ํฐ ์žฅ์ ์ด Codepush๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

์•ฑ์— ๊ฐ„๋‹จํ•œ ์ˆ˜์ •์ด ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๋งค๋ฒˆ ์•ฑ์„ ๋‹ค์‹œ ๋นŒ๋“œ ํ•ด์„œ ๋ฐฐํฌํ•˜๊ณ  ์žˆ์ง€๋งŒ ์ด๋Ÿฐ ๊ณผ์ •์„ ํš๊ธฐ์ ์œผ๋กœ ์ค„์—ฌ์ฃผ๋Š” ๋‹จ๊ณ„๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

ํ…Œ์ŠคํŠธ ๊ณผ์ •์€ CodePush ์ ์šฉํ•˜๊ธฐ์— ์ •๋ฆฌํ–ˆ๋‹ค.

8. ๊ธฐํƒ€ ์†Œ๊ฐœ

mobile app development tool (Exponent)

React Native๋กœ ์•ฑ์„ ๋งŒ๋“ค๋ฉฐ, Exponent SDK๋Š” ์—ฐ๋ฝ์ฒ˜, ์นด๋ฉ”๋ผ ๋ฐ ์†Œ์…œ ๋กœ๊ทธ์ธ๊ณผ ๊ฐ™์€ ์‹œ์Šคํ…œ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์•ก์„ธ์Šค๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

ReactNative - Exponent์— ์ •๋ฆฌํ–ˆ๋‹ค.

UI ๊ด€๋ จ (NativeBase)

์ž‘์—…์„ ํ•˜๋‹ค ๋ณด๋ฉด Tab, ๋ฒ„ํŠผ ๋“ฑ๋“ฑ ์ˆ˜๋งŽ์€ UI ๊ด€๋ จ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ํ•„์š”ํ•  ๊ฒƒ์ด๋‹ค.

์—ฌ๋Ÿฌ ์ฐธ๊ณ ํ•  ๋งŒํ•œ ์‚ฌ์ดํŠธ ์ค‘์—์„œ NativeBase-KitchenSink v0.5.18์ด ์ œ์ผ ๊ดœ์ฐฎ์€ ๊ฒƒ ๊ฐ™๋‹ค.

์•ฑ์„ ๋‹ค์šด๋กœ๋“œํ•ด์„œ ๋ณธ์ธ์˜ ํฐ์œผ๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ํ•ด๋ณด๊ณ  ์“ธ๋งŒํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์€ ์ปค์Šคํ…€ ํ•ด์„œ ์“ฐ๋˜๊ฐ€ ํ˜น์€ NativeBase๋ฅผ ํ™œ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

Reactnativestudy

react native study

Reactnativestudy Info

โญ Stars 63
๐Ÿ”— Source Code github.com
๐Ÿ•’ Last Update a year ago
๐Ÿ•’ Created 6 years ago
๐Ÿž Open Issues 0
โž— Star-Issue Ratio Infinity
๐Ÿ˜Ž Author kjk7034