Antigravity Agent
65 lines
9.1 KiB
Markdown
65 lines
9.1 KiB
Markdown
# [[JSI (JavaScript Interface)]]
|
|
|
|
## 📌 Brief 신Summary
|
|
JSI(JavaScript Interface)는 React Native의 '새로운 아키텍처(New Architecture)'의 중심이 되는 경량 범용 C++ 계층입니다 [1]. 기존의 비동기적 브릿지(Bridge) 방식이 지녔던 직렬화(Serialization) 오버헤드를 완전히 제거하고, 자바스크립트 코드와 네이티브 객체 간에 직접적이고 동기적인 참조를 가능하게 합니다 [1, 2]. 이를 통해 자바스크립트와 네이티브 스레드 간의 실시간 고성능 통신을 지원하며, React Native의 성능 격차를 네이티브 개발 수준으로 좁히는 핵심 기반 기술입니다 [1, 2].
|
|
|
|
## 📖 Core Content
|
|
* **동기적 네이티브 접근 및 직렬화 오버헤드 제거**
|
|
기존 React Native 아키텍처에서는 자바스크립트와 네이티브 레이어 간의 통신 시 메시지를 JSON 문자열로 묶어 비동기적으로 브릿지(Bridge)를 통해 전달해야 했기 때문에 지연 현상(Latency)이 발생했습니다 [1, 3]. JSI는 자바스크립트가 네이티브 메서드를 직접 동기적으로 호출(Direct method invocation)할 수 있게 하여 브릿지의 직렬화 오버헤드를 근본적으로 제거합니다 [1, 2].
|
|
* **Fabric과 TurboModules의 근간**
|
|
JSI는 단순히 통신 방식을 개선하는 데 그치지 않고, React Native의 새로운 아키텍처를 구성하는 두 가지 핵심 요소의 기반(Foundational layer)이 됩니다 [2]. JSI를 통해 새로운 UI 렌더링 시스템인 **Fabric**과 지연 로딩을 지원하는 네이티브 모듈 시스템인 **TurboModules**가 구현될 수 있었습니다 [1, 2].
|
|
* **직접적인 메모리 공유와 고성능 기능 지원**
|
|
JSI는 직접적인 메모리 공유를 지원하여 성능 격차를 크게 좁힙니다 [4]. 일례로 `react-native-fast-tflite`와 같은 고성능 라이브러리는 JSI의 직접 메모리 접근 및 GPU 가속을 활용하여 온디바이스 머신러닝의 실시간 추론을 매우 빠르고 효율적으로 처리합니다 [5]. 또한 커스텀 네이티브 기능 구현 시 투명하고 성능이 뛰어난 바인딩을 제공합니다 [6].
|
|
* **자바스크립트 엔진 호환성**
|
|
JSI는 범용적으로 설계되어, 고도로 최적화된 자바스크립트 엔진인 Hermes를 비롯한 다양한 자바스크립트 엔진을 안정적으로 지원할 수 있습니다 [1].
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
JSI 및 이를 도입한 '새로운 아키텍처(New Architecture)'와 관련된 제약 사항에 대해서는 소스 내에 다음과 같은 점이 간접적으로 확인됩니다.
|
|
React Native 버전 0.74부터 브릿지리스 모드(Bridgeless mode)가 기본적으로 활성화되면서 아키텍처의 패러다임이 브릿지에서 JSI 기반의 동기적 통신으로 전환되었습니다 [7, 8]. 이러한 변화는 성능과 반응성 면에서 압도적인 장점을 주지만, 생태계 내 기존 브릿지 기반의 수많은 서드파티 라이브러리(Native Modules)들이 새로운 아키텍처와 JSI에 온전히 대응하고 마이그레이션 하는 데 시간이 걸릴 수 있습니다 [7, 8]. 또한, JSI의 기반이 C++ 계층이므로 고도화된 네이티브 모듈을 개발할 경우 Java/Kotlin, Objective-C/Swift와 더불어 C++에 대한 이해가 요구될 수 있습니다 [1].
|
|
그 외에 JSI 자체의 아키텍처적 결함이나 구체적이고 치명적인 부작용(Trade-off)에 대해서는 **소스에 관련 정보가 부족합니다.**
|
|
|
|
## 🔗 Knowledge Connections
|
|
|
|
### Related Concepts
|
|
|
|
#### [관계 유형 A (아키텍처/기반 기술)]
|
|
- [[New Architecture]]
|
|
- 연결 이유: JSI는 기존의 비동기 브릿지를 대체하는 React Native '새로운 아키텍처(New Architecture)'의 심장이자 가장 핵심적인 통신 인프라입니다 [1, 9].
|
|
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 과거 React Native가 네이티브와 소통하던 방식의 한계와, 현대 크로스 플랫폼 프레임워크가 성능 병목을 해결하는 구조적 패러다임의 변화 [1, 2].
|
|
- [[Fabric]]
|
|
- 연결 이유: JSI의 동기적 통신 능력을 활용하여 구축된 React Native의 차세대 렌더링 시스템입니다 [1, 2].
|
|
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: JSI 위에서 C++로 직접 섀도 트리(Shadow Tree)를 생성하고 렌더링과 레이아웃 계산을 동기적으로 수행하여 UI 점프 현상 등의 렌더링 문제를 해결하는 원리 [2, 10].
|
|
- [[TurboModules]]
|
|
- 연결 이유: JSI를 기반으로 구축된 차세대 네이티브 모듈 시스템으로, 앱 시작 시 일괄 로드되던 기존 방식 대신 필요한 시점에만 모듈을 로드(Lazy-loading)합니다 [2, 11].
|
|
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: JSI의 동기적 호출이 모듈 로딩 성능(초기 구동 속도 및 메모리 사용량)을 어떻게 개선하는지 이해할 수 있습니다 [2, 11].
|
|
|
|
#### [관계 유형 B (구현/발전 도구)]
|
|
- [[Codegen]]
|
|
- 연결 이유: 자바스크립트의 동적 타입과 네이티브의 정적 타입 간에 JSI 기반의 안전한 통신을 보장하기 위해 도입된 자동화 도구입니다 [12].
|
|
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 빌드 타임에 타입 정의(TypeScript 등)를 분석하여 C++ 보일러플레이트 코드를 자동 생성함으로써 런타임 에러를 줄이는 방식 [12].
|
|
- [[Hermes]]
|
|
- 연결 이유: JSI가 공식적으로 지원하고 최적화하여 사용하는 React Native의 핵심 자바스크립트 엔진입니다 [1].
|
|
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: JSI 환경 위에서 어떻게 앱 구동 속도와 렌더링의 기본 퍼포먼스가 확보되는지 이해할 수 있습니다 [1, 13, 14].
|
|
|
|
### Deeper Research Questions
|
|
- 기존의 비동기 Bridge 방식에서 발생하던 직렬화(Serialization) 지연 시간은 수치적으로 어느 정도였으며, JSI의 직접 메모리 참조는 이를 정량적으로 얼마나 개선하는가?
|
|
- 기존 서드파티 라이브러리 생태계가 구형 브릿지 아키텍처에서 JSI 및 브릿지리스(Bridgeless) 환경으로 마이그레이션하기 위해 구체적으로 어떤 코드 수준의 리팩토링을 거쳐야 하는가?
|
|
- JSI를 통해 자바스크립트 스레드와 네이티브 스레드가 동기적으로 통신할 때, 무거운 연산이 자바스크립트 스레드를 블로킹(Blocking)하지 않도록 처리하는 아키텍처적 안전 장치는 무엇인가?
|
|
- Codegen이 TypeScript 인터페이스를 기반으로 JSI를 위한 C++ 코드를 자동 생성하는 상세 컴파일 타임 메커니즘은 어떻게 구성되는가?
|
|
- 온디바이스 AI 모델(예: TensorFlow Lite) 외에, JSI의 C++ 메모리 직접 접근 성능을 극대화하여 비즈니스 가치를 창출할 수 있는 다른 프론트엔드 기능에는 어떤 것들이 있는가?
|
|
|
|
### Practical Application Contexts
|
|
- **Implementation:** 커스텀 네이티브 기능(카메라, 블루투스, 기계 학습 등) 개발 시 JSI와 TurboModules를 적용하여, C++ 계층의 빠르고 지연 없는 동기적 데이터 호출 로직을 구현할 수 있습니다 [2, 5, 6].
|
|
- **System Design:** 모바일 아키텍처 설계 시, 과거 복잡한 애니메이션이나 무거운 리스트 처리 문제로 React Native 도입을 망설였던 도메인이라도, JSI의 도입에 따른 네이티브 수준의 성능을 근거로 React Native를 주요 기술 스택으로 검토할 수 있습니다 [2, 15, 16].
|
|
- **Operation / Maintenance:** React Native 0.74 버전 이상으로 앱을 업데이트할 때, JSI 기반의 브릿지리스 모드(Bridgeless mode)로 전환함에 따라 현재 사용 중인 서드파티 라이브러리들의 호환성을 점검하고 업데이트하는 유지보수 절차가 필수적입니다 [7, 8].
|
|
- **Learning Path:** React Native 개발자는 기존 브릿지 기반의 React Native 지식에 머물지 않고, 성능 최적화를 위해 JSI의 동작 원리와 더불어 C++ 기초 및 Codegen을 활용한 네이티브 모듈 작성법으로 학습의 범위를 확장해야 합니다 [1, 12].
|
|
- **My Project Relevance:** 현재 유지보수 중인 React Native 프로젝트가 있다면, 새로운 아키텍처를 활성화(Opt-in)하여 JSI를 통한 앱의 응답성 향상 및 렌더링 성능 최적화를 즉각적으로 꾀할 수 있습니다 [8, 17].
|
|
|
|
### Adjacent Topics
|
|
- [[Impeller Engine]]
|
|
- 확장 방향: JSI가 React Native의 병목 현상을 해결하는 접근법이라면, 경쟁 프레임워크인 Flutter가 렌더링 병목(셰이더 컴파일 지연)을 극복하기 위해 새롭게 도입한 자체 렌더링 엔진인 Impeller와의 아키텍처 해결 방식의 차이를 비교 연구할 수 있습니다 [18, 19].
|
|
- [[React Native Web / Desktop]]
|
|
- 확장 방향: JSI 및 새로운 아키텍처가 모바일 환경(iOS/Android)의 성능을 혁신하는 동안, 이것이 React Native Web이나 macOS/Windows 데스크탑 지원 영역에 미치는 영향이나 확장성을 탐구합니다 [20-22].
|
|
|
|
---
|
|
*Last updated: 2026-05-03* |