React-Native(1. Movie)

1-1.공식문서https://reactnative.dev/docs/environment-setup1\. window and android choicechoco로 node-lts openjdk11설치3.android studio, SDK, SDK platform

\-들어가기앱을 시작하기 전에 Font, Image들을 미리 불러들임.expo install expo-app-loadingexpo install expo-fontexpo install expo-assetimport AppLoading from 'expo-app-load

https://reactnavigation.org/docs 항상 공식문서 확인하면서 할 것 npm install @react-navigation/native expo install react-native-screens react-native-safe-area-cont

다양한 option들은 공식문서에서 확인하기.

navigation 폴더에 Root.js 파일을 생성\-nativeStack Nav를 만든다음component에 Tab Nav와 Stack Nav를 설정한다.Nav간 Screen이동.navigation:{navigate}를 먼저 입력하고Screen에서 이동하려는 com

import { Ionicons } from '@expo/vector-icons'https://icons.expo.fyi/

https://reactnative.dev/docs/typescript\-Adding TypeScript to an Existing Projectnpm install -D typescript @types/jest @types/react @types/react-

~ > 1.use import styled from 'styled-components/native' npm i styled-components

1-1.make styled.js1-2. usein App.js36번, 47~52번 주의깁게 볼것.사용!background-color:${props=> props.theme.mainBgColor}

fetch, Swiper, ActivityIndicator, Dimensions, BlurView,ScrollviewMovies 함수의 type 다 확인해볼것!!!!!

setRefresh 값이 true이면 계속해서loading........!최상위 container에 넣어주면 됩니다.

1. React-Query setting npm i react-query https://react-query.tanstack.com/overview ~

\-fetch부분은 자주 쓰이기 때문에 component로 분리fetch는 자주 쓰이기 때문에 component로 분리반드시 fetch(\~\~\~~).then((res)=>res.json()) json으로 받을것export cont moviesApi= {trendin

최종으로 interface MovieResponse를 쏴 주는데 Movie는 BaseResponse를 extends하고, interface Movie를 받아서배열로 쏴줌. Movie\[]참고로 interface Movie도 export 해 주어야 함.check!!!

1. serch, query, refetch Search.tsx ~ SearchBar component를 styled.TextInput로 만듬 [query, setQuery] = useState('')를 만들어서 query값을 담을 State를 만듬 onChan

type RootStackParamList = { Detail: Movie }==>ai.ts 에서 만들었던 interface Movie를 타입으로 불러온다.여기서 받는 params가 Movie에서 오기 떄문이다.2.type DetailScreenProps = Nativ

https://reactnative.dev/docs/share공식문서

Screen에서 Loading을 한꺼번에 하지않고 화면이 밑으로 도달할때 쯤, 다시 Loading을 함.블랙핑크 제니의 인스타그램 follow를 본다고 생각해 보면됨.very difficult ㅜㅜ 초집중이 팔요함.https://react-query.tanst

https://reactnative.dev/docs/scrollview https://reactnative.dev/docs/flatlist 공식문서~ scrollview는 한번에 모든 data rendering so this has a performance dow