반응형 전체 글280 **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. ? 와 ?? 를 사용하는 방법 (Expressions & operators) const originArr=['apple','pear'] const newWord = ['banna'] const copiedlist = [...originArr, newWord[0]]; copiedlist => ['apple','pear','banna'] javascript 에서는 아래와 같은 문법이 있습니다. Conditional (ternary) operator (조건 삼항연산자 ) 조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. condition이 참(truthy)일경우 exprIfTrue 이 실행, 조건문이 거짓(falsy)일 경우 exprIfFalse 가 실행된다. condition ? exprIfTrue : exprIfFalse 아래.. 2023. 1. 28. 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. React Query 를 사용해보자. : useQuery React Query 설치 및 기본 사용방법 (useQuery)Hooks 를 이용해서 Fetch 데이터에 접근 할 수 있게 해주고, 데이터를 알려준다. 또한 Loading stats, caching , 무한 스크롤 지원함. 설치 $ npm i react-query # or $ yarn add react-query 사용방법 step 01. import 해준다. queryClient 를 생성한다. 로 app(데이터를 사용할 컴포넌트) 을 감싼다. //App.js import { QueryClient, QueryClientProvider, } from 'react-query' // Create a client const queryClient = new QueryClient() function App() { r.. 2023. 1. 25. 리스트를 표현하는 ScrollView VS FlatList 어느것을 써야하는가. 출처 : https://reactnative.dev/docs/scrollview , https://reactnative.dev/docs/flatlist 리스트를 표현하는 ScrollView VS FlatList 어느것을 써야하는가. 여러가지 항목을 리스트로 구현하고자 할때, ScrollView와 FlatList 를 고려하게 된다. 각각의 특징과 장단점을 알아보고 선택할 수 있으면 좋겠다. 위 스크린 샷은 ScrollView와 FlatList로 각각 구현해보았다. ScrollView 에는 자식으로 ScrollView, Swiper,Text 등 여러가지를 가질 수 있다. 그리고 동시에 모든 자식컴포넌트를 렌더링한다. 모든 자식컴포넌트를 매번 동시에 렌더링하므로 무한 리스트나 많은 양의 데이터를 표시할 경우 .. 2023. 1. 24. ** BUILD FAILED ** Unable to find expo in this project - have you run yarn / npm install yet? > netflify@1.0.0 start > expo start Starting project at /Users/ju_yeonkim/ReactNativeProject/netflify05 Unable to find expo in this project - have you run yarn / npm install yet? 갑자기 위와 같은 에러와 함께 npm start 가 되지 않는다면, 찾아낸 두가지 원인 1. expo 라이브러리 중 설치되지 않은 것이 있는지 확인해본다. 확인 방법은 import하여 사용한 라이브러리가 node_modules 폴더에 잘 있는지 보면 된다. 없다면 설치해준다. 2. expo 버전의 불일치 나의 경우였는데, 나는 왜인지 expo 1.0.0 버전을 사용중이었다. 그래서 pack.. 2023. 1. 23. 이전 1 ··· 11 12 13 14 15 16 17 ··· 35 다음 반응형
