Frameworks/React Native

app.json 이란? 엑스포 프로젝트의 설정파일 실제 파일 모습 { "expo": { "name": "bare_project", // slug가 바뀌면, expo가 이를 감지하고 즉시 배포(publish)한다. "slug": "bare_project", "version": "1.0.0", "assetBundlePatterns": ["**/*"], "ios": { // plist 파일설정을 추가하는 부분 "infoPlist": { "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to use the camera", "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to use the microphone" } } } }

nvm으로 Node.js 16 lts 설치 nvm install 16 Node.js 16 lts 사용 ( expo 명령어 사용시 ) // 현재 expo는 node.js 17미만의 버전만 지원한다. nvm use 16 expo 프로젝트 생성 expo init ch9_1 // 4번째 bare workflow 선택 Typescript 설정 파일 생성 tsconfig.json Typescript 파일로 변경 App.js >> App.tsx expo start 로, Typescript 필수 라이브러리 내려받기 expo start 설치 패키지 ( template 사용시 ) expo install react-native-gesture-handler react-native-paper faker@5.5.3 moment ..

AndroidManifest.xml 파일이란? 리액트 네이티브가 스마트폰의 기능을 사용하려고 할때, 작성해야 하는 파일 expo에서 자동으로 작성한 파일

AsyncStorage란? React Native의 키-값 형태의 데이터 영구 저장소 - 문자열만 저장가능 - 앱 전체에 적용됨 - 암호화 되지 않음 - 비동기 방식으로 동작 - 영구 저장 ( 지울때까지 보존 ) - 브라우저의 LocalStorage와 비슷하다. ( 브라우저는 동기식 ) AsyncStorage에 데이터 저장하기 AsyncStorage.setItem(키, 값) .then(() => console.log('저장 성공')) .catch(e => console.log('오류', e.message)) /* AsyncStorage: { 키 : 값 } */ AsyncStorage에서 데이터 가져오기 AsyncStorage.getItem(키) .then(() => console.log('가져옴')) ...

Animated.Value() 메모리에 보간값 ( 0 ~ 1 )을 저장하기 위한 클래스 애니메이션 효과를 주기 위해서, 보간값을 사용해야한다. ( 보간값 - 매우 작은단위로 변화하는 값, 0 -> 0.0001 -> 0.0002 -> ... -> 0.9999 -> 1 ) Animated.CompositeAnimation 하나의 애니메이션 동작을 담고 있는 객체 하나의 애니메이션을 관리하는 메서드 Animated.timing() - delay 지정 가능Animated.spring() 여러개의 애니메이션을 관리하는 메서드 Animated.sequence(CompositeAnimation[]) - 일정 딜레이로 여려개의 애니메이션 관리 Animated.stagger(delay ,CompositeAnimation..

react-native-paper란? React native에서, UI 색상을 쉽고 세련되게 꾸밀 수 있도록 도와주는 Node.js 패키지 React Native Paper React Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases. reactnativepaper.com react-native-paper 설치 npm i react-native-paper react-native-paper 사용하기 Colors 객체에서, 색상 정보를 꺼내 사용한다. ( 파란색 - Colors.blue500 ) 500 : 주색상 200 : 주색상의 연한 버전 70..

npm run android 과정 앱 처음 실행시 필요한 ES5 javascript 코드를 전달하기위해, 메트로 서버 실행( npm start ) react native 프로젝트 내부의 android 폴더로 이동 ( cd android ) android/app/build.gradle파일을 참조해, 에뮬레이터에 앱 설치 ( ./gradlew installDebug ) - 빌드 설치완료시, node_modules/.../native_module.gradle 파일을 참조해, 안드로이드용 네이티브 모듈 설치 ( gradle에게 설치지시 ) npm run ios 과정 앱 처음 실행시 필요한 ES5 javascript 코드를 전달하기위해, 메트로 서버 실행( npm start ) react native 프로젝트 내..

에러 발생 React Native 프로젝트를 생성하고, ios 가상기기를 빌드할때 발생 ( react-native run-ios ) 에러 발생 이유 해당 오류는 현재 사용중인 Node의 버전이 지정되어 있지 않아서 발생하는 오류이다. 해결 방법 1. 현재 사용하는 Node.js 버전 확인 node -v 2. 현재 사용하는 버전의 nvm 설치 ( 예시 ) nvm install v18.0.0 에러 전문 N/A: version "default -> N/A" is not yet installed. You need to run "nvm install default" to install it before using it. Command PhaseScriptExecution failed with a nonzero e..

Watchman이란? 폴더나 파일을 감시하고 있다가, 변화가 생기면 자동으로 원하는 기능을 실행 할 수 있도록 하는 프로그램 Watchman A file watching service Watchman exists to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change. Concepts Watchman can recursively watch one or more directory trees (we call them roots). Watchman does not foll facebook.github.io Watchman 설치 ( 맥 ) b..