React Native에서 관리자 인터페이스, PWA로 분리 vs Stack navigation 활용 – 어떤 선택이 좋은가요?

[qkrwoghd04]

안녕하세요! 저는 프론트엔드를 공부한 지 4개월 된 주니어 개발자입니다.

현재 Expo CLI를 사용하여 건강 식품을 제공하는 앱을 개발하고 있습니다. 초기에는 React Native 프로젝트 내에서 사용자 인터페이스와 관리자 인터페이스를 Stack 컴포넌트로 분류하여 작업했습니다. 하지만 진행하다 보니 관리자 인터페이스는 굳이 React Native 프로젝트 안에서 구현할 필요가 없어 보였습니다. (현재는 login.tsx 페이지에서 로그인이 성공하면, (protected)/index.tsx로 라우트되는 방식입니다)

사용자 인터페이스: 상품 보기, 만보기
관리자 인터페이스: 상품 CRUD, expo notification 푸쉬알림

그래서 상품 관리 페이지를 별도의

1. PWA 프로젝트로 완전하게 분리하기
2. React 프로젝트로 구현하고 Webview로 React Native 프로젝트에서 url을 불러오기

import React from 'react'
import WebView from 'react-native-webview'

const Manage = () => {
  return (
    <WebView
      source={{ uri: "React Project" }}
    />
  )
}

export default Manage

3. 기존 방식

// login에 성공하면 (protected)/index.tsx로 이동
import React from 'react';
import { Stack } from 'expo-router';

export default function AdminLayout() {
  return (
    <Stack>
      <Stack.Screen name="(protected)" options={{ headerShown: false }} />
      <Stack.Screen name="login" options={{ headerShown: false }} />
    </Stack>
  );
}

이렇게 하면 앱의 설치 용량을 줄이는 효과도 기대할 수 있을 것 같은데, 보통은 어떤 방식으로 진행하시는지 궁금합니다

다른 더 좋은 방법이 있다면 조언 부탁드립니다!

[milooy]

사용자 대상 서비스와 관리자 대상 서비스에 공통된 부분이 없다면, 말씀하신 대로 Micro Frontends 방식으로 분리하는 것이 의존성 관리 측면에서 더 적절할 것 같아요.

또한, 관리자 서비스 구현 방식을 PWA vs React + RN WebView vs RN 중에서 선택하는 문제는 단순히 코드 구조나 개발 방식의 차이만이 아니라, 사용자 경험과 비즈니스적 고려 사항까지 영향을 미치는 결정인지라
각 옵션별 사용자 경험의 차이를 정리한 후, 제품팀과 함께 논의해보는 것이 좋을 것 같네요. 😊