Home

맥에서만 작업하다가 윈도우에서 작업해야할 일이 생겼습니다. 윈도우에 React-Native 개발 환경을 구축하는 방법을 안내합니다. JDK 설치 아래 링크를 통해 JDK 11을 설치합니다. Download the Latest Java LTS Free Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts. www.oracle.com 설치 후 프롬프트를 열어 아래 명령을 통해 JDK 설치 여부를 확인합니다. java -version Node.js 설치 Node.js LTS 버전을 설치해 주세요. 글 작성일 기준 최신 LTS 버전은 18.17.1이었네요. Do..

개요 안드로이드에서 React-Native 앱 개발 중 Modal 사용 시 상단 StatusBar를 덮지 않는 문제를 제시 문제 분석 이러한 상황을 조치할 수 있도록 React-Native statusBarTranslucent 속성을 설정할 수 있음 따라서 해당 문제는 React-Native의 버그나 개선해야 할 사항이 아님 문제 조치 해결 방법 안내 및 스크린샷 첨부 소스 코드 statusBarTranslucent 속성을 적용한 예제 import React, {useState} from 'react'; import {Text, View, Modal} from 'react-native'; export default function App() { return ( Lorem ipsum dolor sit am..

개요 Metro는 메타에서 제공하는 React-Native용 자바스크립트 번들러입니다. 자바스크립트 번들러 번들러의 필요성과 역할 일반적으로 효율적인 유지 보수를 위해 여러 파일로 쪼개어 관리 여러 파일로 분기화된 프로젝트 내부에서 각 파일들은 import또는 require을 통해 상호 작용하도록 설계 그러나 클라이언트는 이를 이해할 수 없으며 이해할 수 있더라도 호환성 문제(다른 클라이언트가 동일하게 이해한다는 보장이 없음) 여러 파일로 쪼개서 관리하는 방식을 유지하며, 클라이언트 호환성을 보장하기 위해 번들러 사용 번들러는 프로젝트 내 여러 파일들의 상호 작용을 이해, 클라이언트 호환성을 보장하는 단일 자바스크립트 파일로 만들어 줌 Metro React-Native용 번들러 Metro를 메타에서 제공..

개요 이슈 작성자가 이슈를 삭제하였습니다. 이슈 스크린샷이 없다는 점 참고 부탁드립니다. React-Native에서 Suspense가 동작하지 않는다는 이슈가 있었습니다. Suspense는... React 18에서 공식적으로 지원하는 컴포넌트 React-Native에서도 Suspense를 사용할 수 있음 써드파티 라이브러리 수준에서 Suspense를 쉽게 활용할 수 있도록 지원 따라서 이를 지원하는 써드파티 라이브러리(react-query 등)를 사용하는 것이 편함 직접 구현하는 방법 중 하나로 promise객체를 다루는 함수를 추가로 작성하는 방법이 있음 문제 분석 이슈 작성자는 Suspense의 올바른 사용법을 숙지하지 않은 상태로 Suspense가 동작하지 않는다고 이슈를 생성 조치 Suspense..

개요 프로젝트 디렉토리를 안드로이드 스튜디오로 여는 경우 아래와 같은 에러가 발생할 수 있습니다. Directory 프로젝트명 does not contain a Gradle build ... 해결 방법 프로젝트 디렉토리가 아닌 프로젝트/android 디렉토리를 안드로이드 스튜디오로 열어보세요. 안드로이드 스튜디오는 프로젝트가 안드로이드 네이티브 프로젝트임을 가정하고 gradle 스크립트를 찾습니다. 프로젝트/android 디렉토리를 열어 gradle 스크립트를 문제없이 찾을 수 있도록 해야 합니다. 은근 많은 분들이 겪으시는 실수 같습니다. 메타 엔지니어 코르티쌤께서도 맞다고 해주셨네요. 참고 링크 React native screen and react safe area view is crashing , ..

React-Native의 새로운 아키텍처를 공부해 보고 아주 간단하게 정리해 보았습니다. 정리 좌: 구 아키텍처, 우 : 신 아키텍처 JSC : javascript 엔진으로 apple 사에서 웹브라우저 사파리에 도입하였음 -> 현재 React-Native에서는 Hermes라는 자체 javascript 엔진을 기본 엔진으로 사용 중 codegen : JSI : javascript 엔진에 사용할 수 있는 API로 javascript C++ 소통을 돕는다. Fabric : 렌더링 시스템 TurboModules : 네이티브 기능 활용을 돕는 모듈 관련 글 [React-Native] 구 아키텍처 : 기존 Bridge 를 가진 아키텍처 새로운 아키텍처를 이해하기 위해서는 구 아키텍처를 알아야 합니다. 구 아키텍처에..

이전 브릿지를 사용한 구 아키텍처에서 javascript 코드와 렌더링 시스템과 서로 소통하기 위해선 JSON 으로 변환하는 과정을 반드시 거쳐야 했습니다. 이는 마치 한국인이 아프리카 은데벨레족과 소통하기 위해 중간에 미국인을 두고 번역을 하는 것과 마찬가지입니다. 이러한 구조는 성능 저하 문제를 야기했습니다. JSI (JavaScript Interface) JSI는 자바스크립트 엔진에 추가할 수 있는 API로 javascript와 C++ 오브젝트와 소통이 가능하도록 만들어줍니다. C++ 과의 소통이 가능하다는 점은 크로스플랫폼에서 크나큰 장점이 되는데요, 그 이유는 안드로이드 네이티브 코드는 C/C++로 설계 iOS 는 기본적으로 C/C++을 지원 하기 때문입니다. JSON 으로 변환하여 통신하는 방..

새로운 아키텍처를 이해하기 위해서는 구 아키텍처를 알아야 합니다. 구 아키텍처에 포함된 개념은 무엇이고, 구 아키텍처의 문제점은 무엇이었는 지 서술합니다. Bridge 네이티브와 javascript는 동일한 언어를 사용하지 않고, 동일한 아키텍처를 사용하지 않습니다. 브릿지는 javascript 코드와 네이티브 간 통신을 도와줍니다. javascript 코드를 JSON 형태로 전달받아 Shadow Tree 생성에 사용합니다. 생성된 Shadow Tree 정보를 네이티브에 넘겨주어 네이티브 UI를 그립니다. UI 업데이트(아래 스크린 샷 내 Platform UI 부분), 레이아웃 구성(아래 스크린 샷 내 Shadow Tree 부분), JS은 서로 각각 다른 쓰레드에서 실행되며, 이 세 쓰레드는 서로 비동..

발생 에러 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: undefined@undefined npm ERR! Found: react-native@0.67.4 npm ERR! node_modules/react-native npm ERR! peer react-native@"*" from @react-native-community/cli@6.4.0 npm ERR! node_modules/@react-native-community/cli npm ERR! @react-native-community/cli@"^6.0.0" from react-native@0.67.4 npm ERR! react-n..

발생 에러 /opt/homebrew/Cellar/react-native-cli/2.0.1/libexec/lib/node_modules/react-native-cli/index.js:302 cli.init(root, projectName); ^ TypeError: cli.init is not a function at run (/opt/homebrew/Cellar/react-native-cli/2.0.1/libexec/lib/node_modules/react-native-cli/index.js:302:7) at createProject (/opt/homebrew/Cellar/react-native-cli/2.0.1/libexec/lib/node_modules/react-native-cli/index.js:2..