Vite + React를 활용한 웹 개발

• 카메라를 띄우고 과일에 AR을 보여주는 과정에는 웹이 필요하지 않지만 확장 가능성과 개발 속도를 고려했을 때 React로 웹앱을 만들고 이를 react-native에서 webView로 감싸는 방식이 더 효율적입니다.
• 핵심적으로 웹앱 업데이트만으로 앱 내 콘텐츠도 즉시 반영할 수 있어 유지보수가 매우 쉽습니다.
• TypeScript와 tailwindCSS를 활용하여 개발합니다.

React Native를 활용한 native 기능 접근

<aside> 💡

React Native는 Expo를 활용하여 간편하게 개발합니다.

</aside>

• 카메라 접근
• AR 라이브러리(시각화 관련 고성능이 필요한 경우 활용합니다)
• WebView 라이브러리(고성능이 필요하지 않은 모든 경우 활용합니다)

최초 개발 환경세팅

npm install -g expo-cli
npx create-expo-app my-app
cd my-app

npx expo start --tunnel # 이후 qr코드 인식하여 개발합니다. 

<aside> 💡

expo go 앱을 다운받은 후 카메라로 인식해야합니다.

</aside>

개발 폴더구조

expo_test
├─ babel.config.js
├─ my-app
│  ├─ .expo
│  │  ├─ devices.json
│  │  ├─ README.md
│  │  ├─ settings.json
│  │  └─ types
│  │     └─ router.d.ts
│  ├─ app
│  │  ├─ (tabs)
│  │  │  ├─ explore.tsx
│  │  │  ├─ index.tsx
│  │  │  └─ _layout.tsx
│  │  ├─ +not-found.tsx
│  │  └─ _layout.tsx
│  ├─ app.json
│  ├─ app_root
│  │  ├─ entities
│  │  ├─ features
│  │  │  └─ camera
│  │  │     ├─ api
│  │  │     │  └─ cameraApi.ts
│  │  │     ├─ model
│  │  │     │  └─ types.ts
│  │  │     └─ ui
│  │  │        └─ CameraScreen.tsx
│  │  ├─ shared
│  │  └─ widgets
│  ├─ assets
│  │  ├─ fonts
│  │  │  └─ SpaceMono-Regular.ttf
│  │  └─ images
│  │     ├─ adaptive-icon.png
│  │     ├─ favicon.png
│  │     ├─ icon.png
│  │     ├─ partial-react-logo.png
│  │     ├─ react-logo.png
│  │     ├─ [email protected]
│  │     ├─ [email protected]
│  │     └─ splash-icon.png
│  ├─ constants
│  │  └─ Colors.ts
│  ├─ expo-env.d.ts
│  ├─ hooks
│  │  ├─ useColorScheme.ts
│  │  ├─ useColorScheme.web.ts
│  │  └─ useThemeColor.ts
│  ├─ package-lock.json
│  ├─ package.json
│  ├─ README.md
│  ├─ scripts
│  │  └─ reset-project.js
│  └─ tsconfig.json
├─ package-lock.json
├─ package.json
└─ tailwind.config.js

EXPO 포팅 매뉴얼

1. FE 브랜치로 이동합니다.
2. npm install yarn 커맨드를 입력합니다.
3. yarn install 커맨드를 입력합니다.
4. expo 회원가입 진행 후 로그인합니다.
5. eas build --platform android --profile development 커맨드를 입력합니다. 만약 eas cli 관련 경고 메세지가 뜬다면 설치를 진행합니다.
   • 참고