React Native (11) 썸네일형 리스트형 [React Native] React Native의 New Architecture (JSI, JavaScript Interface) React Native의 기존 구조 기존 구조는 JavaScript와 Native 사이의 통신을 위해 Bridge를 사용했으며, 데이터를 JSON 형식으로 직렬화하여 전달하는 방식으로 이루어졌다. 그러나 Bridge 기반 통신은 이벤트 생성 속도를 따라가지 못해 성능 이슈가 발생하는 한계가 있다. 이러한 문제를 해결하기 위해 React Native 0.73 버전에서부터 Bridgeless Mode 설정이 가능하도록 적용되었다. 또한 0.74 버전부터 Bridgeless Mode가 기본값으로 변경되었다. https://ramveloper.tistory.com/61 [React Native] React Native의 구 Bridge 아키텍쳐(Architecture)React Native 공식 블로그에 New.. [React Native] React Native의 구 Bridge 아키텍쳐(Architecture) React Native 공식 블로그에 New Architecture가 새로 소개되었을 때(https://reactnative.dev/blog/2024/04/22/release-0.74), 작업 중이던 프로젝트에서는 일부 이슈때문에 당장 업데이트가 불가한 상황이었다.그렇게 잠시 잊고 살았는데 어느새 RN이 0.76버전까지 소개되었고, 이젠 New Architecture 위주의 업데이트가 이루어져서 더 늦기 전에 한번 정리해 둔 내용을 옮겨보려 한다. 우선, 왜 New Architecture가 나왔는지에 대한 정보가 필요하기 때문에 기존 구조에 대해 먼저 정리한다.기존 RN의 구조는 다음과 같다.React: React는 애플리케이션의 UI를 선언적으로 정의하는 부분으로, React Native에서 UI .. [React Native/iOS] 리액트 네이티브 환경에서 iOS Privacy Manifest 정책 대응하기 iOS Privacy Manifest 애플이 WWDC23에서 개인정보 보호를 위해 API 오용을 방지하기 위해 사용하는 이유를 개발자가 명시하도록 발표했다. 앱이 앱 사용자의 개인정보를 보호하도록 하는 조치이다. 앱이 사용자의 개인 정보를 취급하는 방식에 대한 개요를 사용자에게 제공하는 개인 정보 취급 개요표(Privacy Nutrition Label) 소개 내용은 링크 참조 2023년 가을부터 사유를 명시해야 하는 API(타사 SDK 포함)를 사용하는 새로운 앱 또는 앱 업데이트를 App Store Connect에 업로드하는 경우, 앱의 개인정보 보호 목록에 승인된 사유를 제공하지 않으면 알림을 받게 된다. 2024년 봄부터 App Store Connect에 새로운 앱 또는 앱 업데이트를 업로드하려면 .. [React Native] patch-package를 사용해 라이브러리 커스텀하기 기본적으로 React Native 프로젝트의 .node-modules는 gitignore 에 등록되어 있다. 따라서 라이브러리의 내부 코드를 수정하면 협업 개발자들과 다른 시스템이 동작하게 된다. 이를 방지하기 위해 patch-package를 사용한다. 공식 문서 https://www.npmjs.com/package/patch-package patch-package Fix broken node modules with no fuss. Latest version: 8.0.0, last published: 8 months ago. Start using patch-package in your project by running `npm i patch-package`. There are 868 other proje.. [React Native] Hermes engine이란? React Native를 개발하다 보면, hermes engine이라는 단어가 많이 보인다. 그래서 hermes engine이 뭘까?? 공식 문서 https://reactnative.dev/docs/hermes Using Hermes · React Native Hermes is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. reactnative.dev Hermes란? hermes는 Fac.. [React Native] flatlist의 콜백 옵션 (removeClippedSubviews, onScrollToIndexFailed) removeClippedSubviews 공식 문서 https://reactnative.dev/docs/flatlist#removeclippedsubviews FlatList · React Native A performant interface for rendering basic, flat lists, supporting the most handy features: reactnative.dev removeClippedSubviews 속성을 true로 설정하면 화면 영역 밖에 있는 컴포넌트들을 자동으로 메모리에서 삭제한다. 기본적으로 React Native의 리스트나 스크롤뷰는 화면에 보이지 않는 항목들도 메모리에 유지하는데, 스크롤 동작이 부드럽게 유지되도록 하기 위한 것이지만, 많은 양의 아이템이 있는 경.. [React Native] tsconfig.json baseUrl 설정과 Unable to resolve module 에러 해결 Typescript baseUrl 설정 기존에 컴포넌트 혹은 파일을 import 할 때 경로가 깊어질수록 상대경로가 길어지는 문제가 있다. import { SvgImageExample } from '../../assets/svgs'; 하지만 tsconfig.json의 baseUrl 속성을 사용해 절대경로를 지정하면 ‘../../’ 부분이 생략이 가능해진다.나는 프로젝트 Root 하위에 src라는 폴더에서 코드를 관리하기 때문에 절대경로를 ‘./src’로 지정해 주었다. { "compilerOptions": { "baseUrl": "./src", }} 해당 속성을 지정해 주면 import 경로를 다음과 같이 가독성 좋게 변경할 수 있다. Unable to resolve module 에러 해결 하.. [React Native/RN] npm과 yarn의 차이 JS 패키지 매니저 자바스크립트에서 많이 사용하는 패키지 매니저는 'npm'과 'yarn'이 있다. 두 가지 모두 JavaScript 프로젝트에서 의존성 관리와 패키지 설치를 용이하게 해주는 도구이다. 패키지를 쉽게 찾고, 다운로드하며, 의존성을 해결하여 프로젝트에 통합할 수 있도록 도와주는 역할을 한다. npm (Node Package Manager) https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript developmen.. 이전 1 2 다음
