ReactNative 모노레포 세팅

작년 6월에 회사 백엔드 동료를 설득해 참여한 10일간의 해커톤에서 '컬러온미'를 처음 만들었습니다.
10일 프로젝트를 넘어 기능을 확장하며 창업공모전에서 동상을 수상하기도 했습니다.
마음이 맞는 회사 동료를 더 끌어들여 클라이언트 앱만 있던 컬러온미를 어드민까지 확장했고
이에 따라 공통적으로 사용되는 것들이 많아 모노레포 구조로 전환했습니다.
처음에는 PWA로 출시하려 했지만, 사용성 면에서 아쉬움이 있어 앱 출시를 하기로 결정했습니다.

기존 모노레포는
공통 컴포넌트: design, 공통함수: libs, client, admin 이 디렉토리에 포함되어 있었습니다.
여기에 ReactNative로 mobileClient 앱을 추가하려 합니다.

ReactNative 모노레포 세팅

1. packages 폴더 안에 native 프로젝트 만들기

npx react-native init MyReactNativeApp

2. package.json - workspaces 추가

workspaces 추가 후 yarn install

"workspaces": [
  "packages/*/*",
  "packages/libs",
  "packages/design",
  "packages/coloronme-client",
  "packages/coloronme-admin",
  "packages/mobileClient"
],

3. 경로 변경

android

• android > settings.gradle

apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
includeBuild('../../../node_modules/@react-native/gradle-plugin')

• android > app > build.gradle

apply from: file("../../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

ios

• ios 폴더 아래에서 Pod 다시 생성

cd ios && pod install

• metro.config.js

const path = require('path');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  watchFolders: [path.resolve(__dirname, '../../')],
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

발생한 오류들

• @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories: node_modules
  yarn add @babel/runtime
• --- xcodebuild: WARNING: Using the first of multiple matching destinations: ...
  ios 디렉토리에서 pod install
• 참고
  https://www.callstack.com/blog/setting-up-react-native-monorepo-with-yarn-workspaces