개발 React Native Expo TypeScript Expo Router * navigation 방법 - : 컴포넌트를 통한 navigation - router.push("/...") : 이벤트 발생시 navigation https://docs.expo.dev/routing/navigating-pages/ Navigate between pages Create links to move between pages. docs.expo.dev https://www.youtube.com/watch?v=yyGS0adZdsU&list=LL&index=8&t=5351s * params 전달 방법 - useGlobalSearchParams() - useLocalSearchParams() https://docs.exp..
expo
개발 React Native Expo JavaScript Donut chart https://dev.to/franciscomendes10866/how-to-create-a-donut-chart-using-react-native-svg-30m9 How to Create a Donut Chart using React Native SVG Overview One of the things we all end up needing to do at some point in our career is... dev.to * animation version. https://www.youtube.com/watch?v=x2LtzCxbWI0 Bottom Sheet @gorhom/bottom-sheet@^4 : 많이 쓰이지만, De..
1. axios 라이브러리 설치 yarn add axios axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청 2. 사용 const TestApi = async() =>{ try{ const response = await axios.get( //api 주소 ); console.log(response.data) }catch(e){ console.log(e) } } TestApi() 참고 https://react.vlpt.us/integrate-api/01-basic.html 1. API 연동의 기본 · GitBook 1. API 연동의 기본 API 연동을 하기 위해서, 우선 프로젝트를 새로 만들어주도록 하겠습니다. $ npx create-react-app api-int..
0. 문제 한 page단위로만 Album assets를 받아옴 (대략 20개) const { assets } = await MediaLibrary.getAssetsAsync(); 1. 해결 MediaLibrary.getAssetAsync()로 반환되는 PagedInfo의 endCursor(마지막 asset id)를 이용 → AssetsOptions를 { after : endCursor }로 하는 MediaLibrary.getAssetAsync( { after : endCursor } ) 실행 → endCursor부터 한 page 단위 assets 가져와서 기존 앨범 사진 뒤에 추가한다. FlatList의 onEndReached를 통해 계속 가져와서 기존것에 추가 반복.. * PagedInfo의 hasNe..
0. 설치 npx expo install expo-media-library config plugin이 프로젝트에 있는 경우 { "expo": { "plugins": [ [ "expo-media-library", { "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.", "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.", "isAccessMediaLocationEnabled": true } ] ] } } 1. 앨범 권한 앨범 접근 권한을 묻고, 접근 권한을 얻으면 앨범 컴포넌트로 이동 const { status: albumStatus } = await MediaLibrary.r..
0. 설치 npx expo install expo-camera config plugin이 프로젝트에 있는 경우 { "expo": { "plugins": [ [ "expo-camera", { "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera." } ] ] } } 1. 카메라 권한 카메라 접근 권한을 묻고, 접근 권한을 얻으면 카메라 컴포넌트(CameraScreen.js)로 이동 const { status: cameraStatus } = await Camera.requestCameraPermissionsAsync(); // 권한을 획득하면 status가 granted 상태 if (cameraStatus === 'granted') { navig..
0. 파일구조 * TypeScript인 경우 1,2 과정 생략하고 tsconfig.json만 설정해도 됨! 1. babel-plugin-module-resolver 설치 babel-plugin-module-resolver는 Babel 플러그인으로, 모듈 경로를 재정의하거나 별칭(alias)을 설정하여 절대경로로 import 할 수 있게 한다. Babel : ES2015 이상의 최신 명세의 문법을 구형 브라우저에서도 동작하는 코드로 트랜스파일해주는 개발 도구 : 개발 환경에서만 필요한 패키지 이므로 --save-dev 옵션이나 -dev 옵션을 추가하여 devDependencies에 설치한다. npm 문서: https://www.npmjs.com/package/babel-plugin-module-resolv..
