react-native

๋งˆ์นจ๋‚ด ์•ฑ ์Šคํ† ์–ด์— ์•ฑ 'T.o.T'๊ฐ€ ์ถœ์‹œ๋˜์—ˆ๋‹ค.  expo๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋นŒ๋“œํ•œ app์ด ์•ฑ์Šคํ† ์–ด์— ๋ฆด๋ฆฌ์ฆˆ ๋œ ๊ณผ์ •์„ ์ƒ์„ธํžˆ ๊ธฐ๋กํ•ด๋‘๊ณ  ์‹ถ๋‹ค๋Š” ์š•์‹ฌ์ด ๋“ค์—ˆ์ง€๋งŒ ํ•œ ๋‹จ๊ณ„์”ฉ ๋ฐŸ์•„๊ฐˆ์ˆ˜๋ก ํ„ฐ์ง€๋Š” ๋ถ„๋…ธ์— ๋จธ๋ฆฌ๊ฐ€ ํ•˜์–—๊ฒŒ ๋ณ€ํ•ด์„œ ๊ธฐ๋ก์„ ๋งŽ์ด ๋ชป ๋‚จ๊ธด ๊ฒƒ ๊ฐ™๋‹ค. ์šฐ์„  ์•ฑ์„ ์ œ์ž‘ํ•˜๊ณ  ์ถœ์‹œํ•˜๋ฉด์„œ ๋Š๋‚€ ๊ฒƒ๋“ค์„ ์ ์–ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.  ์•ฑ ์ œ์ž‘ํ•˜๊ฒŒ ๋œ ๊ณ„๊ธฐT.o.T์˜ ์‹œ์ž‘์€ ๋‹จ์ˆœํ•˜๊ฒŒ 'ํ•˜๋ฃจ์— 30๋ถ„์€ ์ง‘์ค‘ํ•ด์„œ ์ฑ…์„ ์ฝ์–ด์•ผ๊ฒ ๋‹ค' ๋ผ๋Š” ๋‹ค์ง์ด์—ˆ๋‹ค. ์Šคํ†ฑ์›Œ์น˜๋กœ ํ•˜๋ฃจ ๋™์•ˆํ•˜๋Š” ๋‹ค์–‘ํ•œ ํ™œ๋™์— ๋Œ€ํ•œ ์‹œ๊ฐ„์„ ๊ธฐ๋กํ•ด ๋ณด์ž๋Š” ์ทจ์ง€์˜€๊ณ  ๊ทธ ์ฒซ ์Šคํ…์€ nextjs๋กœ ์ œ์ž‘ํ•œ ์›น ํ”Œ๋žซํผ์ด์—ˆ๋‹ค. ์–ด์ฐจํ”ผ ๋‚ด๊ฐ€ ์“ธ ๊ฑฐ๋‹ˆ๊น ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์„ ๋”ํ•ด์„œ ๋น ๋ฅด๊ฒŒ ์ œ์ž‘ํ–ˆ๊ณ  ๊ณ„์† ๋ธŒ๋ ˆ์ธ์Šคํ† ๋ฐ์„ ํ•˜๋ฉด์„œ ๋ชฉํ‘œ๋ฅผ ์žก์•„๊ฐ”๋‹ค. ์–ด๋Š ์ •๋„ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋”ํ•œ ๊ฒฐ๊ณผ๋ฌผ์ด ๋‚˜์™”๊ณ  ์ฒ˜์Œ..
๋‚ด๊ฐ€ ์“ฐ๊ณ  ์‹ถ์€ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ๋งˆ์Œ์— ์‹œ์ž‘ํ•œ ๊ฑฐ์˜€๋Š”๋ฐ ๋„ˆ๋ฌด ๋งŽ์€ ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.   1. ํ•„์š”ํ•œ ๊ฒƒ๋“ค - Apple Developer ๋ฉค๋ฒ„์‹ญ ๊ฐ€์ž… - Expo ๊ณ„์ • ๋ฐ ํ”„๋กœ์ ํŠธ   2. Expo๋กœ ๋นŒ๋“œํ•˜๊ธฐApple developer์— identifiers๋ฅผ ๋“ฑ๋กํ•˜๊ณ  App Store Connect์—๋„ ์•ฑ ์ •๋ณด๋ฅผ ๋“ฑ๋กํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” bundler ID ๊ฐ€ ํ•„์šฏ๋‹ค ๋ฒˆ๋“คID๋ฅผ ์–ด๋””์„œ ์ฐพ๋Š”๊ฑด์ง€ ๋ชฐ๋ผ์„œ ๊ณ ๋ฏผํ•˜๋‹ค๊ฐ€ ๊ทธ๋ƒฅ ๋ฐ”๋กœ EAS ๋กœ ๋ฐฐํฌ๋ฅผ ์‹œ๋„ํ•˜๋‹ˆ ๋ฐฐํฌ๋ฅผ ํ•˜๋ฉด์„œ ์ƒ์„ฑํ•  ์ˆ˜๊ฐ€ ์žˆ์—ˆ๋‹ค.  EAS๋ผ๋Š” ํด๋ผ์šฐ๋“œ ๋นŒ๋“œ ์„œ๋น„์Šค์ธ๋ฐ, Expo Application Service์˜ ์ค€๋ง์ž…๋‹ˆ๋‹ค. EAS build๋Š” ๊ธฐ๊ธฐ์— ์„ค์น˜ํ•˜๋Š” ์•ฑ ๋ฐ”์ด๋„ˆ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ํ˜ธ์ŠคํŒ… ์„œ๋น„์Šค๋กœ ์ง์ ‘ ๋ณต์žกํ•œ ์ž‘์—…์„ ๊ฑฐ์น˜์ง€ ์•Š์•„๋„ ์•ฑ..
์›น์œผ๋กœ ์“ฐ๊ณ  ์žˆ๋˜ ToT๋ฅผ app์œผ๋กœ ์˜ฎ๊ธฐ๊ธฐ๋กœ ๊ฒฐ์ •ํ•˜๋ฉด์„œ UI๋ถ€๋ถ„๋„ ๋งŽ์ด ๋ณ€๊ฒฝ๋˜์—ˆ๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ home์— weekly ์บ˜๋ฆฐ๋”๋ฅผ ๋„ฃ๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ React-Native๋Š” ์ฒ˜์Œ์ด๊ธฐ๋„ํ•˜๊ณ  ๊ฐ์ด ์ž˜ ์•ˆ ์žกํ˜€์„œ ์บ˜๋ฆฐ๋” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฐพ์•„๋ณด๋‹ค๊ฐ€ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ calendar-strip  ๊ตฌํ˜„์ด ํ•„์š”ํ•œ ๊ธฐ๋Šฅweekly๋กœ ๋ณด์—ฌ์•ผํ•จ์š”์ผ๋ณ„๋กœ ํด๋ฆญ์ด ๊ฐ€๋Šฅํ•ด์•ผํ•จ์š”์ผ์ด ํด๋ฆญ๋˜๋ฉด ํ•ด๋‹น ์š”์ผ์˜ ๋ฐ์ดํ„ฐ๋“ค์ด ๋ณด์—ฌ์•ผํ•จํ™”์‚ดํ‘œ๋ฅผ ํด๋ฆญํ•˜๋ฉด ์ฃผ๋ณ„๋กœ ์ด๋™์ด ๋˜์–ด์•ผํ•จ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋Š” ์š”์ผ์€ ์š”์ผ์— ํ‘œ์‹œ๊ฐ€ ๋˜์–ด์žˆ์–ด์•ผํ•จ   ์‚ฌ์šฉํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‚ด๊ฐ€ ํ•„์š”ํ–ˆ๋˜ ๋ชจ๋“  ๊ธฐ๋Šฅ์ด ์†์‰ฝ๊ฒŒ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•˜๊ณ  ๋‹ค์–‘ํ•œ demo ๋ฒ„์ ผ์ด ๋งŒ๋“ค์–ด์ ธ์žˆ์–ด์„œ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์ด ์ƒ์„ธํžˆ ์„ค๋ช…๋˜์–ด์žˆ๋‹ต๋‹ˆ๋‹ค  https://www.npmjs.com/package/react-native-calendar..
๋งŒ๋“ค๊ณ  ์‹ถ์€ ์•ฑ์ด ์žˆ์–ด์„œ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ์„ค์น˜ํ•˜๋ ค๊ณ  ํ•˜๋Š”๋ฐ, ( -> ์กฐ๋งŒ๊ฐ„ ์•ฑ ๊ตฌํ˜„ ๊ณผ์ •์„ ์˜ฌ๋ฆด ์˜ˆ์ •์ž„๋ ) ๊ณ„์† ์•ˆ ๋˜๋Š”๊ฒƒ์ด๋‹ค!!!! ์ง€์ ธ์Šค.... ์™œ ์•ˆ๋˜๋Š” ๊ฒƒ์ธ์ง€ ์ดํ•ด๋ถˆ๊ฐ€. ํ•„์š”ํ•œ ๋ชจ๋“  ํ”„๋กœ๊ทธ๋žจ๋“ค์„ ์„ค์น˜ํ•ด๋†จ๋Š”๋ฐ, ์ด๋•Œ ๋œฌ ์—๋Ÿฌ ์ฝ”๋“œ๋ฅผ ๊ตฌ๊ธ€๋งํ•ด๋ดค๋‹ค. ๋„˜๋‚˜ ๋‹ค์–‘ํ•œ ๊ณณ์—์„œ ๋ฐœ๊ฒฌ๋œ ์ด ์—๋Ÿฌ ์•Œ๊ณ ๋ณด๋‹ˆ -g ๋ฅผ ๋ถ™์—ฌ์„œ ์ „์—ญ์œผ๋กœ ์„ค์น˜๋ฅผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ๊ธฐ๋Š” ์—๋Ÿฌ๋ผ๊ณ  ํ•œ๋‹ค. ์ด๋Ÿฐ ๋ช…๋ น์–ด๋ฅผ ์“ธ ๋•Œ๋Š” sudo๋ฅผ ์•ž์— ๋ถ™์—ฌ์ฃผ๋ฉด ๋œ๋‹ค. ์ด๋•Œ. ์ปด์˜ ๋น„๋ฒˆ์„ ์ ์œผ๋ผ๊ณ  ํ•œ๋‹ค. ์ ์–ด์ฃผ๋ฉด ํ•ด๊ฒฐ~~~~! ---------------------------------------------------------------------- ์œ„์— ๊ธ€์„ ์˜ฌ๋ฆฐ์ง€ 1-2์‹œ๊ฐ„ ๋งŒ์— ์ •์ •ํ•œ๋‹ค. global ๋กœ react-navtive ์„ค์น˜ ํ•˜์ง€ ๋งˆ์„ธ์šค..
๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ž€? ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ(React Native)๋Š” iOS์™€ ์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„๋œ ๊ธฐ์กด์˜ ๋ชจ๋ฐ”์ผ ์•ฑ๋“ค์€ ์›น๋ทฐ๋ฅผ ์ด์šฉํ•œ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ฐฉ์‹์ด์˜€์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ฐœ๋ฐœํ•˜์ง€๋งŒ, ํ™”๋ฉด ์ธํ„ฐํŽ˜์ด์Šค๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์œ„์ ฏ์œผ๋กœ ์ปดํŒŒ์ผํ•˜์—ฌ ๋นŒ๋“œ๋ฉ๋‹ˆ๋‹ค. ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ๋„ค์ดํ‹ฐ๋ธŒ UI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋น ๋ฅธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœํ™˜๊ฒฝ ์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ์„ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค๋ฉด ์•ˆ๋“œ๋กœ์ด๋“œ ์ŠคํŠœ๋””์˜ค๋ฅผ ๋‹ค์šด ๋ฐ›์•„์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ปดํ“จํ„ฐ์— java๋ฅผ ๋‹ค์šด๋ฐ›์•„์•ผํ•ฉ๋‹ˆ๋‹ค. ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ๋„ ๋‹ค์šด๋ฐ›์•„์•ผํ•˜๊ณ ์š”. ์ •๋ง ๋ฐ›์•„์•ผํ•˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. IOS๋„ Xcode๋ฅผ ๋‹ค์šด๋ฐ›์•„์•ผํ•˜๊ณ ์š”. ํ•˜์ง€๋งŒ ์ €๋Š” ๋‹ค ์ƒ๋žต์„ ํ•˜๊ณ  ํ”„๋กœํ† ํƒ€์ดํ•‘๊ณผ ํ…Œ์ŠคํŠธ๋ฅผ ๋ชฉ์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ๊ฐ„๋‹จํ•œ ํˆด์„ ์ด์šฉํ•  ๊ฒƒ..
๋ฐ(Ming) ๐Ÿฐ
'react-native' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก