FrontEnd
Javascript
Diary
ML
CS
Django
Algorithm
AWS
Co-Work
HTML
CSS
Python
React
ReactNative

ReactNative

(11)

10. RN Icon & Splash

์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์šฐ๋ฆฌ์˜ App์— Icon๊ณผ Loadingํ™”๋ฉด(splash)์„ ๋ถ€์—ฌํ•ด์ฃผ๋„๋ก ํ•ฉ์‹œ๋‹ค. ์•„๋ž˜ Icon๊ณผ Loadingํ™”๋ฉด์˜ ์˜ˆ์‹œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค Icon Untitled.png Loadingํ™”๋ฉด Untitled 1.png * Logo ๋งŒ๋“ค๊ธฐ ( ๐Ÿ”ป ์•„๋ž˜์˜ ์‚ฌ์ดํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์…”๋„ ์ข‹๊ณ  ์ง์ ‘ Logo๋ฅผ ๋งŒ๋“œ์…”๋„ ๋ฉ๋‹ˆ๋‹ค! ) Amazingly Simple Grโ€ฆ

9. RN Diary App ๊ธฐ๋Šฅ ์ถ”๊ฐ€ํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”! ์ง€๋‚œ ์‹œ๊ฐ„ Navigation์ด๋ผ๋Š” ์• ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  Calendar๋„ ๊ฐ€์ ธ์™€์„œ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๋งŽ์ด ํž˜๋“ค์—ˆ์ฃ  ๐Ÿ˜ฅ์ด๋ฒˆ์‹œ๊ฐ„์— ๊ธฐ๋Šฅ๋งŒ ์กฐ๊ธˆ๋” ๋„ฃ์–ด์ฃผ๋ฉด Diary App์ด ์™„์„ฑ๋˜๋‹ˆ๊นŒ ๋‹ฌ๋ ค๋ด…์‹œ๋‹ค ์ฐธ ๋“ค์–ด๊ฐ€๊ธฐ์ „ Diary์˜ Navigator๋ฅผ ์‚ฌ์šฉํ•จ์— ์žˆ์–ด์„œ ํ•œ๊ฐ€์ง€ ์—…๋ฐ์ดํŠธ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ์š” ๊ธฐ์กด์— ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ๋ฅผ ์‚ฌ์šฉํ• ๋•Œ ์—์„œ ๊ฐ€์ ธ์™€ ์‚ฌ์šฉํ•ด์คฌ๋Š”๋ฐ์š” react-โ€ฆ

8.RN Diary App ์˜ Layout๋งŒ๋“ค๊ธฐ

8 RN Diary App ์˜ Layout๋งŒ๋“ค๊ธฐ ๋ฉ‹-ํ•˜ TodoApp์œผ๋กœ ๊ธฐ๋ณธ์ ์ธ RN์˜ ๊ตฌ์กฐ์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€ํ•˜๊ณ  Weather App์œผ๋กœ API๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ณต๋ถ€ํ•˜๊ณ  ์˜ค๋Š˜์€ Diary App์„ ํ†ตํ•ด RN์„ ์ข€๋” ๊นŠ์ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค 0.0 App ์ƒ์„ฑํ•˜๊ธฐ ์ด์ œ๋Š” ์กฐ๊ธˆ ์ต์ˆ™ํ•ด์ง€์…จ์„๊ฑฐ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค 1. Navigation ๋งŒ๋“ค๊ธฐ Navigationโ€ฆ

7.RN ๋‚ ์”จApp์„ ํ†ตํ•œ API์ด์šฉ

์•ˆ๋…•ํ•˜์„ธ์š”! 1๊ฐœ์˜ App์„ ๋งŒ๋“ค๊ณ  ์•„์ฃผ ๊ธฐ์œ๋งˆ์Œ์œผ๋กœ ๋‹ค์Œ App์„ ์‹œ์ž‘ํ•ด๋ณด๋„๋ก ํ•ฉ์‹œ๋‹ค ์ œ๋ชฉ์—๋„ ๋‚˜์™€์žˆ๋“ฏ ์šฐ๋ฆฌ๋Š” ์ด๋ฒˆ์‹œ๊ฐ„์„ ํ†ตํ•ด API๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ค‘์ ์ ์œผ๋กœ ๋ฐฐ์šฐ๊ฒŒ ๋ ๊ฑฐ์—์š” ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“ค App์˜ ๋Œ€๋žต์ ์ธ ๋ชจ์–‘์ž…๋‹ˆ๋‹ค ๊ทธ๋Ÿผ ์ด๋ฒˆ์‹œ๊ฐ„์— ๋‚˜์•„๊ฐˆ ์ˆœ์„œ์— ๋Œ€ํ•ด์„œ ์ด์•ผ๊ธฐ๋ฅผ ํ•ด๋ณด๋„๋ก ํ•ฉ์‹œ๋‹ค ๋ฐฐ๊ฒฝํšจ๊ณผ ์ฃผ๊ธฐ + ์ „์ฒด์ ์ธ ๊ตฌ์กฐ ์žก๊ธฐ loading๊ธฐ๋Šฅ ๋„ฃ์–ด์ฃผ๊ธฐ weatโ€ฆ

6.RN TodoApp ๊ธฐ๋Šฅ ๋ถ€์—ฌํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”! ์—ฌ๋Ÿฌ๋ถ„ ์ง€๋‚œ์‹œ๊ฐ„๊นŒ์ง€ ์šฐ๋ฆฌ์˜ TodoApp Layout์„ ๋งŒ๋“ค์–ด ๋ณด์•˜์Šต๋‹ˆ๋‹น ์Šฌ์Šฌ RN์— ๋งŒ๋“ค๊ธฐ์— ์žฌ๋ฏธ๊ฐ€ ์ƒ๊ธฐ์‹œ๋‚˜์š”!!!!!! ์ €๋Š” ์žฌ๋ฐŒ์Šต๋‹ˆ๋‹ค.. ์˜ค๋Š˜ ์ด์‹œ๊ฐ„์—๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  Layout์— ํ™œ๋ ฅ์„ ๋ถˆ์–ด๋„ฃ์–ด ์ค„๊ฒ๋‹ˆ๋‹ค = ๊ธฐ๋Šฅ์„ ๋„ฃ์–ด์ค„๊บผ์—์š” State๋ผ๋Š” ์• ๋ฅผ ์ด์šฉํ• ๊ป€๋ฐ์š”!! State๋Š” React๊ฐœ๋… ์„ค๋ช…ํ• ๋•Œ๋„ ์–ธ๊ธ‰์„ ํ–ˆ๋˜ ๋‚ด์šฉ์ด์ง€๋งŒ ๋ณ€๊ฒฝ๊ฐ€๋Šฅํ•œ ๊ฐ’โ€ฆ

5.RN TodoApp Layout ๋งŒ๋“ค๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š” ์—ด์–ด๋ถ„ ๋“œ๋””์–ด RN ์œผ๋กœ ๋“ค์–ด์™”์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ง€๊ธˆ๋ถ€ํ„ฐ ๋ฐฑ๋ฌธ์ด๋ถˆ์—ฌ์ผํƒ€ ๋ผ๋Š” ๋ง์ฒ˜๋Ÿผ ์ด๋ก ๋ณด๋‹ค๋Š” ์‹ค์Šต์„ ์ค‘์‹ฌ์œผ๋กœ ๊ณต๋ถ€ํ•ด ๋‚˜๊ฐˆ๊บผ์—์š” ์ฒซ๋ฒˆ์งธ๋กœ ๊ฐœ๋ฐœ์˜ ์‹œ์ž‘์ด๋ผ ํ•  ์ˆ˜ ์žˆ๋Š” To-Do์•ฑ์„ ๋งŒ๋“ค์–ด ๋ณผ๊ป๋‹ˆ๋‹ค ์šฐ๋ฆฌ๋Š” ์ €๋ฒˆ ์‹œ๊ฐ„์— React์˜ ๊ธฐ๋ณธ๊ฐœ๋…์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€๋ฅผ ํ–ˆ์œผ๋‹ˆ ์‹ค์Šต์„ ํ•˜๋ฉฐ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์‚ดํŽด๋ณด๋ฉด์„œ ๋„˜์–ด๊ฐ€๋„๋ก ํ•ด์š”!! ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ cmd์ฐฝ์ด๋‚˜ sโ€ฆ

4.RN ๋“ค์–ด๊ฐ€๊ธฐ์ „์— React์‚ฌ์ „์ง€์‹

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„ ์ง€๋‚œ ์ž๋ฃŒ์—์„œ ๋ฐ”๋€ JS์— ๋Œ€ํ•ด์„œ ๋ณด๊ณ  ์˜ค์…จ์Šต๋‹ˆ๋‹น ๋ญ˜ ์ž๊พธ RN์ด๋‚˜ ์•Œ๋ ค์ฃผ์ง€ ์‚ฌ์ „์ง€์‹์„ ํ’€๊ณ  ์žˆ๋‚˜ ํ•˜์‹œ๊ฒ ์ง€๋งŒโ€ฆ ๋‚˜์ค‘์— ํŽธํ•˜๊ธฐ ์œ„ํ•ด ์ง€๊ธˆ ์ข€ ๊ณ ์ƒํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ด์ฃผ์„ธ์—ฌ ใ…Žใ…Ž ๊ทธ๋Ÿผ ๋ฐ”๋กœ ์‹œ์ž‘ํ•ฉ์‹œ๋‹ค ์ฐธ ์•„๋ž˜์˜ ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ์–ด๋ ค์›Œ์„œ ํ•œ๋ฒˆ์— ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋”๋ผ๋„ ํ•œ๋ฒˆ ๋‘๋ฒˆ ์ฝ์œผ์‹œ๋ฉด์„œ ์•„~ ์ด๋Ÿฐ๊ฒŒ ์žˆ๊ตฌ๋‚˜ ํ•ด์ฃผ์…”๋„ ๋‚˜์ค‘์— ๋งŽ์€ ๋„์›€์ด ๋ ๊ฑฐ์—์š” React ํŽ˜โ€ฆ

3.RN ๋“ค์–ด๊ฐ€๊ธฐ์ „์— JS์‚ฌ์ „์ง€์‹

RN ๋“ค์–ด๊ฐ€๊ธฐ์ „์— JS์‚ฌ์ „์ง€์‹ ์•ˆ๋…•ํ•˜์„ธ์š”!!! ๋ณธ๊ฒฉ์ ์œผ๋กœ React-Native ์— ๋Œ€ํ•ด ๋“ค์–ด๊ฐ€๊ธฐ์ „์— React-Native์˜ ๋ฐ”ํƒ•์ด ๋˜๋Š” React ์˜ ๋ฐ”ํƒ• JavaScript์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•ฉ์‹œ๋‹ค ๐Ÿ‘€ ํ•ด๋‹น ์ž๋ฃŒ๋Š” ๋น ๋ฅด๊ณ  ์‰ฌ์šด ์ดํ•ด์— ํฌ์ปค์Šค๋ฅผ ๋งž์ท„์Šต๋‹ˆ๋‹ค. (์ž์„ธํ•œ JavaScript ์ž๋ฃŒ๋Š” ๋‚˜์ค‘์— ๊ผญ ๊ณต์œ ํ•˜๋„๋ก ํ• ๊ป˜์š”!! ํ•„์š”ํ•˜์‹  ๋ถ„์ด ๊ณ„์‹œ๋‹ค๋ฉด..โ€ฆ

1.React Native๋ž€ ๋ฌด์—‡์ผ๊นŒ

ํ•ด๋‹น ์ž๋ฃŒ๋Š” 2019 ํ•˜๋ฐ˜๊ธฐ ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ์•ฑ์„ ๋„๋Œ€ํ•™ ์ปค๋ฆฌํ˜๋Ÿผ์„ ์œ„ํ•ด ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉฐ ๋งŒ๋“  ์ž๋ฃŒ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ง€๊ธˆ๋ณด๋ฉด ๋ถ€์กฑํ•œ๋ถ€๋ถ„์ด ๋งŽ์€์  ์ฐธ๊ณ  ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. (hooks๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋˜๊ฐ€.., ๋ฒ„์ „์ด ์•ˆ ๋งž๋Š”๋‹ค๋˜๊ฐ€โ€ฆ ใ… ใ… ) #1 React Native๋ž€ ๋ฌด์—‡์ผ๊นŒ React Native Facebook ์—์„œ ๋งŒ๋“  Open Source Mobile Apโ€ฆ

2-1.React-Native ๋‚ด Device์ด์šฉ ์•ฑ์‹คํ–‰

React-Native ๋‚ด Device์ด์šฉ ์•ฑ์‹คํ–‰(Android) ์•ˆ๋…•ํ•˜์„ธ์š”!! ์šฐ๋ฆฌ์˜ ํœด๋Œ€ํฐ์„ ์ด์šฉํ•˜์—ฌ App์„ ์‹คํ–‰์‹œ์ผœ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. (์ผ๋‹จ ํœด๋Œ€ํฐ์— expo์•ฑ์ด ๊น”๋ ค์žˆ๋‹ค๋Š” ์ „์ œํ•˜์— ์ง„ํ–‰ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.) ๊ผญ ์‹ค์ œ ํœด๋Œ€ํฐ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋”๋ผ๋„ android studio๋‚˜ xcode์™€ ๊ฐ™์€ ๊ฒƒ์„ ์ด์šฉํ•˜๋ฉด ๊ฐ€์ƒ device๋กœ๋„ test ํ•ด๋ณผ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹คโ€ฆ

2-2.React-Native expo์‹œ์ž‘ํ•˜๊ธฐ

React-Native expo์‹œ์ž‘ํ•˜๊ธฐ node.js ์„ค์น˜ npm์ด๋ผ๋Š” ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์„ค์น˜ํ•˜๊ธฐ ์œ„ํ•ด node.js๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์„๊ฑฐ์—์š”. ๋Œ€๋‹ค์ˆ˜ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ถ”์ฒœํ•˜๋Š” LTS๋ฒ„์ „์„ ๋ณธ์ธ ์šด์˜์ฒด์ œ์— ๋งž๊ฒŒ ๋‹ค์šด๋กœ๋“œ ํ•ด์ฃผ์„ธ์š”. _2019-06-19__5.58.23.png Untitled.png terminal์ด๋‚˜ cmd์ฐฝ์„ ์‹คํ–‰ํ•ด node๊ฐ€ ์ œ๋Œ€๋กœ ์„ค์น˜๋˜์—ˆ๋Š”์ง€ โ€ฆ