David Brain

모바일 (React Native)

4 min read

ID: key_26_22_05_25_18_04_00_00000 Created date: 5월 25 2026 월요일, 22주 18:00

연관 문서

개발 전 사전 정의 | 모바일 개발

개요

모바일은 신규 프로젝트로, 레포 생성 및 초기 세팅부터 시작한다.
CLAUDE.md는 프로젝트 생성 직후 루트에 작성한다.

프로젝트 파일 위치 (생성 후 기준)

custom-jira-mobile/              ← 레포명 결정 필요
├── CLAUDE.md                    ← ★ Claude Code가 읽는 핵심 파일
├── .env                         ← 환경변수 (gitignore)
├── .env.example                 ← 환경변수 예시 (커밋 대상)
├── package.json
└── src/
    ├── navigation/              ← React Navigation 설정
    │   ├── RootNavigator.tsx    ← 루트 네비게이터 (인증 분기)
    │   ├── AuthNavigator.tsx    ← 로그인/회원가입 스택
    │   └── MainNavigator.tsx    ← 메인 탭 네비게이터
    ├── screens/                 ← 화면 단위 컴포넌트
    │   ├── auth/
    │   │   ├── LoginScreen.tsx
    │   │   └── RegisterScreen.tsx
    │   ├── dashboard/
    │   │   └── DashboardScreen.tsx
    │   ├── issues/
    │   │   ├── IssueListScreen.tsx
    │   │   └── IssueDetailScreen.tsx
    │   └── board/
    │       └── BoardScreen.tsx
    ├── components/              ← 공통 컴포넌트
    │   ├── IssueCard.tsx
    │   └── StatusBadge.tsx
    ├── stores/                  ← Zustand 스토어 (웹과 구조 통일)
    │   ├── authStore.ts
    │   └── issueStore.ts
    ├── lib/                     ← API 클라이언트 / 유틸
    │   └── api.ts               ← Axios 인스턴스
    └── types/                   ← TypeScript 타입 정의
        └── index.ts

사전 결정 항목

항목결정값비고
프로젝트 생성 방식ExpoExpo vs bare React Native 결정 필요
레포명결정 필요
상태 관리ZustandZustand (웹과 통일 권장)
네비게이션React Navigation확정
로컬 저장소AsyncStorageAsyncStorage / MMKV 중 결정
푸시 알림FCM (Firebase)확정

Expo vs Bare React Native

  • Expo: 빠른 시작, OTA 업데이트, 네이티브 모듈 제약
  • Bare RN: 완전한 네이티브 제어, 초기 세팅 복잡 solclientjs 같은 네이티브 의존 라이브러리 사용 여부에 따라 결정

CLAUDE.md 정의 항목 및 예시

1. 기술 스택 요약

## Tech Stack
- Framework: React Native (Expo / Bare) ← 결정 후 기재
- Language: TypeScript
- State: Zustand
- Navigation: React Navigation 7.x
- HTTP: Axios
- Local Storage: AsyncStorage / MMKV  ← 결정 후 기재
- Push: Firebase Cloud Messaging (FCM)
- Icons: lucide-react-native / @expo/vector-icons

2. 네비게이션 구조

## Navigation Structure
RootNavigator
├── AuthNavigator (Stack) — 미인증 시
│   ├── LoginScreen
│   └── RegisterScreen
└── MainNavigator (Bottom Tab) — 인증 후
    ├── Tab: 홈 (DashboardScreen)
    ├── Tab: 이슈 (IssueListScreen)
    ├── Tab: 검색 (SearchScreen)
    └── Tab: 프로필 (ProfileScreen)

3. API 호출 패턴

## API Call Pattern
- 웹(web-plate)과 동일한 구조 사용
- 파일 위치: src/lib/api.ts
- baseURL: process.env.EXPO_PUBLIC_API_URL
 
예시:
import { api } from '@/lib/api'
const { data } = await api.get('/projects/123/issues')

4. 환경변수 목록

## Environment Variables (.env)
EXPO_PUBLIC_API_URL=http://localhost:8080/api/v1
EXPO_PUBLIC_SOLACE_HOST=
EXPO_PUBLIC_SOLACE_VPN=

작성 필요: bare RN이면 react-native-config 방식으로 변경

5. 프로젝트 초기 생성 명령 (Claude Code 의뢰 시 포함)

# Expo 방식
npx create-expo-app custom-jira-mobile --template expo-template-blank-typescript
 
# Bare React Native 방식
npx @react-native-community/cli init CustomJiraMobile --template react-native-template-typescript

연관 메일

Graph View

Backlinks