React Native 시작하기 — 환경 설정부터 첫 앱 실행까지

# Expo로 프로젝트 생성
npx create-expo-app MyApp
cd MyApp
npx expo start

# CLI로 프로젝트 생성
npx react-native init MyApp
cd MyApp

# iOS 실행 (macOS 필요)
npx react-native run-ios

# Android 실행
npx react-native run-android

# Node.js 설치 (LTS 버전 권장)
brew install node

# Watchman 설치 (파일 변경 감지)
brew install watchman

# Xcode 설치 (App Store)
# Command Line Tools 설정
xcode-select --install

# CocoaPods 설치
sudo gem install cocoapods

# iOS 시뮬레이터 실행
npx react-native run-ios

# ~/.zshrc 또는 ~/.bashrc에 추가
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

// App.tsx — 기본 앱 구조
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    // View는 웹의 div와 비슷한 컨테이너
    <View style={styles.container}>
      {/* Text 없이 직접 문자열을 쓸 수 없음 */}
      <Text style={styles.title}>안녕하세요!</Text>
      <Text style={styles.subtitle}>첫 React Native 앱입니다.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center', // 세로 중앙 정렬
    alignItems: 'center',     // 가로 중앙 정렬
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
});

MyApp/
├── App.tsx              # 앱 진입점
├── package.json         # 의존성 관리
├── tsconfig.json        # TypeScript 설정
├── babel.config.js      # Babel 설정
├── metro.config.js      # Metro 번들러 설정
├── ios/                 # iOS 네이티브 코드 (CLI)
├── android/             # Android 네이티브 코드 (CLI)
└── src/                 # 소스 코드 (직접 구성)
    ├── components/
    ├── screens/
    ├── navigation/
    └── utils/

// 코드를 수정하고 저장하면 바로 반영됨
<Text style={styles.title}>수정된 텍스트!</Text>

# 개발 메뉴 열기
# iOS 시뮬레이터: Cmd + D
# Android 에뮬레이터: Cmd + M

# Chrome DevTools로 디버깅
# 개발 메뉴 → "Debug with Chrome"

// 기본 로그
console.log('데이터:', data);
console.warn('경고 메시지');
console.error('에러 발생');

// Metro 터미널에서 확인 가능