리액트 네이티브 Expo 초기 설정

React Native Expo Go 개발 환경 설정

1. 기본 환경 설정

Node.js 설치

# Node.js 18 이상 버전 설치 (LTS 권장)
# https://nodejs.org 에서 다운로드

Expo CLI 설치

npm install -g @expo/cli

2. 새 프로젝트 생성

# 새 Expo 프로젝트 생성
npx create-expo-app@latest myapp --template

# 프로젝트 폴더로 이동
cd myapp

3. TypeScript 설정

# TypeScript 설정
npx expo install typescript @types/react @types/react-native

# tsconfig.json 생성 (자동으로 생성됨)

4. 네비게이션 라이브러리 설치

# React Navigation 설치
npx expo install @react-navigation/native
npx expo install @react-navigation/native-stack
npx expo install @react-navigation/bottom-tabs

# 필수 의존성 설치
npx expo install react-native-screens react-native-safe-area-context
npx expo install react-native-reanimated

5. 스타일링 라이브러리 설치

# NativeWind (Tailwind CSS for React Native) 설치
npm install nativewind
npm install --save-dev tailwindcss

# Tailwind CSS 초기화
npx tailwindcss init

6. 상태 관리 라이브러리 설치

# Zustand 설치
npm install zustand

7. 아이콘 라이브러리 설치

# React Native Vector Icons
npx expo install react-native-vector-icons

8. 설정 파일 구성

babel.config.js 설정

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

tailwind.config.js 설정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}","./src/**/*.{js,jsx,ts,tsx}",],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        mainOrange: '#FF6B00',
        mainWhite: '#FFFFFF',
        mainGray: '#F3F4F6',
        mainDark: '#374151',
        mainDarkGray: '#6B7280',
        mainRed: '#EF4444',
        mainGrayText: '#4B5563',
        mainLightGrayText: '#9CA3AF',
        bizButton: '#1F2937',
        recruitBg: '#FEF9C3',
        recruitText: '#CA8404',
        reserveBg: '#DBEAFE',
        reserveText: '#2563EB',
        confirmBg: '#DCFCE7',
        confirmText: '#16A34A',
        chatBg: '#EF4444',
        payInfoBg: '#FFF7ED',
        requiredStar: '#EF4444',
      },
    },
  },
  plugins: [],
}

tsconfig.json 설정

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowJs": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "extends": "expo/tsconfig.base"
}

9. 폴더 구조 생성

mkdir -p src/{components,screens,navigation,store,utils,constants,types,hooks,apis,assets,layout}
mkdir -p src/components/common

10. 타입 정의 파일 생성

src/types/react-native-vector-icons.d.ts

declare module 'react-native-vector-icons/Feather' {
  import { Component } from 'react';
  import { TextProps } from 'react-native';

  interface IconProps extends TextProps {
    name: string;
    size?: number;
    color?: string;
  }

  export default class Feather extends Component<IconProps> {}
}

11. 개발 도구 설정

# ESLint 설정
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install --save-dev eslint-plugin-react-native eslint-plugin-import

# Prettier 설정
npm install --save-dev prettier eslint-config-prettier prettier-plugin-tailwindcss

🚀 Expo Go로 테스트하기

1. Expo Go 앱 설치

• iOS: App Store에서 "Expo Go" 검색 후 설치
• Android: Google Play Store에서 "Expo Go" 검색 후 설치

2. 개발 서버 시작

# 개발 서버 시작
npx expo start

# 또는
npm start

3. QR 코드로 테스트

• 터미널에 QR 코드가 나타남
• iOS: 카메라 앱으로 QR 코드 스캔
• Android: Expo Go 앱에서 QR 코드 스캔

4. 시뮬레이터/에뮬레이터 사용

# iOS 시뮬레이터에서 실행
npx expo start --ios

# Android 에뮬레이터에서 실행
npx expo start --android

# 웹 브라우저에서 실행
npx expo start --web

📱 실제 디바이스 테스트

iOS 디바이스

1. Expo Go 앱 설치
2. npx expo start 실행
3. QR 코드 스캔
4. 앱이 디바이스에서 실행됨

Android 디바이스

1. Expo Go 앱 설치
2. npx expo start 실행
3. QR 코드 스캔
4. 앱이 디바이스에서 실행됨

🔧 개발 팁

핫 리로드

• 코드 수정 시 자동으로 앱이 새로고침됨
• 저장하면 바로 반영됨

디버깅

• Expo Go 앱에서 디버깅 가능
• 콘솔 로그 확인 가능

네트워크 설정

• 같은 Wi-Fi 네트워크에 연결되어야 함
• 터널 모드로 다른 네트워크에서도 테스트 가능

🎯 장점

• 간단함: Xcode, Android Studio 설치 불필요
• 빠른 개발: QR 코드 하나로 바로 테스트
• 크로스 플랫폼: 하나의 코드로 iOS/Android 모두 테스트
• 실시간 업데이트: 코드 수정 시 즉시 반영