첫 Expo 프로젝트 만들기

The create-expo-app Command

# Create a new Expo project
npx create-expo-app MyFirstApp

# Create with a blank TypeScript template
npx create-expo-app MyFirstApp --template blank-typescript

# Create with tabs navigation template
npx create-expo-app MyFirstApp --template tabs

# Move into the project
cd MyFirstApp

Generated Folder Structure Overview

MyFirstApp/
├── App.js          # Root component (entry point)
├── app.json        # Expo configuration
├── package.json    # NPM dependencies & scripts
├── babel.config.js # Babel transpiler config
├── assets/         # Images, fonts, icons
│   ├── icon.png
│   ├── splash.png
│   └── adaptive-icon.png
└── node_modules/   # Installed packages

The app.json Configuration File

{
  'expo': {
    'name': 'My First App',
    'slug': 'my-first-app',
    'version': '1.0.0',
    'orientation': 'portrait',
    'icon': './assets/icon.png',
    'splash': {
      'image': './assets/splash.png',
      'resizeMode': 'contain',
      'backgroundColor': '#ffffff'
    },
    'ios': {
      'bundleIdentifier': 'com.yourname.myfirstapp'
    },
    'android': {
      'package': 'com.yourname.myfirstapp'
    }
  }
}

The package.json and Scripts

// package.json (excerpt)
{
  'name': 'my-first-app',
  'version': '1.0.0',
  'main': 'node_modules/expo/AppEntry.js',
  'scripts': {
    'start': 'expo start',
    'android': 'expo start --android',
    'ios': 'expo start --ios',
    'web': 'expo start --web'
  },
  'dependencies': {
    'expo': '~50.0.0',
    'react': '18.2.0',
    'react-native': '0.73.x'
  }
}

Understanding App.js — The Root Component

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

JSX: Describing UI in JavaScript

import { View, Text } from 'react-native';

const name = 'World';
const count = 42;

export default function App() {
  return (
    <View>
      {/* This is a JSX comment */}
      <Text>Hello, {name}!</Text>
      <Text>You have {count} messages.</Text>
      {count > 0 && <Text>You have unread items.</Text>}
    </View>
  );
}

Babel and Transpilation

// babel.config.js (default Expo config)
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // Example: add module resolver for clean imports
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@components': './components',
            '@screens': './screens',
          },
        },
      ],
    ],
  };
};

Installing Additional Dependencies

# Use expo install for SDK-compatible packages
npx expo install expo-camera expo-location
npx expo install react-native-maps

# Use npm install for pure JS packages
npm install lodash date-fns

# Check for outdated Expo SDK packages
npx expo install --check

# Fix version mismatches
npx expo install --fix

Making Your First Code Change

// Modified App.js
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>I made my first change.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f4ff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 24, fontWeight: 'bold', color: '#333' },
  subtitle: { fontSize: 16, color: '#666', marginTop: 8 },
});

The Expo SDK and Managed Workflow

// Example: using Expo SDK modules
import * as Battery from 'expo-battery';
import * as Haptics from 'expo-haptics';

async function checkBattery() {
  const level = await Battery.getBatteryLevelAsync();
  console.log('Battery level:', level); // 0.0 - 1.0
}

async function vibrate() {
  await Haptics.notificationAsync(
    Haptics.NotificationFeedbackType.Success
  );
}

TypeScript Support in Expo

// App.tsx with TypeScript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

interface Props {
  greeting?: string;
}

export default function App({ greeting = 'Hello' }: Props) {
  const message: string = greeting + ', TypeScript!';
  return (
    <View style={styles.container}>
      <Text>{message}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

Quick Check

Lesson Recap