Fomagran 💻

본문 바로가기

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.

이전 1 2 3 4 5 6 7 ··· 49 다음

728x90

티스토리툴바