상상을 현실로 상상을 현실로

for(const v of ['a','b','c']) { console.log(v) // 출력 a b c } for of 문을 사용할 때 index 값이 필요를 할 때가 있는데 위의 루프에서는 제공 되지 않습니다. 하지만 ES6에 도입된 entries() 메서드를 사용하여 index를 사용할 수 있다. for(const [i,v] of ['a','b','c'].entries() ){ console.log(i,v) // 출력 0,a 1,b 2,c } 참고 https://flaviocopes.com/how-to-get-index-in-for-of-loop/ How to get the index of an iteration in a for-of loop in JavaScript A for-of loop, in..

키보드의 높이의 정보를 가지고 작업을 할 때 유용합니다. import import { Keyboard } from 'react-native'; Custom Hooks import {useState, useEffect} from "react"; import { Keyboard, KeyboardEvent } from 'react-native'; const useKeyboard = () => { const [keyboardHeight, setKeyboardHeight] = useState(0); function onKeyboardDidShow(e: KeyboardEvent) { setKeyboardHeight(e.endCoordinates.height); } function onKeyboardDidHide()..

빌드했는데 iOS 시뮬레이터에서 위와 같은 에러가 발생한 경우는 info.plist 파일에 사용할 폰트나 아이콘을 등록하지 않을 경우 발생한 Error입니다. ios/[프로젝트 명]/Info.plist UIAppFonts // 사용 할 폰트나 아이콘 이름을 추가 AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf Foundation.ttf Ionicons.ttf MaterialIcons.ttf MaterialCommunityIcons.ttf SimpleLineIcons.ttf Octicons.ttf Zocial..

TextInput을 사용할 때 android 일 경우에 키보드가 레이아웃 화면의 비율에 영향을 주는 경우가 있다. 이런 경우에는 설정해 놓은 레이아웃 비율이 깨지거나 화면 잘림이 발생하는데 android 설정을 해주면 해결이 된다. android/app/src/main/AndroidManifest.xml {...} {...} {...} 특성 종류 특성 설명 stateUnspecified (Default) 시스템이 적절한 키보드 상태를 설정해줍니다. stateUnchanged 활동이 앞으로 나올 때 소프트 키보드가 마지막으로 사용된 상태(숨김 또는 표시)를 유지합니다. stateHidden 액티비티를 실행했을 때 키보드가 자동으로 올라오는것을 방지합니다. stateAlwaysHidden 활동의 기본 창에 ..

android 빌드할 때 발생한 오류 > Task :app:checkDebugAarMetadata FAILED 해결법 compileSdkVersion를 바뀐 뒤에 빌드를 하니까 에러가 없어졌습니다. // android/build.gradle buildscript { ext { compileSdkVersion = 31 .... 참고 https://github.com/OneSignal/react-native-onesignal/issues/1318#issuecomment-969103301 Execution failed for task ':app:checkDebugAarMetadata'. · Issue #1318 · OneSignal/react-native-onesignal Description: I creat..

AsyncStorage 란? 데이터를 Local 데이터베이스에 저장할 때 사용합니다. AsyncStorage도 state, redux와 같이 데이터를 저장할 수 있는 것은 같습니다. 하지만 state는 앱이 꺼지거나, Screen의 이동이 일어나면 값이 보장되지 않고 사라질수 있기 때문입니다. 그래서 AsyncStorage를 사용하여 앱이 꺼져도 써야하는 데이터의 경우 Local 데이터베이스에 저장합니다. install npm i @react-native-community/async-storage 사용법 import AsyncStorage from "@react-native-community/async-storage"; // 정보 저장 AsyncStorage.setItem('Token','token in..

State 컴포넌트의 내부에서 선언되며, 컴포넌트의 상태를 가지고 있고, 상태를 변화할 수 있다. 이러한 state는 외부에 공개하지 않고, 컴포넌트가 스스로 관리한다. 상태에 따라 변화함 직접 변경 가능 state가 변경되면 컴포넌트를 다시 렌더링 함 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리함 외부에는 비공개 Props props는 Properties의 줄임말로써, 컴포넌트로 데이터를 전달한다. 자식 컴포넌트는 상속하는 부모 컴포넌트로부터 props를 받고, 자식 컴포넌트 내에서 수정이 불가능하다. 리액트에서는 부모 > 자식의 일방향성 상속이라는 특징 때문이다. 읽기 전용 직접 수정이 불가능 부모 컴포넌트에서 설정하는 것 함수 매개변수처럼 컴포넌트에 전달됨 props가 변경되면 컴포넌트가 다시 ..

react-native-image-picker 란? 사진첩에서 이미지를 선택하거나 카메라로 사진을 촬영할 때 사용하는 라이브러리입니다. install npm install react-native-image-picker yarn add react-native-image-picker # RN >= 0.60 cd ios && pod install # RN < 0.60 react-native link react-native-image-picker iOS 권한 설정 iOS에서 이 라이브러리를 사용하려면 ios/Info.plist 파일을 열고, 태그 사이의 다음의 코드를 추가해야 합니다. 이 작업은 카메라 및 갤러리 사용 권한을 위한 설정 세팅 과정입니다. ... NSPhotoLibraryUsageDescripti..