일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 개발콘텐츠
- React Native
- 반복줄이기
- vue.js
- 타입스크립트
- JS console
- 타입좁히기
- 공통컴포넌트
- reactjs
- NonNullable
- CSS
- javascript
- const 단언문
- react
- 누구나 자료구조와 알고리즘
- typescript
- 제네릭
- click and drag
- utilty type
- 리액트
- 폰트적용하기
- Chart.js
- 성능최적화
- React.js
- 2022
- 커스텀
- returnType
- TSDoc
- 레이아웃쪼개기
- 티스토리꾸미기
- Today
- Total
목록Development/React Native (12)
몽땅뚝딱 개발자
🚀 비교 JSCHermes특징 meta에서 React Native만을 위해 만들었다.컴파일 방식JIT(Just-In-Time)런타임에 코드를 컴파일하는 JIT(Just-In-Time)을 사용한다.AOT자바스크립트 코드로 실행 전 네이티브 머신 코드로 컴파일하는 선행 컴파일(AOT)을 사용한다. 미리 컴파일하여 바이트코드 형식으로 변환한다. 이를 통해 앱 시작 속도가 빨라지고 런타임 성능이 향상된다.성능 헤르메스는 일반적으로 JSC보다 빠르며, 특히 저가형/구형 기기에서 더 빠르다.메모리 사용량메모리 관리를 위해 자동 가비지 컬렉션을 제공하며 IOS와 macOS 환경에서 최적화가 잘 되어있지만 메모리 사용 측면에서는 헤르메스보다 다소 무겁다고 평가된다. 하지만 최신 하드웨어에서는 성능차이가 크게 나지 않..
보호되어 있는 글입니다.
1. 자체에서 제공하는 디버깅툴 사용 - Open Debugger: 사용하는데 한계가 있어서 Reactron을 선택했다.- Element Inspector: 간단히 padding, margin 같은 속성을 체크하기는 좋다. 하지만 각 요소를 웹 개발자도구처럼 각 태그나 class명, 부모-자식 관계를 명확히 파악할 수 없어서 상세하게 보기가 힘들다. 대책 마련 중..(🔨) 2. Reactron커넥션 별로 확인할 수 있다. 더 많은 기능이 있는데 아직 사용해보지는 않았다. 1. TimelineAPI 호출 시 Request, Response를 굉장히 상세히 사용할 수 있으며 각 요청을 손쉽게 복사하여 공유할 수 있다. (이게 가장 편리하다!) 2. State: Redux, mobX 같은 상태관리 라이..
프로덕션 배포를 하려고하니 광고 ID에 대한 정책을 업데이트하라고 해서 광고를 사용하지 않으니 "아니오"로 선언했으나..자꾸 문제라고 하는 것이다 ^^ !! 콱👊🏻 알고보니 추가했던 관련 설정들이 문제였다.Firebase Crashlytics와 Firebase Analytics를 연동했다면 AD_ID 권한이 자동으로 들어간다고 한다. https://github.com/firebase/firebase-android-sdk/issues/2582 Firebase-analytics adds Ad dependecy · Issue #2582 · firebase/firebase-android-sdkWhen I'm using com.google.firebase:firebase-analytics:18.0.2 p..
보호되어 있는 글입니다.
✨ 트러블 슈팅- use_expo_modules!config = use_native_modules!pod 'GoogleUtilities', :modular_headers => true // hereuse_frameworks! :linkage => :static // here - flipper 설정 끄기# :flipper_configuration => flipper_config
갖가지 핑계로 미루고 미루다가..... 드뎌 적용,,^^ 1. App.tsx를 감싸준다.import { registerRootComponent } from 'expo'import 'react-native-gesture-handler'import * as Sentry from '@sentry/react-native'import App from './App'Sentry.init({ dsn: {settings > DNS 정보에서 가져온 key}, tracesSampleRate: 0.5,})registerRootComponent(Sentry.wrap(App)) 2. 에러가 발생한 부분에 적용한다.Sentry.captureException의 두번째 파라미터는 hint로 자세한 정보를 보낼 수 있다...
1. IOS에서 대응하는 프레임을 고려하자IOS 기기는 초당 60프레임을 표시하여 사용자와 UI 시스템에 16.67ms가 주어지고 그 시간 내에 프레임을 생성하는데 필요한 작업을 수행할 수 없다면 프레임이 삭제되고 UI가 응답하지 않는 것처럼 보인다. 2. 상용에서 console.log를 제거하자병목현상이 일어날 수 있다.// .babelrc{ "env": { "production": { "plugins": ["transform-remove-console"] } }}npm i babel-plugin-transform-remove-console --save-dev 3. FlatList 또는 SectionList를 사용하자FlatList를 사용하면 행 수에 관계없이 거의 일정한 메..
담당자에게 Version 2는 React Native를 지원하지 않는다는 답변을 받은 후, Version 1으로 진행하게 되었다. 토스 문서(https://docs.tosspayments.com/sdk/widget-rn)에 링크되어있는 샘플 프로젝트로 간단히 연동할 수 있었다. 1. 설치하기공식 문서에는 나와있지 않지만 tosspayments-react-native-webview도 함께 설치해야 한다. 자꾸 빌드가 안돼서 샘플 프로젝트랑 비교하면서 찾았다.npm install @tosspayments/widget-sdk-react-nativenpm install tosspayments-react-native-webview 2. 구현NavigationContainer 안에서 로 감싸주고 Payment..
🚀 종속성 관리- cocoapods이란?라이브러리 의존성 관리 매니저/패키지 매니저이다. cocoapods를 사용하여 종속성을 관리한다. 🚀 xcode- xcodeproj, xcworkspace의 차이?xcodeproj: 외부라이브러리 사용 없이 프로젝트를 생성하고 사용하는 경우로 프로젝트 설정파일들이 들어있는 디렉토리이다.xcworkspace: 외부라이브러리를 사용한 경우로 workspace와 프로젝트들에 대해 설명하는 파일이 들어있는 디렉토리이다. React Native를 이용한 App을 구성할 때 cocoapods를 사용했기 때문에 HealthTimer.xcworkspace를 이용해서 프로젝트를 열어야 한다. 이는 cocoapods를 이용하면 생성한 프로젝트를 내부에 별도로 구성하면서 xc..