반응형 개발로그/ReactNative47 React Native Animated - 애니메이션 value 를 수정하기 위해 사용하는 것들. 예제 포함 이전글 2023.01.31 - [개발로그/ReactNative] - react native Animated 를 사용할때 알아야할 절대 Rules! ReactNative Animatied 제공받을 수 있는 3가지 애니메이션 Animated.decay() # 초기 설정된 속도로 시작해서 점점 느려지고 멈춘다. Animated.spring() # 물리모델을 지원한다. Animated.timing() # 대부분의 경우 타이밍을 사용한다. Animatied.timing() import React from "react"; import { Animated, StyleSheet, TouchableOpacity } from "react-native"; const Container = styled.View``; const.. 2023. 1. 31. react native Animated 를 사용할때 알아야할 절대 Rules! 01. 변수가 필요하다면, Animated에서 생성해서 사용한다. state로 변수를 생성하면 모든 컴포넌트가 re-rendering(다시 그리기) 돼버린다. 그러므로 Animated에서 무조건 생성한다. #초기값이 0인 변수 Y를 생성한다. const Y = new Animated.Value(0); 02. 변수에 값을 변경한다면 절대 절대 절대 절대 이렇게 하지 않는다. # 변수값을 직접 변경하지 않는다. Y = 20 03. Animated 될 수 있는 것에만 Animated 를 시도한다. ㅋㅋ createAnimatedComponent()를 사용해서 Animatable component로 변경한 뒤에 사용한다. # 이렇게 하지 않는다. 2023. 1. 31. 처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋 환경 Mac OS 13.2 Xcode 14.2 React Native v0.70.5 ( v0.71.3 is currently newer) node 16.0.0 expo ~47.0.12 프로젝트 생성 dear-diary 라는 이름의 프로젝트 생성 --use-npm : npm 을 이용하여 의존성설치를 하겠다. npx create-react-native-app dear-diary --use-npm Default new app (선택) cd dear-diary expo splashscreen 을 기본 템플릿에 포함하기를 원한다면, npx create-react-native-app -t with-splash-screen # 단, with-splash-screen 템플릿을 선택한다면 ios/android 폴더가 생.. 2023. 1. 31. 처음부터 해보는 npx react-native init AwesomeProject with ios 세팅! 나만의 프리셋 많은? 연습용 프로젝트를 생성해서 만들어도 맥에서 개발하는데도..안드로이드 시뮬레이터만 돌아간다. OTL. 이번에야 말로 IOS 시뮬을 켜보리라.. 해서 다시 정리하며 한땀한땀 고쳐보리라. 기본뼈대는 reactnative.dev 의 Setting up the development environment 를 토대로 하였으며, 각각의 버전확인 및 버전 변경방법 등도 다 적어둘 것이다. 두번다시 같은 삽질은 안할테다. 1. Development OS Mac OS 13.2 2. 설치해야하는 것들 각각의 버전은 현재 내가 설치한 버전이고 의존성이 있어서 어느 Node 18버전을 설치한 사용자라면 나머지 버전을 똑같이 한다해도 에러가 나게 된다. 즉. 노드버전 16.x 를 비롯해 다른 것들도 모두 버전을 맞추는 것이.. 2023. 1. 30. **BUILD FAILD** xcode_env_generator 를 생성시키는 버전으로 expo-modules-autolinking 의 버전을 맞춰보자. `pod install` failed. cannot load such file /node_modules/expo-modules-autolinking/scripts/ios/xcode_env_generator. npx pod-install 수행시 아래처럼 xcode_env_generator 파일이 없다며 나는 오류를 만났다. Couldn't install Pods. Updating the Pods project and trying again... Command `pod install` failed. └─ Cause: Invalid `Podfile` file: cannot load such file -- /Users/ju_yeonkim/ReactNativeProject/netflify05 /node_modul.. 2023. 1. 29. React Query 에서 모든 캐쉬된 쿼리에 권한을 갖는 QueryClient 사용법 그리고 개념정리 (이전글) 2023.01.26 - [개발로그/ReactNative] - React Query 중요한 개념 : 캐싱과 쿼리 키 React Query 중요한 개념 : 캐싱과 쿼리 키 캐싱 useQuery를 사용하여 쿼리된 데이터는 "trending"이라는 키로 명명되어 React Query 캐시에 저장된다. 캐시에 저장된 데이터를 불러 사용할수 있고 변형시킬 수도 있다. const { isLoading: trendingLoading, d greenerydeveloper.tistory.com 이전 글에서 refetch 하는 방법을 적었었다. useQuery를 사용하면서 반환되는 옵션들 중 refetch 를 받아 명시적으로 호출하는 것. // 쿼리 선언시 refetch 함수를 반환받는다. const { isLo.. 2023. 1. 27. CRNA로 만들어진 사이드프로젝트 Netflify 앱- Movies 화면 스냅샷 Netflify 영화와 TV 정보를 가져와 최신소식을 보여주는 간단한 앱 - Netflify(넷플리파이) 앱 설명 처음에는 넷플릭스를 대상으로만 최신 트랜드를 보여주고 싶었으나, 필터링 하는것이 까다로워 일단 모든 OTT를 대상으로 최신 정보만을 일주일 단위로 표시하도록하였다. Movies 스크린 사용한 기능설명 현재는 하단 탭 중 Movies 만 구현되었고, ScrollView로 구현된 리스트를 FlatList로 수정해봤다. Movies 구역은 swiper로 자동으로 화면이 넘어간다. 사용자가 컨트롤 할 수는 없다. Trending Movies 는 오른쪽으로 스크롤하는 리스트, Comming Soon은 아래로 내려가는 리스트이다. Trending Movies 에서는 카드이미지와 제목, 별점이 하나의 컴.. 2023. 1. 26. React Query 중요한 개념 : 캐싱과 쿼리 키 캐싱 useQuery를 사용하여 쿼리된 데이터는 "trending"이라는 키로 명명되어 React Query 캐시에 저장된다. 캐시에 저장된 데이터를 불러 사용할수 있고 변형시킬 수도 있다. const { isLoading: trendingLoading, data: trendingData } = useQuery( "trending", moviesAPI.treding ); 만약 같은 화면에 위와 같은 동일한 쿼리를 사용했다면, react query 는 다시 fetch 하지 않고 캐시에서 데이터를 가져온다. 동일한 쿼리를 다른 컴포넌트에서 사용했다면 역시나 fetch가 다시 일어나지 않고 캐시에서 가져온다. 어떤 쿼리를 동일한 쿼리로 취급하고 또는 다른 쿼리로 취급한다는 말인가! // 동일한 것으로 간주되는.. 2023. 1. 26. 이전 1 2 3 4 5 6 다음 반응형
