Frameworks/React Native

👉 react-native-reanimated 란? 빠르고 부드러운 애니메이션을 만들어주는 React Native 라이브러리 특징 React Native 메인 스레드가 아닌, UI 스레드에서 실행된다. 원리 React Native에서, app 코드는 메인 스레드 외부(UI스레드)에서 실행된다. - js가 할일이 많은 경우 프레임 드롭 방지 - 터치에 대한 즉각적인 반응 불가능 ( 메인스레드에서 수행된 사항을, 바로바로 반영할 수 없다. ) 가상머신을 사용해, UI스레드에서 동기적으로 실행할 수 있는 작은 JS코드인 "Worklet"을 만들어 사용한다. 메인 스레드에 가해지는 로드에 대해 신경쓰지 않아도 된다. 이벤트가 발생할때, 터치 이벤트에 즉시 응답하고 동일한 프레임 내에서 UI를 업데이트 할 수 있다.

1. Certificates Apple의 특정 소프트웨어를 실행하기 위해 허가를 받아야 한다. 2. App ID Apple에서 나의 앱을 구분할 수 있도록 id를 만들어야 한다. 3. Device 테스트할 Apple기기를 등록해야 한다. ( 최대 100개 ) 4. Provisioning Profiles Apple 기기에서 개발자를 신뢰 할 수 있도록, 위의 3가지 정보를 하나로 묶어주어야 한다.

👉 Native UI란? 네이티브 코드를 사용한 UI 필요성 React Native에서 지원하지않는 기능을 컴포넌트로 만들어 사용가능 👉 Android UI XML 형식으로 작성하며, 이를 클래스와 연동시켜준다. 레이아웃 만들기 View 클래스 만들기 레이아웃을 React Native에서 사용하도록 함

👉 네이티브 모듈이란 React Native에서 지원하지 않는, Android,IOS 만의 전용 기능을 가진 코드 👉 Android 네이티브 모듈만들기 ( Java ) Android Studio > ReactNative 프로젝트 / android 폴더 열기 모듈 클래스 만들기 // app/java/com.nativemoduleworkshop/ToastModule.java package com.nativemoduleworkshop; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import ..

👉 react-native-asset 이용하기 react-native.config.js의 assets을, android와 ios에 연결해준다 // react-native.config.js module.exports = { assets: ["./assets/fonts"], }; npx react-native-asset

👉 Alert 구성요소 설명 및 사용법 Alert.alert( '삭제', // 제목 '정말 삭제하시겠어요?', // 설명 [ // 버튼 추가 {text: '취소', style: 'cancel'}, { text: '삭제', style: 'destructive', // 버튼 스타일 지정 onPress: () => { // 버튼 콜백함수 지정 onRemove(log?.id); navigation.pop(); }, }, ], { // 옵션 추가 cancelable: true, // 취소 버튼 활성화 }, );

👉 react-native-oss-license 란? React-native 에서 사용한 오픈소스 라이브러리들의 라이센스(저작권)을 한번에 보여준다. 설치 npm i react-native-oss-license 사용법 react-native-oss-license --json --only-direct-dependency ⭐️ 팁 license.js 파일로 만들면 prettier로 예쁘게 볼 수 있다. // license.js const license = [{ 콘솔창에 나온 Json 형식 문자열 복사하기 }]

👉 react-native-modal-datetime-picker 란? React Native에서, 시간 관련 선택창을 보여주는 Node.js 라이브러리 설치 npm i react-native-modal-date-time-picker 사용법 function onConfirm(){...} function onCancel(){...} return( {} onCancel={onCancel} // 날짜 선택 취소시, 호출 함수 지정 mode="date" // 모드 선택 : date, time, datetime date={new Date()} // 초기 날짜 지정 isVisible={visible} // true시 보여줌, false시 숨김 /> )

👉 pod install이란? React Native ios 개발환경에서 javascript 라이브러리를 ios 네이티브 코드와 연동하는 것 필요성 pod install 을 해야만, javascript 코드를, ios Native (Objective-C)코드로 변경할 수 있다.