본문 바로가기

분류 전체보기

(34)
react native reanimated, react native gesture handler React Native Reanimated와 React Native Gesture Handler는 모두 React Native에서 애니메이션과 제스처 처리를 개선하기 위해 사용되는 라이브러리입니다. 이 두 모듈은 모두 Software Mansion이라는 회사에서 관리하고 있습니다. 그러나 이 두 라이브러리는 서로 다른 목적과 기능을 가지고 있습니다.React Native Reanimated : 주로 애니메이션을 처리하는 데 사용React Native Reanimated는 React Native 애니메이션 라이브러리로, 성능이 뛰어나고 복잡한 애니메이션을 구현할 수 있도록 설계되었습니다. Reanimated는 애니메이션 로직을 JavaScript 스레드가 아닌 UI 스레드에서 실행할 수 있도록 하여, 애니..
<Image /> react-native 1. 로컬이미지 연결하기  2. 원격 URL에서 이미지 연결 ( 변수처리 : const imageUri = "https://.....";  하여, {{ uri : imageUri }} 로 처리 ) 3. Expo Asset 모듈import React from 'react';import { Image, StyleSheet, View } from 'react-native';import { Asset } from 'expo-asset';const App = () => { const [image, setImage] = React.useState(null); React.useEffect(() => { const loadImage = async () => { const asset = Asset.fr..
Pinch gesture 모든 gestures 의 공통 프로퍼티(Properties)enabled (value: boolean)shouldCancelWhenOutside(value: boolean)hitSlop(settings)withRef(ref)withTextId(testID)cancelsTouchesInView(value) iOS onlyrunOnJS(value: boolean)simultaneousWithExternalGesture(otherGesture1, otherGesture2, ...)blocksExternalGesture(otherGesture1, otherGesture2, ...)active cursor(value) 웹 Only CallbacksonBegin(callback)onStart(callback)onE..
ChatGPT 과 코드 ChatGPT 도 대답을 대충합니다. 간단히 물어보면, 표면적인 대답을 하기 마련이죠. 그래서 프롬프트를 별도로 공부해야 한다고 합니다. 최근 GPT에 재미를 보았고, 점점 의존적으로 가는 과정에, 절대 과신하지 말어야 겠다는 경험을 했습니다. 첫째로, ChatGPT의 코드도 오류가 있음을 경험했고,둘째로, 의도와 달리 근시안 적이 해결 책을 내놓을 때가 있다는 것입니다. 문제는 이 어느 경우도 질문자에게  확신을 갖고 제시를 하며, 이 전에 받은 "방긋"한 해결책에 덜걱 코드를 삽입하고 "돌아가니까" 실행하는 오류를 경험 했습니다.  여기 정리를 해보려 했으나, 그 또한 기~~인 이야기, 긴 시간을 소비 할 것 같아 생략하고, 상상에 맡깁니다. 물론 질문자의 잘못이 80%입니다.  몇 일의 시간이 들어..
Expo SDK 51 - iPhone 아이폰은 자동으로 EXPO GO 가 SDK51로 업데이트가 되었어요.이제 구버전의 EXPO SDK는 iPhone 에 설치 할 수가 없습니다.iOS simulator, Android 기기 또는 안드로이드 에뮬레이터에만 하위 버젼 SDK50등을 설치 할 수 있습니다. 기존에 deploy한 앱은 당분간 다른 기기를 통해서 작업을 이어가는 것이 맞습니다. 바로 업그레드는 현재 "강력반대" 입니다. 디펜던시 충돌과 관련 메시지도 불충분하기 때문입니다. 구버전의 SDK를 다운 받을 수 있는 곳은 https://expo.dev/go  입니다.
Google Fonts - expo expo 프로젝트에서 폰트를 사용하는 방법을 몇가지 소개합니다.1. fontFamily 를 사용하지 않으면, 안드로이드, iOS 각각의 디폴트 폰트가 사용됩니다.2. system font 로 사용하기 - expo SDK50 이상 사용 가능 (  expo documents 참조 )3. Runtime에서 사용하기 -  아래 예제는 google font 를 이용한 예제 입니다.npx expo install @expo-google-fonts/balsamiq-sans expo-fontimport { useCallback } from 'react';import { StyleSheet, Text, View } from 'react-native';import { useFonts, BalsamiqSans_400Regul..
<Image /> - React Native, Next.js React Native에서 Image 로 아이콘설치 예//import { View, Text, Image, Platform } from "react-native";특히 아이콘의 크기 조절 목적으로 resizeMode 를 많이 쓰게 됨cover: Scale the image uniformly (maintain the image's aspect ratio) so thatboth dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding)at least one dimension of the scaled image will be equal ..
TypeScript 와 JavaScript 혼용 결론 부터 이야기 하면, "가능" 합니다. Expo React Native 프로젝트에서는 TypeScript(.tsx) 파일과 JavaScript(.js) 파일을 혼용하여 작업할 수 있습니다. TypeScript와 JavaScript 파일을 혼용하여 작업하는 것은 컴파일러 및 빌드 시스템에 문제를 일으키지 않습니다. Expo는 내부적으로 Babel을 사용하여 TypeScript 파일을 JavaScript로 변환하므로 TypeScript와 JavaScript를 혼용하여 사용하는 것은 문제가 되지 않습니다. 기존에 JavaScript 파일이 있거나 특정 파일이 타입스크립트로 변환하는 데 시간이 많이 소요될 수 있다면 JavaScript 파일을 계속 사용할 수 있습니다.
Drawer - Expo router v3 - SDK50 expo router V3 template 로 설치를 하고, Drawer Navigation 효과를 내려면, Documents에서 처럼 아래 3가지 추가 라이브러리를 설치하고도 몇가지 경험을 적어 봅니다. Docs 참고(https://docs.expo.dev/router/advanced/drawer/) npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated 경험상 문제는 babel.config.js 에 다음 처럼 수정합니다. module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], pl..
useFonts() React Native 애플리케이션에서 사용되는 useFonts() 을 통해 폰트를 로드하는 예시를 보겠습니다. 기본 템플릿을 설치하면 다음의 코드를 app>_layout.tsx>RootLayout() 에서 볼 수 있습니다. import { useFonts } from 'expo-font'; const [loaded, error] = useFonts({ SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), ...FontAwesome.font, }); useEffect(() => { if (error) throw error; }, [error]); useEffect(() => { if (loaded) { SplashScreen.hideAsync(); ..