๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
728x90
๋ฐ˜์‘ํ˜•
[WWDC 2022] ์ œ๋„ˆ๋ฆญ๊ณผ ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•ด ์ฝ”๋“œ ์ถ”์ƒํ™”ํ•˜๊ธฐ (feat. some,any) (Embrace Swift generics) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ WWDC 2022์—์„œ ์ œ๋„ˆ๋ฆญ๊ณผ ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ •์„(?)์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ถ”์ƒํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋‹ค๋ฃฌ Embrace Swift generics ์„ธ์…˜์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ (์ œ ๋ฐฉ์‹๋Œ€๋กœ ํ•ด์„ํ•˜์—ฌ ์ •๋ฆฌํ•˜๋Š” ๊ฒƒ์ด๋‹ˆ ํ‹€๋ฆฐ ์ ์ด๋‚˜ ๊ถ๊ธˆํ•œ ์ ์ด ์žˆ๋‹ค๋ฉด ์–ธ์ œ๋“  ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”!) Model with concrete types ๊ฐ€์žฅ ๋จผ์ € ์–ด๋– ํ•œ ๊ฒƒ๋„ ์ถ”์ƒํ™”๋‚˜ ์ œ๋„ˆ๋ฆญ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์žˆ๋Š” ๊ทธ๋Œ€๋กœ ์ฆ‰, ๊ตฌ์ฒด์ ์ธ ํƒ€์ž…์„ ์ด์šฉํ•ด์„œ ๋†์žฅ ์‹œ์Šคํ…œ์„ ๊ตฌํ˜„ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋†์žฅ์— ์†Œ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ , ๊ทธ ์†Œ๋Š” ๊ฑด์ดˆ(Hay)๋ฅผ ๋จน๋Š” struct๋ฅผ ์ƒ์„ฑํ•ด ์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค. struct Cow { func eat(_ food:Hay) {...} } ์ด์ œ ์†Œ๊ฐ€ ๋จน๋Š” ๊ฑด์ดˆ๋Š” ์ž๋ผ๋ฉด ์•Œ.. 2022. 7. 10.
[WWDC 2022] ๊ธฐ์กด UIKit ์•ฑ์— SwiftUI ์ ์šฉํ•˜๊ธฐ (Use SwiftUI with UIKit) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ˆ์ „๋ถ€ํ„ฐ WWDC ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ ๋“œ๋””์–ด ์˜ค๋Š˜ WWDC์— ๋Œ€ํ•ด ๊ธ€์„ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜๋„ค์š”. WWDC 2022์—์„œ ๊ฐ€์žฅ ๊ด€์‹ฌ์„ ๋Œ์—ˆ๋˜ ์„ธ์…˜์€ UIKit ์•ฑ์— SwiftUI๋ฅผ ์ ์šฉํ•˜๋Š” ์„ธ์…˜์ด์—ˆ๋Š”๋ฐ์š”. ํ•ด๋‹น ์„ธ์…˜์„ ์ง์ ‘ ๊ตฌํ˜„ํ•ด ๋ณด๊ณ  ์ •๋ฆฌํ•ด ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ (Xcode 14 Beta๋กœ ์ง„ํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ˜น์‹œ ๋ฏธ๋ฆฌ ๊ฒฝํ—˜ํ•˜๊ณ  ์‹ถ์€ ๋ถ„๋“ค์€ ์—ฌ๊ธฐ ์—์„œ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„์„œ ์ง„ํ–‰ํ•ด ์ฃผ์„ธ์š”~) Preview UIHostingController UIHostingController๋Š” SwiftUI ๋ทฐ๋ฅผ ํฌํ•จํ•œ UIViewController์ž…๋‹ˆ๋‹ค. UIHostingController๋ฅผ ์ด์šฉํ•˜์—ฌ UIViewController์—์„œ SwiftUI ๋ทฐ๋ฅผ ํŒ์—… ํ˜•์‹์œผ๋กœ ๋„์›Œ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.. 2022. 7. 9.
[React Native] React Hook Form ์‚ฌ์šฉํ•ด ๋ณด๊ธฐ (Using React Hook Form) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์ €๋ฒˆ ์‹œ๊ฐ„์— Form์„ ๋งŒ๋“ค์–ด ํ•ด๋‹น Screen์— ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด ๋ณด์•˜๋Š”๋ฐ์š”. (ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ง„ํ–‰๋˜๋‹ˆ ์•„์ง ์•ˆ๋ณด์‹  ๋ถ„๋“ค์€ ์—ฌ๊ธฐ ์—์„œ ๋ณด๊ณ ์™€ ์ฃผ์„ธ์š”!) ๊ฐ„๋‹จํ•˜๊ณ  ๋” ํšจ์œจ์ ์œผ๋กœ Form์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ์–ด ์‚ฌ์šฉํ•ด ๋ณด๊ณ  ๊ธ€์„ ์ •๋ฆฌํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค! ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~! ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! React Hook Form์ด๋ž€? React Hook Form์€ Form์„ ์‚ฌ์šฉ ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„  ํ•œ ์ค„๋กœ "์œ ์šฉํ•˜๊ณ  ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๋ฉฐ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ๊ณ ์„ฑ๋Šฅ ํผ ๊ฒ€์ฆ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ" ๋ผ๊ณ  ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ์žฅ์ ์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์„ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€๋กœ ๊ฐ€์„œ ํ™•์ธํ•ด ๋ณด์‹œ๊ธธ.. 2022. 6. 22.
[React Native] Form Component ๋งŒ๋“ค์–ด Screen์— ์ ์šฉํ•ด ๋ณด๊ธฐ(Apply Form Component to Screen) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! React Native์—์„œ Form์„ ๋งŒ๋“ค์–ด ํ•ด๋‹น Screen์— ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~! ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! AddPersonForm.tsx ๋จผ์ € ์‚ฌ๋žŒ์„ ์ถ”๊ฐ€ํ•˜๋Š” Form์„ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. PersonFormType Form์— ๋“ค์–ด๊ฐˆ ํ”„๋กœํผํ‹ฐ๋“ค์„ ์ •์˜ํ•ด ์ค๋‹ˆ๋‹ค. export type PersonForm = { name: string; age: string; gender: string; }; PersonProps Form์˜ ํ”„๋กœํผํ‹ฐ์˜ type์„ ์ •์˜ํ•ด ์ค๋‹ˆ๋‹ค. ์ œ์ถœ ํ•˜์˜€์„ ๋•Œ PersonForm์„ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋ฐ›๋Š” ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค. type PersonFormProps = .. 2022. 6. 22.
[React Native] ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ Custom Modal ๋งŒ๋“ค๊ธฐ (feat. Reusable Custom Modal) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค. ์ €๋ฒˆ ๊ธ€์— Modal์— ๋Œ€ํ•ด์„œ ์•Œ์•„ ๋ณด์•˜๋Š”๋ฐ์š”. (์•ˆ๋ณด์‹  ๋ถ„์€ ์—ฌ๊ธฐ ์—์„œ ๋ด์ฃผ์„ธ์š”!) ์˜ค๋Š˜์€ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปค์Šคํ…€ Modal์„ ๋งŒ๋“ค์–ด ๋ณด๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Modal.tsx ๊ฐ€์žฅ ๋จผ์ € ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์„ import ํ•ด์ค๋‹ˆ๋‹ค. Modal์„ importํ•  ๋• ์ปค์Šคํ…€ ํ•˜๋Š” Component Modal๊ณผ ์ด๋ฆ„์ด ๊ฒน์น˜๋ฏ€๋กœ as๋ฅผ ์ด์šฉํ•ด์„œ DefaultModal๋กœ ๋ฐ”๊ฟ”์ค๋‹ˆ๋‹ค. import { FunctionComponent, useState } from "react"; import { StyleSheet, View, Modal as DefaultModal, Button } from "react-native"; Modal Props ๋ชจ๋‹ฌ์˜ ์†์„ฑ๋“ค์„ ์ •ํ•ฉ.. 2022. 6. 21.
[React Native] Modal component์˜ ๊ฑฐ์˜ ๋ชจ๋“  ๊ฒƒ (Almost Everything in Modal) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์š”์ฆ˜ React Native์˜ modal์„ ๋””ํ…Œ์ผํ•˜๊ฒŒ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~! Modal์ด๋ž€? Modal์˜ ์‚ฌ์ „์  ์˜๋ฏธ๊ฐ€ ๊ถ๊ธˆํ•ด์„œ ์ฐพ์•„ ๋ดค๋”๋‹ˆ ์˜๋ฏธ๋ฅผ ์•Œ ์ˆ˜ ์—†๋Š”.. ๋œป์ด ๋‚˜์˜ค๋”๋ผ๊ตฌ์š”. ๊ทธ๋ž˜์„œ ๊ตฌ๊ธ€๋ง์„ ํ†ตํ•ด์„œ ๋” ์ž์„ธํžˆ ์ฐพ์•„๋ดค๋”๋‹ˆ ์ด ๋ถ„์ด ์ž˜ ์ •๋ฆฌ๋ฅผ ํ•ด๋†“์œผ์…จ๋”๋ผ๊ตฌ์š”. GNUJAVA ์ œ๋ชฉ์—†์Œ jQuery UI 1.6 - The User Interface Library for jQuery (Feb 2009), Dan Wellman Chapter 4. Dialog modal, modality? ์ด๊ฒŒ ๋ฌด์Šจ ๋œป์ผ๊นŒ? ‘modal’ , ‘modality’ ์ด ๋‹จ์–ด, ์ฐธ ๋œป์ด ๋ฌ˜์—ฐํ•˜๋‹ค. ๋„์ €ํžˆ ์‚ฌ์ „์  ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€ www.gnujava.com ๊ฐ„๋‹จํžˆ ๋งํ•ด ๋“œ๋ฆฌ๋ฉด modal.. 2022. 6. 21.
[React Native] Hooks๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์ด์œ  (feat. useState,useEffect) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์š”์ฆ˜ React Native๋ฅผ ๊ณต๋ถ€ํ•˜๋Š”๋ฐ useState,useEffect๊ฐ€ ์ •๋ง ๋งŽ์ด ๋ณด์ด๋”๋ผ๊ตฌ์š”. ์ด๊ฒŒ ๋ญ”์ง€ ๊ทธ๋ฆฌ๊ณ  ์™œ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€ ์ •ํ™•ํžˆ ์•Œ๊ณ ์ž ์ด ๊ธ€์„ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! Hooks Hooks์— ๋Œ€ํ•ด ์ •๋ง ์ •๋ง ๊ฐ„๋‹จํ•˜๊ฒŒ ์„ค๋ช…ํ•ด ๋“œ๋ฆด๊ฒŒ์š”. (์™œ๋ƒํ•˜๋ฉด useState,useEffect๊ฐ€ ๋ชจ๋‘Hooks์ด๊ธฐ ๋–„๋ฌธ์ด์ฃ .) ๊ธฐ์กด์˜ React Native์—์„  ์ƒํƒœ ๊ด€๋ฆฌ์™€ ๋ผ์ดํ”„ ์‚ฌ์ดํด์„ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ Class ํ˜•ํƒœ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์™€ ๊ฐ™์ด Class๋กœ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜๋ฉด ์ฝ”๋“œ๋ฅผ ์žฌ์‚ฌ์šฉ ํ•˜๊ธฐ๊ฐ€ ํž˜๋“ค๊ณ , ๋ผ์ดํ”„ ์‚ฌ์ดํด ๋ฉ”์„œ๋“œ๊ฐ€ ์ถ”๊ฐ€ ๋˜๋ฉด์„œ ์“ธ ๋ฐ ์—†์ด ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ .. 2022. 6. 18.
[React Native] AsyncStorage ์‚ฌ์šฉํ•ด ๋””๋ฐ”์ด์Šค์— ๋ฐ์ดํ„ฐ ์ €์žฅํ•˜๊ธฐ(Store data on a device using AsyncStorage) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ ์ €๋ฒˆ ์‹œ๊ฐ„์— ๋‹ค๋ค˜๋˜ List ํ™”๋ฉด ์„ ๊ธฐ๋ฐ˜์œผ๋กœ AsyncStorage๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ฐ›์•„์˜ค๋Š” ๊ฒƒ์„ ๊ตฌํ˜„ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! AsyncStorage๋ž€? ์•”ํ˜ธํ™” ๋˜์ง€ ์•Š์€ ๋น„๋™๊ธฐ์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” Key-Value ์ €์žฅ ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค. ์•ฑ ์ „์—ญ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, LocalStorage ๋Œ€์‹  ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. Deprecated? React Native ๊ณต์‹ ๋ฌธ์„œ์— Deprecated ๋ผ๊ณ  ๋˜์–ด ์žˆ์–ด '๋” ์ด์ƒ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฑด๊ฐ€..?' ํ•˜๊ณ  ๊ตฌ๊ธ€๋ง์„ ํ•ด๋ดค๋”๋‹ˆ ์›๋ž˜๋Š” React Native ์ž์ฒด์—์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ง€์›ํ–ˆ๋Š”๋ฐ์š”. ์ด์ œ๋Š” ์ž์ฒด ์ง€์›์„ ์ค‘๋‹จํ•˜๊ณ  communi.. 2022. 6. 18.
[React Native] ํ™”๋ฉด ๊ฐ„ ๋ฐ์ดํ„ฐ ์ด๋™ํ•˜๊ธฐ (Passing data between screen) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ ์ €๋ฒˆ ์‹œ๊ฐ„์— ๋‹ค๋ค˜๋˜ List ํ™”๋ฉด ์— ์ด์–ด์„œ ํŠน์ • ์ปดํฌ๋„ŒํŠธ๋ฅผ ํด๋ฆญ ํ–ˆ์„ ๋•Œ ๋‹ค์Œ ํ™”๋ฉด์œผ๋กœ ์ด๋™ํ•˜๊ณ , ๋ฐ์ดํ„ฐ๋ฅผ ํ•จ๊ป˜ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ๋‹ค๋ค„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! Person List Person ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌ์ŠคํŠธ๋กœ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. (๋ฆฌ์ŠคํŠธ ํ™”๋ฉด์€ ์—ฌ๊ธฐ ๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”!) Pressable ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ˆŒ๋ €์„ ๋–„ PersonDetatil ํ™”๋ฉด์œผ๋กœ ์ด๋™ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. (Navigation์— ๋Œ€ํ•œ ๊ฒƒ์€ ์—ฌ๊ธฐ๋ฅผ ์—ฌ๊ธฐ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”) ๊ทธ๋ฆฌ๊ณ  ํ•จ๊ผ ๋ณด๋‚ผ ๋ฐ์ดํ„ฐ๋ฅผ { ์ด๋ฆ„1: ๋ณด๋‚ผ ๋ฐ์ดํ„ฐ1, ์ด๋ฆ„2: ๋ณด๋‚ผ ๋ฐ์ดํ„ฐ2...} ์™€ ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ์ž‘์„ฑํ•ด ์ค๋‹ˆ๋‹ค. PersonListScreen.t.. 2022. 6. 18.
[React Native] Text์— Custom Font ์ ์šฉํ•˜๊ธฐ ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ React Native์—์„œ Custom Font๋ฅผ ๋‹ค์šด ๋ฐ›์•„ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! Download Font ์•„๋ž˜ Google Font๋กœ ์ด๋™ํ•ด ์ค๋‹ˆ๋‹ค. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ์›ํ•˜๋Š” ํฐํŠธ๋ฅผ ๊ณ ๋ฅธ ๋’ค Download family ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ๋ง˜์— ๋“œ๋Š” ํฐํŠธ๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„ ์ค๋‹ˆ๋‹ค. .zipํŒŒ์ผ์„ ์••์ถ• ํ•ด์ œํ•œ ๋’ค assets์— fonts ํด๋”๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ๊ณ  ํ•ด๋‹น .ttf ํŒŒ์ผ์„ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค. Use Cached Reso.. 2022. 6. 17.
[React Native] List์— Component ์ ์šฉํ•˜๊ธฐ (feat. FlatList,Pressable) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ React Native์—์„œ Component๋ฅผ ๋งŒ๋“ค์–ด List์— ์ ์šฉํ•ด ๋ณด๋Š” ๊ฒƒ์„ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. (iOS๋กœ ๋งํ•˜๋ฉด TableView๋ฅผ ๋งŒ๋“ค์–ด Cell์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•˜๋”๋ผ๊ตฌ์š”.) ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! Model Person.ts ๋ฐ์ดํ„ฐ๋ฅผ ๋„์šธ ๋ชจ๋ธ์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. export interface Person { name: string; age: number; gender: string; } Component List์— ๋„์šธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์„ PersonCell๋กœ ๋งŒ๋“ค์–ด ์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค. (iOS ์Šคํƒ€์ผ๋กœ...ใ…Ž) ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ ์•„์ดํ…œ์„ Person์œผ๋กœ ์ง€์ •ํ•ด ์ฃผ๊ณ  ๊ฐ ํ”„๋กœํผ.. 2022. 6. 17.
[React Native] Bottom-Tab ๋งŒ๋“ค์–ด ํ™”๋ฉด ์ด๋™ํ•˜๊ธฐ (Bottom-tab-navigator) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์ด๋ฒˆ์—” ์ €๋ฒˆ Navigation์„ ์ด์šฉํ•˜์—ฌ ์Šคํฌ๋ฆฐ ์ด๋™ํ•˜๊ธฐ ๊ธ€์— ์ด์–ด์„œ Bottom-tab์„ ๋งŒ๋“ค์–ด ํ™”๋ฉด์„ ์ด๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. (ํ•ด๋‹น ์ฝ”๋“œ ๊ธฐ๋ฐ˜์œผ๋กœ ์ง„ํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ˜น์‹œ ์•ˆ๋ณด์‹  ๋ถ„๋“ค์€ ๋ณด๊ณ  ์™€์ฃผ์„ธ์š”!) ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! Install Bottom-tabs npm install @react-navigation/bottom-tabs Vector-icons npm install @expo/vector-icons index.tsx import ๋ฐ”ํ…€ ํƒญ์„ ๋งŒ๋“œ๋Š”๋ฐ ํ•„์š”ํ•œ ๋ชจ๋“ˆ์„ import ํ•ด์ค๋‹ˆ๋‹ค. import { createNativeStackNavigator } from "@react-navigat.. 2022. 6. 16.
728x90
๋ฐ˜์‘ํ˜•