애플리케이션의 전제조건

해당 내용은 React Native 공식문서와 함께합니다

⚠ 주의

이 문서는 여전히 실험적이며 세부사항은 반복에 따라 변경될 수 있습니다. 이 페이지의 작업 그룹 내 토론에 대한 피드백을 자유롭게 공유해주세요.
게다가, 그것은 몇 가지 수동 단계를 포함합니다. 새로운 아키텍처가 안정되면 최종 개발자 경험을 대표하지 않는다는 점을 유의해주세요. 전체 설치 과정을 거치지 않고도 새로운 아키텍처를 빠르게 시작할 수 있도록 툴, 템플릿 및 라이브러리를 개발하고 있습니다.

---

애플리케이션에서 새 아키텍처를 사용하기 전에 해결해야 할 몇 가지 전제조건이 있습니다.

아키텍처 Architecture

• red hat의 애플리케이션 아키텍처 설명
• 리액트 네이티브의 새로운 아키텍처에 대한 설명글

여기서 간단히 보자면 애플리케이션 아키텍처는 애플리케이션을 설계하고 구축할 때 사용하는 패턴과 기술을 말합니다.

그리고 리액트 네이티브는 아래 4개의 주요 파트를 기반으로 동작하는데,

1. 리액트 파트: 개발자가 직접 작성하는 코드
2. 자바스크립트 파트: 개발자가 작성한 코드가 시스템에 의해 해석되어 만들어진 자바스크립트 코드
3. 브릿지라고 불리는 요소들의 집합 파트
4. 네이티브 파트

이 구조에서 자바스크립트와 네이티브 영역은 중요한데 서로 인지하기 못해서 비동기 JSON메시지를 브릿지를 통해 소통해야 하는데, JSON메시지에 대한 응답이 오긴 오는건지, 온다면 언제 오는건지 보장이 없습니다.

이러한 메시지 방식의 한계를 느낀 페이스북팀이 새로운 리액트 네이티브 아키텍처를 만들기 시작했습니다.

리액트 네이티브의 nightly release를 사용해야 한다.

이 때 최신 변경 사항에 엑세스하려면 리액트 네이티브 야간 릴리스 를 사용해야 합니다. 결국, 우리는 최소한의 안정적인 오픈 소스 릴리스를 목표로 하는 것을 추천할 것입니다.

이 안내서는 특정 야간 릴리스를 사용할 것을 예상해서 작성되었습니다. 이 가이드의 새로운 개정판이 출시되면 야간 릴리즈가 업데이트될 수 있습니다. 이 가이드의 나머지 부분에서는 야간 버전 0.0.0-20220201-2008-79975d146 을 사용합니다.

앱을 특정 야간 릴리즈로 업그레이드하기 전에 최신 오픈 소스 릴리스로 업그레이드하는 것이 좋습니다. 먼저 게시된 오픈 소스 릴리스로 업그레이드하면 업그레이드 도우미와 같은 도구를 사용해서 프로젝트에 필요한 다른 변경 사항을 확인할 수 있습니다.

이 글의 현재 최신 안정 릴리스는 0.67.2 입니다. 프로젝트를 이 버전으로 성공적으로 업그레이드한 후에는 0.0-20220201-2008-79975d146 야간 릴리스로 진행할 수 있습니다. 리액트 네이티브의 다른 버전을 대상으로 하는 것과 동일한 방식으로 야간 릴리스를 대상으로 할 수 있습니다.

yarn add react-native@0.0.0-20220201-2008-79975d146

nightly release

말 그대로 밤에 만들어지는 것인데, "Daily Build" 시스템은 매일 자동 배포가 예약되어 있는 시스템입니다. 즉, 모든 코드가 다시 컴파일되고 모든 테스트가 다시 실행합니다. 큰 시스템의 경우, 이 프로세스는 대게 많은 리소스가 소요되기 때문에 사람들은 실제 최종 사용자로부터 차단되지 않기 위해 야간이나 이른 아침에 일정을 잡습니다. 그리고 나서 daily/nightly 빌드 담당자는 아침에 출근해서 빌드 성공/실패에 대한 메시지를 확인하고 그에 따라 행동합니다.

제품이나 컴포넌트 기반 소프트웨어에 대한 모든 커밋된 코드를 코딩하는 사람이 없을 때 매일 빌드한다고 합니다.

nightly release vs 정식 release

release는 말 그대로 안정성 검사 등을 거쳐서 일반인이 쓰라고 배포한 것이라 안정적이지만, nightly는 일반인이 아니라 개발하는 사람들을 위한 것이라, 불안정이고 오동작할 수 있습니다.

nightly도 두 종류가 있는데,

trunk nightly 는 최신 기능이 날마다 더해지고, 여러가지 시험적 기능도 들어 있습니다. 따라서 거의 그럴일은 없겠지만 시작이 아예 안 될수도 있고, 신기하게 갑자기 죽을 수도 있습니다.

다른 하나는 branch nightly 입니다.
예를 들어, 1.0.x branch에 대한 nightly는 trunk nightly와는 달리 이미 release한 버전에 대해 아주 조금씩 꼭 고쳐야 할 보안 버그 등만을 고친 것이기 때문에 그 안정성이 1.0.X release와 거의 동일하다고 볼 수 있습니다.

react-native-codegen 설치하기

최신 버전의 react-native-codegen npm 패키지를 사용하고 있는지 확인해주세요. 작성 시점에서는 0.0.13 입니다.

yarn add react-native-codegen

⚠ 주의

만약 TypeError: RNCodegen.generateFromSchemas는 함수가 아닙니다. 라는 에러를 보게됨다면, 이전버전의 react-native-codegen을 사용하고 있다는 뜻입니다. node_modules/react-native/node_modules 폴더에 이전 버전이 설치되어 있지 않은지 확인해주세요. 이를 제거하거나 node_modules의 모든 항목을 다시 설치해서 문제를 해결할 수도 있습니다.

Android 세부사항

Android에서 새로운 아키텍처를 사용하려면 다음과 같은 몇 가지 전제 조건이 충족되어야 합니다.

1. Gradle 7.X 및 Android Gradle Plugin 7.X 사용
2. 새로운 React Gradle Plugin 사용
3. Source로부터 리액트 네이티브 빌드(구축)

다음을 실행해서 Gradle을 업데이트할 수 있습니다.

cd android && ./gradlew wrapper --gradle-version 7.3 --distribution-type=all

한편 AGP 버전은 com.android.tools.build:gradle 의 최상위 build.gradle 파일 내에서 업데이트 되어야 합니다.
만약 업데이트된 AGP버전을 가지고 있다면, 이제 react-native-gradle-plugin 이라는 npm 패키지를 통해 배포되는 새로운 Gradle 플러그인을 설치해봅시다. 다음과 같은 작업을 수행할 수 있습니다.

yarn add react-native-gradle-plugin

다음을 수행해서 패키지가 이미 설치되어 있는지 여부를 제어할 수 있습니다.

ls -la node_modules/react-native-gradle-plugin

이제 최상위 settings.gradle 파일을 편집해서 파일 끝에 다음 줄을 포함할 수 있습니다.

includeBuild('../node_modules/react-native-gradle-plugin')

include(":ReactAndroid")
project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')

그런 다음 강조 표시된 선을 포함하도록 최상위 gradle파일을 편집합니다.

buildscript {
    // ...
    dependencies {
        // Make sure that AGP is at least at version 7.x
        classpath("com.android.tools.build:gradle:7.0.4")

        // Add those lines
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:4.1.2")
    }
}

모듈수준의 gradle파일 (일반적으로 app/build.gradle[.kts])을 편집해서 다음을 포함합니다.

apply plugin: "com.android.application"

// Add those lines
apply plugin: "com.facebook.react"
// Add those lines as well
react {
    reactRoot = rootProject.file("../node_modules/react-native/")
    codegenDir = rootProject.file("../node_modules/react-native-codegen/")
}

마지막으로, NPM 패키지에서 미리 컴파일된 아티팩트를 사용하는 대신 소스의 리액트 네이티브 종속성을 사용하도록 프로젝트를 업데이트해야 합니다. 이후 설정은 소스로부터 네이티브 코드를 빌드하는 데 의존하기 때문에 이것이 필요합니다.

app/ 폴더 내부에 있는 모듈 수준의 build.gradle을 편집하고 다음 행을 변경합니다.

dependencies {
  // Replace this:
  implementation "com.facebook.react:react-native:+"  // From node_modules
  // With this:
  implementation project(":ReactAndroid")  // From node_modules

Hermes 헤르메스 사용

헤르메스는 리액트 네이티브에 최적화된 오픈 소스 자바스크립트 엔진이기 때문에 애플리케이션에서 헤르메스를 사용하는 것이 좋습니다. 헤르메스를 활성화하면 Filpper의 자바스크립트 디버거를 사용해서 자바스크립트 코드를 직접 디버깅할 수 있습니다.

애플리케이션에서 헤르메스를 활성화하려면 리액트 네이티브 웹 사이트의 지침을 따르세요.

⚠ 주의

iOS: Hermes를 사용하지 않을 경우, 본 가이드의 나머지 부분에 사용된 예시에서 HermesExecutorFactory 를 JSCExecutorFactory 로 교체해야 합니다.

하단의 내용은 iOS과 관련된 내용이라 생략했습니다.