blog.holy.kiwi

๐Ÿฅ react-native ์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ ์•ฑ ๊ฐœ๋ฐœ๊ธฐ

January 27, 2019 โ€ข โ˜•๏ธโ˜•๏ธโ˜•๏ธ 13 min read

190127_intro

์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ ์•ฑ ๊ตฐ๋Œ์ด

2018๋…„ 9์›” 3์ผ์— ์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ ์•ฑ ๊ตฐ๋Œ์ด๋ฅผ ๊ตฌ๊ธ€ ํ”Œ๋ ˆ์ด์Šคํ† ์–ด์— ์ฒ˜์Œ์œผ๋กœ ๋Ÿฐ์นญํ•˜๊ณ , ๊ทธ๋กœ๋ถ€ํ„ฐ 6์ผ ํ›„์ธ 9์›” 9์ผ์— ์ถ”๊ฐ€๋กœ ์• ํ”Œ ์•ฑ์Šคํ† ์–ด์— ๋Ÿฐ์นญํ–ˆ๋‹ค. ๋Ÿฐ์นญํ•œ ์ดํ›„๋กœ ์–ด๋–ค ๋ธ”๋กœ๊ทธ ํ”Œ๋žซํผ์ด๋˜ react-native๋กœ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์•ˆ๋“œ๋กœ์ด๋“œ์™€ iOS ํ”Œ๋žซํผ์— ๋ชจ๋‘ ๋Ÿฐ์นญํ–ˆ๋˜ ์ด์•ผ๊ธฐ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค. (๋ณ„๊ฑฐ ์•„๋‹Œ ์•ฑ์ด์ง€๋งŒโ€ฆ) ํ•˜์ง€๋งŒ ๊ท€์ฐจ๋‹ˆ์ฆ˜์œผ๋กœ ์ž‘์„ฑํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ตฐ๋Œ์ด ์•ฑ์˜ ๋งŒ ๋ช… ์„ค์น˜๋ฅผ ํ•‘๊ณ„๋กœ react-native๋กœ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•œ ํ›„๊ธฐ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๋ คํ•œ๋‹ค.

๐Ÿ’ซ ์‹œ์ž‘

์šฐ์„ , ๋‚ด๊ฐ€ ๊ฐœ๋ฐœํ•œ ์•ฑ์„ ์†Œ๊ฐœํ•˜๊ฒ ๋‹ค. ๊ฐ„๋‹จํžˆ ์ „์—ญ์ผ์„ ๊ณ„์‚ฐํ•  ์ˆ˜ ์žˆ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋‹ค. ๋‹ค๋ฅธ ์•ฑ๊ณผ์˜ ์ฐจ๋ณ„์ ์„ ๋‘” ๊ฒƒ์€ ์˜ˆ์˜๊ณ  ์‹ฌํ”Œํ•œ ๋””์ž์ธ๊ณผ ์‚ฌ์šฉ์„ฑ์ด๋‹ค. ํ˜„์—ญ ์ƒํ™œ ๋•Œ ์‚ฌ์šฉํ•œ ํƒ€ ์•ฑ์€ ๋งŽ์€ ์œ ์ €๋“ค์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋ฐ˜ํ•ด ์‚ฌ์šฉ์„ฑ์ด ๋งŽ์ด ๋ถ€์กฑํ•˜๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ง์ ‘ ์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ ์•ฑ์„ ๊ฐœ๋ฐœํ•ด์„œ ํ˜„์—ญ ๊ตฐ์ธ๋“ค๊ณผ ๊ณ ๋ฌด์‹ ๋ถ„๋“ค, ๋ถ€๋ชจ๋‹˜๋“ค์ด ๋” ์˜ˆ์˜๊ณ  ์‹ฌํ”Œํ•œ ๋””์ž์ธ์˜ ์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค. ๋ฌผ๋ก  ๋””์ž์ธ์€ ๋˜ฅ์†์ธ ๋‚ด๊ฐ€ ํ•˜์ง€ ์•Š์•˜๊ณ  ๊ธˆ์† ๋””์ž์ด๋„ˆ GOM๋‹˜์ด ํŒ€์›์œผ๋กœ์จ ๋„์™€์ฃผ์…จ๋‹ค. (๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๐Ÿฅ)

๋Ÿฐ์นญํ•œ์ง€ ๋Œ€๋žต 4๊ฐœ์›”์ด ์ง€๋‚˜์ง€ ์•Š์•˜๋Š”๋ฐ 2019๋…„ 1์›” 25์ผ ๊ธˆ์š”์ผ ๊ธฐ์ค€ ์•ˆ๋“œ๋กœ์ด๋“œ 3,400๋ช… ์„ค์น˜, iOS 6,600๋ช…์ด ์„ค์น˜ํ•˜์—ฌ ์ด 10,000๋ช…์˜ ์œ ์ €๊ฐ€ ์„ค์น˜ํ–ˆ๊ณ , ํ•˜๋ฃจ์— 1,000๋ช… ~ 1,300๋ช… ์ •๋„๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ ์•ฑ์ด ๋˜์—ˆ๋‹ค. ๊ตฌ๊ธ€ ํ”Œ๋ ˆ์ด์Šคํ† ์–ด์˜ ASO๊ฐ€ ๋” ์ข‹์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์•ฑ์Šคํ† ์–ด์˜ ์„ค์น˜๋Ÿ‰์ด ํ•ญ์ƒ ๋” ์ข‹์€ ๊ฒƒ์ด ์•ฝ๊ฐ„ ๋†€๋ผ์› ๋Š”๋ฐ ์•„๋งˆ ์ Š์€ ์ธต์˜ ์—ฌ์„ฑ๋ถ„๋“ค์ด ์•„์ดํฐ์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋ฆฌ๋ผ ์ง์ž‘ํ–ˆ๋‹ค. ํšŒ์‚ฌ์— ๋‹ค๋‹ˆ๋ฉด์„œ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋กœ ํ‡ด๊ทผํ•˜๊ณ  ์ €๋…์— ๊ทธ๋ฆฌ๊ณ  ์ฃผ๋ง์— ํ‹ˆํ‹ˆ์ด ์ž‘์—…ํ•œ ์•ฑ์„ ์ƒ๊ฐ๋ณด๋‹ค ๋งŽ์€ ๋ถ„๋“ค์ด ์‚ฌ์šฉํ•ด์ฃผ์…”์„œ ์—„์ฒญ ๋ณด๋žŒ ์žˆ์—ˆ๋‹ค. ๋Œ€๋žต ์•ฑ์„ ๋งŒ๋“ค๊ณ  ์ฒ˜์Œ ๋ฐฐํฌํ•˜๊ธฐ๊นŒ์ง€ ๋ณด๋ฆ„ ์ •๋„ ๊ฑธ๋ ธ๋Š”๋ฐ ๊ทธ ๊ณผ์ •๊ณผ ์‚ฌ์šฉํ–ˆ๋˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋“ฑ ๊ทธ๋ฆฌ๊ณ  RN์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋Š๊ผˆ๋˜ ์žฅ์ , ๋‹จ์  ์ •๋„๋ฅผ ์จ๋ณด๊ฒ ๋‹ค.

190127_appstoreconnect

์•ฑ์Šคํ† ์–ด ํŒ๋งค๋Ÿ‰

190127_firebase

ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์• ๋„๋ฆฌํ‹ฑ์Šค ๋Œ€์‰ฌ๋ณด๋“œ

โš› ์™œ react-native๋กœ ๊ฐœ๋ฐœํ•˜์˜€๋‚˜

์ฒ˜์Œ์—๋Š” ํŒจ๊ธฐ์— ๊ฐ€๋“์ฐจ์„œ ๊ฐ„๋‹จํ•œ ์•ฑ์ด๋‹ˆ swift๋กœ iOS ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ณ , java๋‚˜ kotlin์œผ๋กœ ์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋ฉด ๋˜๊ฒ ๋‹ค์‹ถ์–ด์„œ swift๋กœ ์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ ์•ฑ์„ ๊ตฌ์ƒํ•˜๊ณ  ํ”„๋กœํ† ํƒ€์ž…์„ ๊ฐœ๋ฐœํ•ด๋ณด์•˜๋‹ค. ๊ฐ„๋‹จํ•  ์ค„ ์•Œ์•˜์ง€๋งŒ date ๊ณ„์‚ฐ ๋“ฑ swift์˜ ์–ธ์–ด์  ํŠน์ง•์— ๋งŽ์ด ์ต์ˆ™ํ•˜์ง€ ์•Š์•„ ๋งŽ์€ ๋‚œํ•ญ์„ ๊ฒช์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ž์—ฐ์Šค๋ ˆ javascript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” react-native์— ๋ˆˆ์„ ๋Œ๋ฆฌ๊ฒŒ ๋˜์—ˆ๋‹ค. react์™€ javascript์—๋Š” ์›ฌ๋งŒํผ ์ž์‹ ์ด ์žˆ์—ˆ๊ณ  ํ•œ ๋ฒˆ ๊ฐœ๋ฐœํ•ด๋†“์œผ๋ฉด iOS์™€ ์•ˆ๋“œ๋กœ์ด๋“œ, ๋‘ ํ”Œ๋žซํผ์—์„œ ์ž‘๋™ํ•˜๊ธฐ ๋•Œ๋ฌธ์— react-native๋Š” ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๊ธฐ์— ์ตœ๊ณ ์˜ ์„ ํƒ์ด์—ˆ๋‹ค.

react-native ๊ณต์‹ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•ด ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๊ฐœ๋ฐœํ–ˆ๋Š”๋ฐ ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํ•˜๋“ฏ์ด ๋ชจ๋ฐ”์ผ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ์‹ ์„ธ๊ณ„์˜€๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ expo๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ตณ์ด ํ…Œ์ŠคํŠธ ๊ธฐ๊ธฐ๋ฅผ ์œ ์„ ์œผ๋กœ ์—ฐ๊ฒฐํ•˜์ง€ ์•Š๊ณ , expo ์•ฑ์„ ์„ค์น˜ํ•ด์„œ QR์ฝ”๋“œ๋กœ ์ธ์‹ํ•˜๋ฉด ๋‚ด๊ฐ€ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š” ์•ฑ์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ™•์ธํ•ด๋ณด๋ฉฐ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์–ด์„œ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์ง์ ‘ ๊ฐœ๋ฐœํ•  ๋•Œ์™€๋Š” ์ƒ์‚ฐ์„ฑ๊ณผ ํŽธ์˜์„ฑ์ด ๋ง๋„ ์•ˆ๋˜๊ฒŒ ์ฐจ์ด๊ฐ€ ๋‚ฌ๋‹ค. ์ด๋ž˜์„œ RN RN ํ•˜๋Š” ๊ตฌ๋‚˜ ๋Š๊ผˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ชจ๋ฐ”์ผ ์•ฑ์˜ ๋ฐ˜์‘ํ˜• ๋””์ž์ธ์„ ๋‚ด๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” CSS์˜ flexbox๋ฅผ ์‚ฌ์šฉํ•ด ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ ๋•Œ๋ฌธ์— ๋งค๋ ฅ์ ์ด์—ˆ๋‹ค. ๊ฐœ๋ฐœ๊ฒฝํ—˜์— ์žˆ์–ด์„œ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ๊ฐœ๋ฐœํ•œ๋‹ค๋Š” ๋Š๋‚Œ๋ณด๋‹ค๋Š” ์›น๋ทฐ๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋Š๋‚Œ์ด์ง€๋งŒ react-native๋Š” ๋„ค์ดํ‹ฐ๋ธŒ API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ ์ง์ ‘ ๋ Œ๋”๋งํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋„ค์ดํ‹ฐ๋ธŒ์™€ ์œ ์‚ฌํ•œ ์„ฑ๋Šฅ, ์‚ฌ์šฉ์„ฑ์„ ๋ณด์—ฌ์ค€๋‹ค.

โš’ ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ค์ •

์ฒ˜์Œ์—๋Š” ์œ„์—์„œ ๋งํ–ˆ๋“ฏ์ด expo๋ผ๋Š” react-native๋ฅผ ํŽธํ•˜๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์„œ๋“œํŒŒํ‹ฐ ํˆด์„ ์‚ฌ์šฉํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ ์  ๋” ๋งŽ์€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋ฉด์„œ expo์˜ ํ•œ๊ณ„๋ฅผ ๋Š๊ผˆ๋‹ค. ์ผ๋‹จ ์•ฑ์˜ ์šฉ๋Ÿ‰์ด ๋น„์ •์ƒ์ ์œผ๋กœ ์ปธ๊ณ , ๋ฌด์—‡๋ณด๋‹ค ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋“ˆ์„ react-native link ํ•  ์ˆ˜ ์—†๋‹ค๋Š”๊ฒŒ ์—„์ฒญ๋‚œ ๋‹จ์ ์ด์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฒฐ๊ตญ expo eject ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด expo๋ฅผ ๋–ผ์–ด๋ƒˆ๋‹ค. ๋–ผ์–ด๋‚ด๋ ค๋ฉด ํž˜๋“ค์ค„ ์•Œ์•˜๋Š”๋ฐ expo ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์“ฐ์ง€ ์•Š์•„์„œ ๊ทธ๋Ÿฐ์ง€ ์ € ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ejectํ•˜๊ณ  ๋นŒ๋“œ๋„ ์ž˜๋˜์—ˆ๋˜ ๊ธฐ์–ต์ด ๋‚œ๋‹ค. ์œ„ ๊ฒฝํ—˜์„ ํ†ตํ•ด ์ฒ˜์Œ๋ถ€ํ„ฐ ์›ฌ๋งŒํ•˜๋ฉด expo๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ํŒ๋‹จํ•˜์—ฌ ๋‹ค์Œ RN ํ”„๋กœ์ ํŠธ๋ถ€ํ„ฐ๋Š” expo๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋‹ค. ๋‹ค๋ฅธ ๋ถ„๋“ค์—๊ฒŒ๋„ ๊ทธ๋ ‡๊ฒŒ ์ถ”์ฒœํ•˜๊ณ  ์žˆ๋‹ค.

๋˜ํ•œ, ์ถ”๊ฐ€์ ์œผ๋กœ ์ •์  ํƒ€์ดํ•‘์„ ์œ„ํ•ด typescript๋ฅผ ์‚ฌ์šฉํ•˜์˜€๊ณ , ๋” ํŽธํ•œ ์Šคํƒ€์ผ๋ง์„ ์œ„ํ•ด styled-components๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฒ˜์Œ์—๋Š” ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ redux๋ฅผ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ mobx์˜ ๊ฐ„ํŽธ์„ฑ์— ๋ฐ˜ํ•ด์„œ ์ค‘๊ฐ„์— mobx๋กœ ๋œฏ์–ด๊ณ ์น˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์ณ์„œ ์ข€ ๋นก์…Œ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ ์„ธํŒ…ํ•  ๋•Œ, ์ •๋ง ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๊ณ  ๋งค๋ฒˆ ์ฐพ๋Š”๊ฒŒ ๋ฒˆ๊ฑฐ๋กœ์›Œ์„œ react-native-awesome-starter๋ผ๋Š” ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ด์„œ ์ดˆ๊ธฐ์— RN์˜ ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ธํŒ…ํ•˜๋Š” ๋ฐฉ๋ฒ•๋“ค์„ ์ •๋ฆฌํ•ด๋†“์•˜๋‹ค.

๐Ÿ’ป ๊ฐœ๋ฐœ ๊ณผ์ •

190127_dev

๊ตฐ๋Œ์ด ์ดˆ์•ˆ(์™ผ์ชฝ)๊ณผ ํ”„๋กœํ† ํƒ€์ž…(์˜ค๋ฅธ์ชฝ)

์‚ฌ์‹ค ์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ ์•ฑ์— ๊ธฐ๋Šฅ์ด ๋งŽ์ด ์—†์–ด์„œ ๊ณผ์ •์ด๋ž„๊ฒŒ ์žˆ์„๊นŒ ์‹ถ๊ธด ํ•˜์ง€๋งŒ ๊ฐ„๋‹จํžˆ ์จ๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค. ์šฐ์„  ๋‹ค๋ฅธ ์•ฑ๋“ค์„ ๋ฒค์น˜๋งˆํ‚นํ•˜๊ณ  ์–ด๋–ค ๋‚ด์šฉ๋“ค์„ ์–ด๋–ป๊ฒŒ ํ‘œ์‹œํ•˜๋ฉด ์ข‹์„์ง€ ์ƒ๊ฐ์„ ํ•ด์„œ ์กฐ์žกํ•˜๊ฒŒ wireframe ์‚ผ์•„์„œ ์Šค์ผ€์น˜๋กœ ๋Œ€์ถฉ ๊ทธ๋ ค๋ณด์•˜๋‹ค. ๋ฐ”๋กœ ์œ„์˜ ์™ผ์ชฝ ์‚ฌ์ง„์ด๋‹ค. ํ˜„์žฌ์˜ ๋””์ž์ธ๊ณผ ์™„์ „ ๋‹ค๋ฅด๋‹คโ€ฆ! (๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋””์ž์ด๋„ˆ๋‹˜, ์ €๋Ÿฐ garbage๋ฅผ ์‹ฌํ์†Œ์ƒ์ˆ ์‹œ์ผœ์ฃผ์…”์„œ ใ…Žใ…Ž) wireframe์„ ๊ฐ€์ง€๊ณ  react-native๋กœ ์•ฑ ๊ตฌ์กฐ๋ฅผ ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑํ• ์ง€ ๊ณ ๋ฏผํ•˜๊ณ  ํ”„๋กœํ† ํƒ€์ž…(์˜ค๋ฅธ์ชฝ ์‚ฌ์ง„)์„ ๊ฐœ๋ฐœํ–ˆ๋‹ค. ๊ทธ ํ›„, ๋””์ž์ด๋„ˆ๋‹˜๊ป˜ ํ”„๋กœํ† ํƒ€์ž…์„ ๋“œ๋ฆฌ๊ณ  ๋ฐ”๋กœ ๋งจ ์œ„์˜ ์Šคํฌ๋ฆฐ์ƒท๊ณผ ๊ฐ™์€ ๋””์ž์ธ์„ ์ฃผ์…จ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ๋ฅผ ๊ทธ๋ž˜๋„ ์ž˜ ํ•ด๋†“์•„์„œ ๋””์ž์ธ์„ ์‹œ์•ˆ๋Œ€๋กœ ๊ทธ๋ฆฌ๋Š” ๊ฒƒ์€ ์‰ฝ๊ฒŒ ํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํŽธ์ง‘ ํ™”๋ฉด๋„ ๋ชจ๋‹ฌ๋กœ ์ถ”๊ฐ€ํ•ด์„œ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ”์—ˆ๋‹ค.

๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ”์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ ํ›„, ๊ตฌ๊ธ€ ํ”Œ๋ ˆ์ด์Šคํ† ์–ด์™€ ์•ฑ์Šคํ† ์–ด ๊ฐœ๋ฐœ์ž ๊ณ„์ •์„ ๊ตฌ์ž…ํ•ด์„œ ๋ฐฐํฌ ์ค€๋น„๋ฅผ ํ–ˆ๋‹ค. ๊ฐœ๋ฐœ์ž ๊ณ„์ •์ด ๋น„์Œˆ์—๋„ ๊ตณ์ด ๋นจ๋ฆฌ ๊ตฌ์ž…์„ ํ•ด์„œ ์ถ”์ง„ํ–ˆ๋˜ ์ด์œ ๋Š” ์ ˆ๋ฐ•ํ•จ์„ ๋งŒ๋“ค์ง€ ์•Š์œผ๋ฉด ํ”„๋กœ์ ํŠธ๊ฐ€ ๋Š์Šจํ•ด์งˆ ๊ฒƒ ๊ฐ™์•˜๊ณ  ์ถœ์‹œ๊ฐ€ ๊ณ„์† ๋”๋ŽŒ์งˆ ๊ฒƒ ๊ฐ™์•„์„œ์˜€๋‹ค. ์ผ๋‹จ ๋‚ด ๋ชฉํ‘œ๋Š” ๊ธฐ๋ณธ ๊ธฐ๋Šฅ๋งŒ ๊ฐ€์ง„ ์˜ˆ์˜๊ณ  ์‹ฌํ”Œํ•œ ์ „์—ญ์ผ๊ณ„์‚ฐ๊ธฐ ์•ฑ์„ ๋งŒ๋“ค๊ณ  ๊ทธ ํ›„์— ๋ฒ„๊ทธ๋„ ๊ณ ์น˜๊ณ  ๊ธฐ๋Šฅ๋„ ์ถ”๊ฐ€ํ•  ๊ณ„ํš์ด์—ˆ๋‹ค. ํ‡ด๊ทผ ํ›„์˜ ์ €๋…๊ณผ ์ฃผ๋ง์„ ๋ฐ˜๋‚ฉํ•˜์—ฌ ๋ณด๋ฆ„๋งŒ์— ๋š๋”ฑ ๊ฐœ๋ฐœ์„ ๋งˆ์น˜๊ณ  ํ”Œ๋ ˆ์ด์Šคํ† ์–ด์™€ ์•ฑ์Šคํ† ์–ด์— ๋Ÿฐ์นญํ–ˆ๋‹ค. (์• ํ”Œ์€ ์‹ฌ์‚ฌ๊ฐ€ ์˜ค๋ž˜ ๊ฑธ๋ ค์„œ 6์ผ ์ •๋„ ํ›„์— ์ถœ์‹œํ–ˆ๋‹ค.)

์•ฑ์Šคํ† ์–ด๊นŒ์ง€ ์ถœ์‹œํ•œ ํ›„, ๋„ค์ด๋ฒ„ ๊ณฐ์‹  ์นดํŽ˜์— ๋“ค์–ด๊ฐ€์„œ ๊ตฐ๋Œ์ด ์•ฑ ํ™๋ณด๋ฅผ ํ–ˆ๋‹ค. ์ƒ๊ฐ๋ณด๋‹ค ๋ฐ˜์‘์ด ๋œจ๊ฑฐ์› ๋‹ค. ๋””์ž์ธ์ด ์˜ˆ์˜๊ณ  ์‹ฌํ”Œํ•˜๋‹ค๋ฉฐ ์ข‹์•„ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„์„œ ๊ฐœ๋ฐœํ•œ ๋ณด๋žŒ์ด ์žˆ์—ˆ๊ณ  ์ฆ๊ฑฐ์› ๋‹ค. ์ด ๋•Œ, ๋ฒ„๊ทธ๊ฐ€ ๋งŽ์ด ๋ฐœ๊ฒฌ๋˜์—ˆ๋Š”๋ฐ๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋งŽ์€ ์œ ์ €๋ถ„๋“ค์ด ๋ฒ„๊ทธ๋ฆฌํฌํŠธ๋„ ํ•ด์ฃผ์‹œ๊ณ  ์˜๊ฒฌ ์ œ์•ˆ๋„ ๋งŽ์ด ํ•ด์ฃผ์…”์„œ ํญํ’ ์ˆ˜์ •ํ•˜๊ณ  ๋ฐ”๋กœ ๋ฐฐํฌํ•˜๋Š” ๋“ฑ ์œ ์ €์™€ ์†Œํ†ตํ•˜๊ณ  ์—ด์‹ฌํžˆ ํ•˜๋Š” ๋ชจ์Šต์„ ๋ณด์—ฌ์ฃผ๋ ค ์• ์ผ๋‹ค. ์ฒซ ์ถœ์‹œ ์ดํ›„, ์˜ˆ๋‹๊ณฑ ๋ฒˆ์˜ ๊พธ์ค€ํ•œ ๋ฐฐํฌ๋ฅผ ํ†ตํ•ด ๋ฒ„๊ทธ ์ˆ˜์ • ๋ฐ ๊ธฐ๋Šฅ ์ถ”๊ฐ€๋ฅผ ํ–ˆ๊ณ  ๊ทธ ๊ฒฐ๊ณผ๋กœ ๋งŒ ๋ช…์˜ ์œ ์ €๊ฐ€ ์„ค์น˜ํ•œ ๊ฒƒ์„ ๋ณด๊ฒŒ ๋˜์–ด ๊ฐ์‚ฌํ•˜๊ณ  ๊ฐํšŒ๊ฐ€ ์ƒˆ๋กญ๋‹ค. ๊ณ„์† ์žฌ๋ฐŒ๋Š” ๊ธฐ๋Šฅ๋“ค์„ ๋งŽ์ด ์ถ”๊ฐ€ํ•ด์„œ ๊ตฐ๋Œ์ด ์•ฑ์„ ํ‚ค์›Œ๋‚˜๊ฐ€๊ณ  ์‹ถ๋‹ค. ๐Ÿฅ

๊ณผ์ •์€ ์—ฌ๊ธฐ๊นŒ์ง€๋กœ ํ•˜๊ณ  ๋ฐ‘์—์„œ๋ถ€ํ„ฐ๋Š” ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…, ์ถ”์ฒœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ์žฅ๋‹จ์  ๋“ฑ์„ ๊ณต์œ ํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

๐ŸŒ  ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…

react-native๋ฅผ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ iOS๋Š” x-code์—์„œ ์ง์ ‘ ๋นŒ๋“œํ•˜๊ณ , ์•ˆ๋“œ๋กœ์ด๋“œ๋Š” ์•ˆ๋“œ๋กœ์ด๋“œ ์ŠคํŠœ๋””์˜ค์—์„œ ์ง์ ‘ ๋นŒ๋“œํ•  ์ผ์ด ๋งŽ์•˜๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฌ๋Ÿฌ ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ์‚ฝ์งˆํ•  ์ผ์ด ์ •๋ง ๋งŽ์•˜๋‹ค. ๋นŒ๋“œ ์—๋Ÿฌ๊ฐ€ ์ •๋ง ๋งŽ์ด ๋‚ฌ๋‹ค. ๊ทธ๋ž˜์„œ ์งง์€ ๊ธฐ๊ฐ„๋™์•ˆ RN์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋ฐœ์ƒํ–ˆ๋˜ ์—๋Ÿฌ๋“ค์„ react-native-trouble-shooting ๋ ˆํฌ์ง€ํ† ๋ฆฌ์— ์ •๋ฆฌํ•ด๋†“์•˜๋‹ค.

ํ˜น์‹œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค๋ฉด ์ฐธ๊ณ ํ•ด์ฃผ์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ ˆํฌ์ง€ํ† ๋ฆฌ์— Trouble Shooting์ด๋ผ๋ฉด Pull Request ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ตœ๊ทผ์— ๊ฐ€์žฅ ๊ธฐ์–ต์ด ๋‚จ๋Š” ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ… ์ค‘์— ํ•˜๋‚˜๋Š” iOS ์œ„์ ฏ์„ ๊ฐœ๋ฐœํ•  ๋•Œ์˜€๋‹ค. ์œ ์ €๋ถ„๋“ค์˜ ์œ„์ ฏ ๊ธฐ๋Šฅ ์š”์ฒญ์ด ๋„ˆ๋ฌด ๋งŽ์•„์„œ ํฐ ๋ถ€๋‹ด์„ ๊ฐ–๊ณ  ์œ„์ ฏ ๊ธฐ๋Šฅ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์œ„์ ฏ ์ต์Šคํ…์…˜์—์„œ ์•ฑ์— ์ €์žฅ๋˜์–ด์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ถ€๋ถ„์ด ์ •๋ง ์–ด๋ ค์› ๊ณ , ๋ช‡ ์ฃผ์งธ ์‚ฝ์งˆ๋งŒ ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค. iOS์˜ ์œ„์ ฏ์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‹น์—ฐํžˆ iOS ๊ฐœ๋ฐœ ๊ด€๋ จ ์ง€์‹๋„ ํ•„์š”ํ–ˆ๊ณ , ๊ณ„์† digging์„ ํ–ˆ๋‹ค. ์ผ๋‹จ RN์—์„œ iOS์˜ ์œ„์ ฏ์„ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด react-native-today-widget ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ–ˆ๊ณ , ๊ตฐ๋Œ์ด ์•ฑ์˜ ๋ฉ”์ธ๊ณผ today widget extension ๊ฐ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•˜๋ ค๋ฉด iOS์˜ App Group์ด๋ผ๋Š” ๊ฐœ๋…์„ ์‚ฌ์šฉํ•ด์•ผ ํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ react-native-shared-group-preferences ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋„ ์‚ฌ์šฉํ•ด์•ผํ–ˆ๋‹ค. ์œ„์ ฏ ์ฝ”๋“œ์—์„œ SharedGroupPreferences๋ฅผ importํ•˜๊ณ  getItem์ด๋ผ๋Š” static ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ–ˆ๋Š”๋ฐ getItem์ด๋ผ๋Š” ํ•จ์ˆ˜๋Š” ์ฝ˜์†”์— ์ž˜์ฐํžˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ–ˆ์ง€๋งŒ ์ •์ž‘ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” SharedGroupPreferences๊ฐ€ undefined๋ผ๋Š” ์—๋Ÿฌ๊ฐ€ ๋‚˜์˜ค๋Š” ์ƒํ™ฉ์ด์–ด์„œ ์ง„์งœ ํฌ๊ธฐํ•˜๊ธฐ ์ผ๋ณด ์ง์ „์ด์—ˆ๋‹ค. ๋งŽ์€ ๊ฒƒ์„ ์‹œ๋„ํ•ด๋ณด์•˜๊ณ  ๋งŽ์€ ์‹œ๊ฐ„์ด ํ˜๋ €๋‹ค. ์ง€ํ‘ธ๋ผ๊ธฐ๋ฅผ ์žก๋Š” ์‹ฌ์ •์œผ๋กœ ํ•ด๋‹น ๋ ˆํฌ์ง€ํ† ๋ฆฌ์˜ ์ด์Šˆ๋ฅผ ๋ณด์•˜๋Š”๋ฐ ๋‚ด ์ƒํ™ฉ๊ณผ ๋น„์Šทํ•œ ์ด์Šˆ๊ฐ€ ์žˆ์—ˆ๋‹ค. ๋‹ต๋ณ€ ์ค‘ ํ•˜๋‚˜๊ฐ€ link๊ฐ€ ์•ˆ๋˜์—ˆ์„ ๊ฒƒ์ด๋ผ๋Š” ๋‹ต๋ณ€์ด์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‚˜๋Š” link๊ฐ€ ์ž˜๋˜์–ด์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•ด์„œ ๊ทธ ๋ฌธ์ œ๋Š” ์•„๋‹ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๊ฒŒ ์˜ค์‚ฐ์ด์—ˆ๋‹ค. ์•ฑ ๋ฉ”์ธ์—๋Š” ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ link๋˜์–ด์žˆ์—ˆ์ง€๋งŒ today widget extension์—๋Š” ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ link๊ฐ€ ์•ˆ๋˜์–ด์žˆ์—ˆ์–ด์„œ SharedGroupPreferences๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์—ˆ๋˜ ๊ฒƒ์ด๋‹ค. today widget extension์— react-native-shared-group-preferences ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ง์ ‘ linkํ•˜๋‹ˆ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ–ˆ๋‹ค! ๋‹คํ–‰ํžˆ ๋ฌธ์ œ์— ๋Œ€ํ•œ solution์„ ๋ฐœ๊ฒฌํ•˜๊ณ  ๋‹ค๋ฆฌ ์ญ‰ ๋ป—๊ณ  ์ž˜ ์ˆ˜ ์žˆ์—ˆ๋‹ค. โ˜ ๋‚ด๊ฐ€ ๋‚จ๊ธด ๋Œ“๊ธ€

๐Ÿ™‹ ๊ผญ ์จ์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

Microsoft์—์„œ ๋งŒ๋“  code push๋Š” react-native๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ์—๋„ ํฌํ•จ๋˜์–ด์žˆ์„ ์ •๋„๋กœ ์•„์ฃผ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์ด๋‹ค. ๋„ค์ดํ‹ฐ๋ธŒ ๋ฐ”์ด๋„ˆ๋ฆฌ ํŒŒ์ผ์˜ ์—…๋ฐ์ดํŠธ ์—†์ด ๊ฐ„๋‹จํ•œ ๋ช…๋ น์–ด๋งŒ์œผ๋กœ ์•ฑ์„ ์—…๋ฐ์ดํŠธ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด๋‹ค. code push์˜ ์›๋ฆฌ๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ํŒŒ์ผ์—์„œ ๋กœ์ปฌ์ด ์•„๋‹Œ code push ์„œ๋ฒ„์— ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒˆ๋“ค ํŒŒ์ผ์„ ๋ฐ”๋ผ๋ณด๊ณ  ์žˆ๋‹ค๊ฐ€ ๊ฐœ๋ฐœ์ž๊ฐ€ code push ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒˆ๋“ค ํŒŒ์ผ์„ ๊ต์ฒดํ•˜๋ฉด ์•ฑ์ด ์—…๋ฐ์ดํŠธ๋œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ์›๋ฆฌ์ด๋‹ค. ๋ฌผ๋ก , ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋“ˆ์„ ์ถ”๊ฐ€ํ•œ ๊ฒƒ์€ ์ฝ”๋“œ ํ‘ธ์‰ฌ๋กœ ์ ์šฉ์ด ์•ˆ๋œ๋‹ค. ๊ทธ ๋•Œ์—๋Š” ์ง์ ‘ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•ด์ค˜์•ผํ•œ๋‹ค. ํ•˜์ง€๋งŒ ๊ณ„์† ์ฝ”๋“œ ํ‘ธ์‰ฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฑด ์ข‹์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๋ฐ”์ด๋„ˆ๋ฆฌ๋ฅผ ์–ผ๋งˆ๋‚˜ ๊พธ์ค€ํžˆ ์—…๋ฐ์ดํŠธํ•˜๋Š” ์ง€๋„ ASO์— ์˜ํ–ฅ์ด ๋ฏธ์ณ์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

react-native์—์„œ firebase๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ๋‚ด๊ฐ€ ์ฃผ๋กœ ์‚ฌ์šฉํ•œ ๋ถ€๋ถ„์€ analytics์˜ event์ด๋‹ค. ์œ ์ €๊ฐ€ ํŠน์ • ์•ก์…˜์„ ์ทจํ–ˆ์„ ๋•Œ, firebase์—์„œ event๋ฅผ trackingํ•ด์„œ ์œ ์ €๊ฐ€ ์–ด๋–ค ํ”Œ๋กœ์šฐ๋ฅผ ์ทจํ•˜๋Š”์ง€ ๋ณผ ์ˆ˜ ์žˆ๊ณ , funnel์„ ํ†ตํ•ด ์–ด๋””์„œ bounce rate(์ดํƒˆ๋ฅ )๊ฐ€ ๋งŽ์ด ๋ฐœ์ƒํ•˜๋Š”์ง€ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋“ฑ ์ œ๊ณตํ•˜๋Š” ํ†ต๊ณ„ ๊ธฐ๋Šฅ์ด ๋งŽ๋‹ค. ์œ„์˜ firebase ์Šคํฌ๋ฆฐ์ƒท์€ analytics์˜ ๋Œ€์‰ฌ๋ณด๋“œ์ด๋‹ค. ์ถ”๊ฐ€์ ์œผ๋กœ admob์„ ์‚ฌ์šฉํ•ด ๊ด‘๊ณ  ๋ฐฐ๋„ˆ๋ฅผ ๋‹ฌ ์ˆ˜ ์žˆ๋Š”๋ฐ, react-native-firebase๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๋” ํŽธ๋ฆฌํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ๊ฒŒ ์ œ๊ณตํ•ด์ฃผ๋Š” react-native-admob์„ ์‚ฌ์šฉํ–ˆ๋‹ค. ๋˜ํ•œ cloud messaging์„ ํ†ตํ•ด ํ‘ธ์‰ฌ ์•Œ๋ฆผ์„ ๋ณด๋‚ด๋Š” ๊ธฐ๋Šฅ์„ ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ์ง€๋งŒ ํ•œ ๋ฒˆ ์‚ฝ์งˆํ•˜๋‹ค๊ฐ€ ์•ˆ๋˜์„œ ๋ณด๋ฅ˜์ค‘์ด๋‹ค. ์–ด์จŒ๋“  analytics ๊ธฐ๋Šฅ๋งŒ์œผ๋กœ๋„ invertase ํŒ€์˜ react-native-firebase ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” react-native๋ฅผ ํ•œ๋‹ค๋ฉด ๊ผญ ์จ์•ผํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

react-native-fast-image ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” react-native์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” <Image /> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๋˜์ง€๋งŒ react-native-fast-image์˜ <FastImage />๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ฆ„ ๊ทธ๋Œ€๋กœ ๋” ๋น ๋ฅด๊ฒŒ ์ด๋ฏธ์ง€๋ฅผ ๋ Œ๋”ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฃผ๊ธฐ๋Šฅ์œผ๋กœ๋Š” ์ด๋ฏธ์ง€ ์บ์‰ฌํ•˜๊ธฐ, authorization headers๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ, ์ด๋ฏธ์ง€ ๋ฏธ๋ฆฌ ๋กœ๋“œํ•˜๊ธฐ, ์ด๋ฏธ์ง€ ์šฐ์„ ์ˆœ์œ„ ๋งค๊ธฐ๊ธฐ ๋“ฑ์ด ์žˆ๋‹ค. iOS์˜ ์ด๋ฏธ์ง€ ๋กœ๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ SDWebImage์™€ Android์˜ ์ด๋ฏธ์ง€ ๋กœ๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ glide๋ฅผ ํ”Œ๋žซํผ๋งˆ๋‹ค ์ง์ ‘ ์‚ฌ์šฉํ•˜์—ฌ ์„ฑ๋Šฅ์„ ๋†’์˜€๋‹ค. ๋”ฐ๋ผ์„œ ๋งŽ์€ ์ด๋ฏธ์ง€๋ฅผ ๋ Œ๋”ํ•  ์ผ์ด ์žˆ๋‹ค๋ฉด, react-native์—์„œ react-native-fast-image ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์‚ฌ์šฉ์€ ํ•„์ˆ˜๋‹ค.

โšฝ ์žฌ๋ฐŒ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

react-native-egg๋Š” ์ด์Šคํ„ฐ์—๊ทธ๋ฅผ ์‹ฌ์–ด๋†“๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ์•„์ง ์‚ฌ์šฉ์€ ์•ˆํ•ด๋ดค์ง€๋งŒ ์•ฑ ์•ˆ์˜ ๋น„๋ฐ€์Šค๋Ÿฌ์šด ์ œ์Šค์ณ๋ฅผ ์ˆจ๊ฒจ๋†“๊ณ  ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ํ…Œ์ŠคํŠธ๋ชจ๋“œ๋กœ ์ง„์ž…ํ•˜๊ฒŒ ํ•˜๊ฑฐ๋‚˜, ์œ ์ €๋“ค์ด ์šฐ์—ฐํžˆ ๋ฐœ๊ฒฌํ•œ๋‹ค๋ฉด ์žฌ๋ฏธ ์š”์†Œ๋ฅผ ๋Š๋‚„๋งŒํ•œ ์ด์Šคํ„ฐ์—๊ทธ๋ฅผ ์ˆจ๊ฒจ๋†“์„ ์ˆ˜ ์žˆ๋‹ค. ๊ตฐ๋Œ์ด ์•ฑ์—๋„ ๋‚˜์ค‘์— ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ด์Šคํ„ฐ์—๊ทธ๋ฅผ ์ˆจ๊ฒจ๋†“์„ ์ƒ๊ฐ์ด๋‹ค.

์•„์ดํฐ์˜ ์•ฝํ•œ ์ง„๋™์ธ ํ–…ํ‹ฑ์„ ๊ตฌํ˜„ํ•ด๋†“์€ ์•„์ฃผ ์ข‹์€ react-native ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ์œ ์ €๊ฐ€ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ, ํ”ผ๋“œ๋ฐฑ์„ ์ฃผ๋Š” ๋ฐ ํ–…ํ‹ฑ๋งŒํผ ์ข‹์€๊ฒŒ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•„์ฃผ ์†์‰ฝ๊ฒŒ react-native์—์„œ ํ–…ํ‹ฑ ํšจ๊ณผ๋ฅผ ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋Œ€์‹  ์•ˆ๋“œ๋กœ์ด๋“œ๋Š” ์ง€์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, Platform.OS๋กœ ๋ถ„๊ธฐ ์ฒ˜๋ฆฌํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

๐Ÿ’ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” react-native์˜ ์žฅ์ 

์งง๊ฒŒ๋‚˜๋งˆ ๊ตฐ๋Œ์ด ์•ฑ์„ react-native๋กœ ๊ฐœ๋ฐœํ•ด๋ณด๋ฉด์„œ ๋งŽ์€ ์‚ฝ์งˆ์ด ์žˆ์—ˆ์ง€๋งŒ ์ •๋ง ์ข‹์€ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ํ–ˆ๋‹ค. ๋ฌด์—‡๋ณด๋‹ค๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๊ณผ ์‚ฌ์šฉ์„ฑ, ์„ฑ๋Šฅ์ด ๊ฑฐ์˜ ๋™์ผํ•œ ์•ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ์ •๋ง ์‹ ์„ธ๊ณ„์˜€๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ iOS์™€ ์•ˆ๋“œ๋กœ์ด๋“œ ๋‘ ํ”Œ๋žซํผ์—์„œ ๋Œ์•„๊ฐ€๋‹ค๋‹ˆโ€ฆ react-native์˜ ๊ด‘ํŒฌ์ด ๋œ ๊ฒƒ ๊ฐ™๋‹ค. ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” react-native์˜ ์žฅ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  1. ์ƒ์‚ฐ์„ฑ์ด ์—„์ฒญ ๋†’๋‹ค.

Cake ์•ฑ์˜ ์ด์„ฑ๋ฏผ ๊ฐœ๋ฐœ์ž๋‹˜์ด Cake ์•ฑ์„ ์•ˆ๋“œ๋กœ์ด๋“œ์™€ iOS ๋‘ ํ”Œ๋žซํผ์˜ ์•ฑ์„ ํ˜ผ์ž์„œ ํ•œ ๋‹ฌ๋งŒ์— ๊ฐœ๋ฐœํ•˜๊ณ  ์ถœ์‹œํ•˜์…จ๋‹ค๊ณ  ํ•œ๋‹ค. ๋งŒ์•ฝ์— ์•ˆ๋“œ๋กœ์ด๋“œ์™€ iOS ๊ฐ๊ฐ ๊ฐœ๋ฐœ์„ ํ–ˆ๋‹ค๋ฉด ์ธ์›๊ณผ ์‹œ๊ฐ„ ๋“ฑ ๋ฆฌ์†Œ์Šค๊ฐ€ ๋” ํ•„์š”ํ–ˆ์„ ๊ฒƒ์ธ๋ฐ react-native์˜€๊ธฐ์— ๊ฐ€๋Šฅํ–ˆ๋‹ค. ํ•œ ๊ฐ€์ง€ ์†Œ์Šค์ฝ”๋“œ๋กœ ์•ˆ๋“œ๋กœ์ด๋“œ์™€ iOS์˜ ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๊ฒŒ ๋˜๋‹ˆ ์ƒ์‚ฐ์„ฑ๋„ ๋†’์•„์ง€๊ณ  ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์œ ์ง€๋ณด์ˆ˜ ๋น„์šฉ์ด ํ˜„์ €ํžˆ ๋‚ฎ์•„์ง„๋‹ค. ๋˜ํ•œ, ์•ˆ๋“œ๋กœ์ด๋“œ์™€ iOS๋Š” ์ฝ”๋“œ๋ฅผ ๊ณ ์น˜๊ณ  ํ™•์ธํ•  ๋•Œ๋งˆ๋‹ค ๋นŒ๋“œํ•˜๋ฉด ๊ฝค ์˜ค๋žœ์‹œ๊ฐ„์„ ์žก์•„๋จน๋Š”๋ฐ์— ๋ฐ˜ํ•ด react-native๋Š” live reload ๊ธฐ๋Šฅ์„ ํ†ตํ•ด์„œ ์ฝ”๋“œ๋ฅผ ๊ณ ์น  ๋•Œ๋งˆ๋‹ค, ๋ฐ”๋กœ๋ฐ”๋กœ ์ˆ˜์ •์‚ฌํ•ญ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์–ด์„œ ์—„์ฒญ ํŽธํ•˜๊ณ  ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค.

  1. learning curve(ํ•™์Šต ๊ณก์„ )๊ฐ€ ๋น„๊ต์  ์งง๋‹ค.

Javascript, CSS ๊ทธ๋ฆฌ๊ณ  React๊ฐ€ ์ต์ˆ™ํ•˜๋‹ค๋Š” ์ „์ œ ํ•˜์— react-native์˜ learning curve๋Š” ๋ง๋„ ์•ˆ๋˜๊ฒŒ ์งง๋‹ค. JS, React๊ฐ€ ๋Šฅ์ˆ™ํ•˜๋‹ค๋ฉด react-native๋ฅผ ์ง์ ‘ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋ชจ๋ฅด๋Š” ๊ฒƒ์„ ๊ทธ๋•Œ๊ทธ๋•Œ๋งˆ๋‹ค ์ฐพ์•„๋ณด๋ฉฐ ๋Šฅ์ˆ™ํ•ด์ง€๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ธ ๊ฒƒ ๊ฐ™๋‹ค. ๋งŽ์€ ์‚ฝ์งˆ์ด ํ•„์š”ํ•˜๊ฒ ์ง€๋งŒ

  1. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์ ์ง€ ์•Š๋‹ค. ํ•„์š”ํ•˜๋ฉด ์ง์ ‘ ๋งŒ๋“ค๋ฉด ๋œ๋‹ค

๋ฐ‘์—์„œ ํ•œ ๋ฒˆ ๋” ์–ธ๊ธ‰ํ•˜๊ฒ ์ง€๋งŒ awesome-react-native๋ฅผ ๋ณด๋ฉด ํ•„์š”ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋งŽ์ด ๋งŒ๋“ค์–ด์ ธ ์žˆ์–ด์„œ ๊ฐœ๋ฐœํ•˜๋Š”๋ฐ ๊ฑฐ์˜ ๋ฌธ์ œ๊ฐ€ ์—†์—ˆ๋‹ค. ๋˜ํ•œ, ์•„์ฃผ ๋ฐฉ๋Œ€ํ•œ npm ๋ชจ๋“ˆ๋“ค์„ ๋งˆ์Œ๊ป ์„ค์น˜ํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ ๋„ ํฐ ์žฅ์  ์ค‘ ํ•˜๋‚˜์ด๋‹ค. ๋„ค์ดํ‹ฐ๋ธŒ ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•ˆ๋“œ๋กœ์ด๋“œ์™€ iOS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ณด๋‹ค์•ผ ํ›จ์”ฌ ์ ๊ฒ ์ง€๋งŒ ๊ฒฝ์Ÿํ•˜๊ณ  ์žˆ๋Š” ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์•ฑ ํ”„๋ ˆ์ž„์›Œํฌ์ธ flutter๋ณด๋‹ค๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋งŽ๋‹ค. ํ˜น์‹œ ํ•„์š”ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์—†๋‹ค๋ฉด ์ง์ ‘ create-react-native-library๋ฅผ ํ†ตํ•ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค. (๋ฌผ๋ก  Android, iOS ํ”Œ๋žซํผ์—์„œ ๋Œ์•„๊ฐ€๋„๋ก ์ง์ ‘ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผํ•ด์„œ ๋งŽ์€ ์–ด๋ ค์›€์ด ์žˆ์ง€๋งŒ ๋ง์ด๋‹ค.)

  1. code push๋ฅผ ํ†ตํ•œ ๋น ๋ฅธ ๋ฐฐํฌ

์œ„์—์„œ ๋งํ–ˆ์ง€๋งŒ code push๋Š” react-native๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํฐ ์ด์œ  ์ค‘ ํ•˜๋‚˜์ด๋‹ค. ๋ฉฐ์น ์”ฉ ๊ฑธ๋ฆฌ๋Š” iOS ์‹ฌ์‚ฌ ๋ฐ ๋ฐฐํฌ๋ฅผ ์ƒ๋žตํ•˜๊ณ  ๋ช‡ ์ดˆ๋งŒ์— ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋Š” ์ ์€ ์•„์ฃผ ๊ฐ•๋ ฅํ•˜๋‹ค.

๐Ÿ™… ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” react-native์˜ ๋‹จ์ 

react-native์˜ ํŒฌ์ด์ง€๋งŒ ์•„์‰ฌ์šด ์ ์ด ์žˆ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  1. ์œ„์ ฏ์ด๋‚˜ ์›Œ์น˜ ์ต์Šคํ…์…˜์„ ๊ฐœ๋ฐœํ•˜๊ธฐ๊ฐ€ ๋„ค์ดํ‹ฐ๋ธŒ๋ณด๋‹ค ๊นŒ๋‹ค๋กญ๋‹ค.

์•ˆ๋“œ๋กœ์ด๋“œ ์œ„์ ฏ์€ react-native-android-widget-poc, iOS ์œ„์ ฏ์€ react-native-today-widget, ์• ํ”Œ์›Œ์น˜ ์•ฑ์€ react-native-watch-connectivity, ๋˜ํ•œ ์•ฑ ๊ฐ„์˜ ๋ฐ์ดํ„ฐ ๊ณต์œ ๋Š” react-native-shared-group-preferences ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋“ฑ ๋งŽ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ์˜คํ”ˆ์†Œ์Šค๋กœ ๊ฐœ๋ฐœ๋˜๊ณ  ์žˆ์ง€๋งŒ ์•„๋ฌด๋ž˜๋„ ๋„ค์ดํ‹ฐ๋ธŒ์˜ ์ƒˆ๋กœ์šด API๋“ค์ด ๋‚˜์˜ค๋ฉด ๋ฐ”๋กœ๋ฐ”๋กœ ์ง€์›๋˜๋Š” ๊ฒƒ์€ ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— ์Šค๋งˆํŠธ์›Œ์น˜ ์•ฑ์ด๋‚˜ ์œ„์ ฏ ๊ฐ™์€ ๋‹ค๋ฅธ ํ™•์žฅ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค๋ฉด react-native๋Š” ์ถ”์ฒœํ•˜์ง€ ์•Š๋Š”๋‹ค. react-native๋กœ iOS ์œ„์ ฏ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ์ง€๋งŒ ๋ฉ”๋ชจ๋ฆฌ ๋ฌธ์ œ์ธ์ง€ ๊ฐ€๋” โ€œ๋กœ๋“œํ•  ์ˆ˜ ์—†์Œโ€ ์ด๋ผ๊ณ  ๋œจ๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์–ด์„œ ์‚ด์ง ๋ถˆ์•ˆ์ •ํ•œ ์ ์ด ๋ณด์ธ๋‹ค.

  1. ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๋กœ ๋นŒ๋“œ๊ฐ€ ์•ˆ๋  ๋•Œ๊ฐ€ ์žˆ์–ด ์‚ฝ์งˆ ์š”์†Œ๊ฐ€ ๋งŽ๋‹ค.

react-native ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŽ์ด link์‹œํ‚ค๋‹ค๊ฐ€ ๋ณด๋ฉด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ๊ผฌ์ผ ๋•Œ๊ฐ€ ์žˆ๊ณ , ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ ๊ธฐ๊ธฐ์—์„œ ์ž‘๋™์„ ์•ˆํ•˜๋Š” ๋“ฑ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์„ ์ฐพ๊ธฐ ์–ด๋ ค์šด ํŠธ๋Ÿฌ๋ธ”์ด ๋ฐœ์ƒํ•˜๊ธฐ ์‰ฝ๋‹ค. ๋‚ด๊ฐ€ ์•„์ง ์ดˆ๋ณด๋ผ์„œ ๋ชป์ฐพ๋Š” ๊ฒƒ์ผ ์ˆ˜๋„ ์žˆ๊ธด ํ•˜์ง€๋งŒ, ๋ถˆ์นœ์ ˆํ•œ ์—๋Ÿฌ๋ฉ”์„ธ์ง€๋„ ๋งŽ๊ณ  ํ•ด์„œ ์•ˆ๋“œ๋กœ์ด๋“œ ํ˜น์€ iOS ๋นŒ๋“œ๊ฐ€ ์•ˆ๋  ๋•Œ์—๋Š” ๋งŽ์€ ์‹œ๊ฐ„์˜ ํญํ’ ๊ตฌ๊ธ€๋ง๊ณผ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ์š”ํ•œ๋‹ค. (์ด๋Š” ๋‚ด๊ณต์ด ์Œ“์ด๋ฉด ํ•ด๊ฒฐ๋  ๊ฒƒ ๊ฐ™๋‹ค.)

  1. ํ•œ๊ตญ์–ด๋กœ ๋œ ์ž๋ฃŒ๊ฐ€ ๋งŽ์ด ๋ถ€์กฑํ•˜๋‹ค.

react-native ๊ด€๋ จ ์„œ์ ์ด ํ•œ๊ตญ์— ์ถœํŒ๋œ ๊ฒŒ 2~3๊ถŒ ๋ฐ–์— ๋ณด์ด์ง€ ์•Š๊ณ , ํ•œ๊ตญ์˜ react-native ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์ž‘์•„์„œ ๊ทธ๋Ÿฐ์ง€ ํ•œ๊ตญ์–ด๋กœ ๋œ ๊ฐœ๋ฐœ ์ž๋ฃŒ๋ฅผ ๋งŽ์ด ์ฐพ์•„๋ณผ ์ˆ˜ ์—†์—ˆ๋‹ค.

๐Ÿ˜ ๋„์›€์ด ๋˜์—ˆ๋˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ˜น์€ ์ž๋ฃŒ

react-native ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€๋Š” RN์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋‹น์—ฐ ์ œ์ผ ๋งŽ์ด ๋“ค์—ฌ๋‹ค ๋ณธ ํ™ˆํŽ˜์ด์ง€์ผ ๊ฒƒ์ด๋‹ค. ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ, API๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š”์ง€ ๋ณด๋Š” ์žฌ๋ฏธ๊ฐ€ ์žˆ๊ณ , ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ์˜ˆ์ œ์™€ ๋ช…์„ธ๊ฐ€ ์ƒ์„ธํžˆ ์ ํ˜€์žˆ์–ด์„œ ๋งŽ์ด ์ฐธ๊ณ ํ•ด์•ผํ•  ์‚ฌ์ดํŠธ์ด๋‹ค.

react-native์—์„œ ํ•„์š”ํ•œ ์ ์žฌ์ ์†Œ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‚˜์—ดํ•ด๋†“์€ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋‹ค. RN์œผ๋กœ ๊ฐœ๋ฐœํ•  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ๋ฐฉ๋ฌธํ–ˆ๋˜ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์ผ ๊ฒƒ์ด๋‹ค.

๋„ค์ด๋ฒ„ ๊ฐœ๋ฐœ์ž ์ปจํผ๋Ÿฐ์Šค์ธ deview 2018์—์„œ cake ์•ฑ์„ ๊ฐœ๋ฐœํ•˜์‹  snow์˜ ์ด์„ฑ๋ฏผ ๊ฐœ๋ฐœ์ž๋‹˜์ด ๋ฐœํ‘œํ•ด์ฃผ์‹  react-native ๋ฐœํ‘œ์ž๋ฃŒ์ด๋‹ค. ํ˜„์žฅ์—์„œ ์ฐธ์„ํ–ˆ๋Š”๋ฐ react-native๊ฐ€ ์ด๋ ‡๊ฒŒ ๊ด€์‹ฌ์ด ๋งŽ์€ ๊ธฐ์ˆ ์ธ์ง€ ์ฒ˜์Œ ์•Œ์•˜๋‹ค. ์•„๋งˆ ์„ธ์…˜์˜ ์ด๋ฆ„์œผ๋กœ ์–ด๊ทธ๋กœ๊ฐ€ ๋งŽ์ด ๋Œ๋ ธ๊ธด ํ•˜์ง€๋งŒ.. ใ…Žใ…Ž ์ง„์งœ ์„œ์„œ ๋“ฃ๋Š” ์‚ฌ๋žŒ๋“ค๊นŒ์ง€ ๊ฝ‰์ฐผ์„ ์ •๋„๋กœ ์ธ๊ธฐ ์žˆ๋Š” ์„ธ์…˜์ด์—ˆ๋‹ค. ์ธ๊ธฐ๊ฐ€ ์žˆ๋Š” ๋งŒํผ ๊ฐ•์˜ ๋‚ด์šฉ๋„ ์•Œ์ฐผ๋‹ค. ๋งˆ์นจ ๊ตฐ๋Œ์ด๋ฅผ ํ•œ์ฐฝ ๊ฐœ๋ฐœํ–ˆ์„ ๋•Œ ์ฏค์ด์–ด์„œ ๋ฐœํ‘œ ๋‚ด์šฉ์ด ์™์™ ๋“ค์–ด์™”๊ณ , ๋ชฐ๋ž๋˜ react-native์˜ ๋™์ž‘ ์›๋ฆฌ์™€ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๊ฐœ๋ฐœ ํŒ, ๋…ธํ•˜์šฐ ๋“ฑ์„ ์ „์ˆ˜๋ฐ›์„ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค. ๋ฐœํ‘œ ์˜์ƒ ์ œ๊ฐ€ ์ •๋ฆฌํ•ด๋†“์€ ์ž๋ฃŒ

๐Ÿš’ ๊ฒฐ๋ก 

react-native๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๋งŽ์€ ์–ด๋ ค์›€์ด ์žˆ์—ˆ์ง€๋งŒ ๋งŽ์€ ์‚ฝ์งˆ์„ ํ†ตํ•ด ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ์ตํž ์ˆ˜ ์žˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ react-native๋Š” ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋‚˜ ํ”„๋กœํ† ํƒ€์ž…๊ฐ™์ด ๋น ๋ฅด๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“ค ๋•Œ์—๋Š” ์ ํ•ฉํ•˜์ง€๋งŒ ํšŒ์‚ฌ์˜ ๋Œ€ํ˜•ํ”„๋กœ์ ํŠธ์—์„œ ์“ฐ๊ธฐ์—๋Š” ๋ถ€์ ํ•ฉํ•  ๊ฒƒ ๊ฐ™๋‹ค. ์•„์ง react-native๋Š” ๋ฒ„์ „ ์—…๊ทธ๋ ˆ์ด๋“œ๊ฐ€ ๊พธ์ค€ํ•˜๊ณ  ๋น ๋ฅด๊ฒŒ ์ด๋ฃจ์–ด์ง€๊ณ  ์žˆ๊ณ  ๊ทธ ๋ง์€ ๋ถˆ์•ˆ์ •ํ•˜๋‹ค๋Š” ๋ง์ด๋‹ˆ๊น ๋ง์ด๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋กœ ์•ฑ ๋งŒ๋“ค ๋•Œ์—๋งŒ react-native๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋‹ค. react-native๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํšŒ์‚ฌ๊ฐ€ ๊ฑฐ์˜ ์—†๊ธด ํ•˜๋‹ค. ์ด๋กœ์จ react-native ์ฒซ ๊ฐœ๋ฐœ๊ธฐ๋ฅผ ๋งˆ์น˜๋„๋ก ํ•˜๊ฒ ๋‹ค.

์™ ์ง€ ๊ตฐ๋Œ์ด ์•ฑ ๊ฐœ๋ฐœ๊ธฐ๋ฅผ ์“ฐ๋‹ค๊ฐ€ react-native ์ฐฌ์–‘๊ธ€๋กœ ๋ฐ”๋€ ๊ฒƒ ๊ฐ™์€ ๋Š๋‚Œ์ ์ธ ๋Š๋‚Œ์ด ๋“ค์ง€๋งŒโ€ฆ ์ดˆ๋ณด ๋ธ”๋กœ๊ฑฐ๋ผ ๊ธ€์ด ์ƒ๊ฐ๋ณด๋‹ค ๋‘์„œ๊ฐ€ ์—†๊ณ  ๊ธธ์–ด์ง€๊ธฐ๋งŒ ํ•ด์„œ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค ๐Ÿ˜… ๋ถ€์กฑํ•œ ๊ธ€ ๋ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๐Ÿฅ

blog.holy.kiwi

Jon Jee

Personal blog by Jon Jee.
I hope to explain with words and code.