프로그래밍/React-Native <JSX>34 [React-Native] 아키텍처 정리 React-Native의 새로운 아키텍처를 공부해 보고 아주 간단하게 정리해 보았습니다. 정리 좌: 구 아키텍처, 우 : 신 아키텍처 JSC : javascript 엔진으로 apple 사에서 웹브라우저 사파리에 도입하였음 -> 현재 React-Native에서는 Hermes라는 자체 javascript 엔진을 기본 엔진으로 사용 중 codegen : JSI : javascript 엔진에 사용할 수 있는 API로 javascript C++ 소통을 돕는다. Fabric : 렌더링 시스템 TurboModules : 네이티브 기능 활용을 돕는 모듈 관련 글 [React-Native] 구 아키텍처 : 기존 Bridge 를 가진 아키텍처 새로운 아키텍처를 이해하기 위해서는 구 아키텍처를 알아야 합니다. 구 아키텍처에.. 2023. 7. 28. [React-Native] 아키텍처 : JSI, 렌더링 시스템 Fabric과 TurboModules 이전 브릿지를 사용한 구 아키텍처에서 javascript 코드와 렌더링 시스템과 서로 소통하기 위해선 JSON 으로 변환하는 과정을 반드시 거쳐야 했습니다. 이는 마치 한국인이 아프리카 은데벨레족과 소통하기 위해 중간에 미국인을 두고 번역을 하는 것과 마찬가지입니다. 이러한 구조는 성능 저하 문제를 야기했습니다. JSI (JavaScript Interface) JSI는 자바스크립트 엔진에 추가할 수 있는 API로 javascript와 C++ 오브젝트와 소통이 가능하도록 만들어줍니다. C++ 과의 소통이 가능하다는 점은 크로스플랫폼에서 크나큰 장점이 되는데요, 그 이유는 안드로이드 네이티브 코드는 C/C++로 설계 iOS 는 기본적으로 C/C++을 지원 하기 때문입니다. JSON 으로 변환하여 통신하는 방.. 2023. 7. 28. [React-Native] 구 아키텍처 : 기존 Bridge 를 가진 아키텍처 새로운 아키텍처를 이해하기 위해서는 구 아키텍처를 알아야 합니다. 구 아키텍처에 포함된 개념은 무엇이고, 구 아키텍처의 문제점은 무엇이었는 지 서술합니다. Bridge 네이티브와 javascript는 동일한 언어를 사용하지 않고, 동일한 아키텍처를 사용하지 않습니다. 브릿지는 javascript 코드와 네이티브 간 통신을 도와줍니다. javascript 코드를 JSON 형태로 전달받아 Shadow Tree 생성에 사용합니다. 생성된 Shadow Tree 정보를 네이티브에 넘겨주어 네이티브 UI를 그립니다. UI 업데이트(아래 스크린 샷 내 Platform UI 부분), 레이아웃 구성(아래 스크린 샷 내 Shadow Tree 부분), JS은 서로 각각 다른 쓰레드에서 실행되며, 이 세 쓰레드는 서로 비동.. 2023. 7. 28. [React-Native] ERESOLVE While resolving: undefined@undefined 에러 해결하기 발생 에러 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.. 2023. 7. 20. [React-Native] cli.init is not a function 문제 해결하기 발생 에러 /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.. 2023. 7. 20. [React-Native] android CodePush 를 통해 업데이트 진행하기 이 글은 앞선 React-Native 프로젝트의 app center 설정이 완료된 전제하에 진행합니다. 설정을 완료하지 않은 경우 먼저 app center sdk 설치 관련 글을 참고하세요. android CodePush 가이드 - 1. [React-Native] android App Center SDK 등록하기 - 2. [React-Native] android CodePush 시작하기 - 3. [React-Native] android CodePush 를 통해 업데이트 진행하기 (현재 글) Staging Developement 진행 먼저 프로젝트 디렉토리에서 appcenter 로그인을 진행합니다. appcenter login ... Logged in as appcenter사용자이름 아래 명령을 통해 st.. 2023. 6. 25. 이전 1 2 3 4 5 6 다음
