Expo 개발 환경 세팅 & 첫 앱 실행

작성자:


“설치하고, 실행하고, 폰에서 바로 확인한다.”
이 글에서는 Expo 개발 환경을 세팅하고 첫 앱을 실행하는 전 과정을 다룹니다.

시작 전 필요한 것

항목설명
Node.js18 버전 이상 권장
코드 에디터VS Code 권장
스마트폰iOS 또는 Android (실기기 테스트용)
Expo Go 앱앱스토어에서 설치

Mac, Windows, Linux 모두 개발 가능합니다.
단, iOS 앱 **빌드(배포용)**는 Mac이 필요합니다. 개발/테스트는 어느 OS에서나 됩니다.

1단계 — Node.js 설치 확인

터미널에서 아래 명령어로 Node.js가 설치되어 있는지 확인합니다.

node -v
# v20.x.x 이상이면 OK

npm -v
# 함께 확인

Node.js가 없다면 nodejs.org에서 LTS 버전을 설치하세요.

2단계 — 프로젝트 생성

별도의 CLI 전역 설치 없이, npx로 바로 프로젝트를 생성합니다.

npx create-expo-app@latest my-app
cd my-app

my-app 자리에 원하는 프로젝트 이름을 입력하세요.

생성 후 폴더 구조는 다음과 같습니다.

my-app/
├── app/                  # 화면 파일 (Expo Router)
│   ├── (tabs)/
│   │   ├── index.tsx     # 첫 번째 탭 화면
│   │   └── explore.tsx   # 두 번째 탭 화면
│   └── _layout.tsx       # 앱 전체 레이아웃
├── assets/               # 이미지, 폰트 등 정적 파일
├── components/           # 재사용 컴포넌트
├── constants/            # 색상 등 상수값
├── app.json              # 앱 설정 (이름, 아이콘 등)
├── package.json          # 의존성 관리
└── tsconfig.json         # TypeScript 설정

3단계 — 개발 서버 실행

npx expo start

실행하면 터미널에 QR 코드가 표시됩니다.

Metro waiting on exp://192.168.x.x:8081
› Scan the QR code above with Expo Go (Android)
› or the Camera app (iOS)

4단계 — 폰에서 확인 (Expo Go)

  1. 스마트폰에 Expo Go 앱을 설치합니다
  2. 폰과 컴퓨터가 같은 Wi-Fi에 연결되어 있어야 합니다
  3. QR 코드를 스캔합니다
    • Android → Expo Go 앱에서 스캔
    • iOS → 기본 카메라 앱으로 스캔

잠시 후 폰에서 앱이 실행됩니다. 🎉

5단계 — 코드 수정해보기

app/(tabs)/index.tsx 파일을 열어 텍스트를 수정해봅니다.

// app/(tabs)/index.tsx
import { Text, View, StyleSheet } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>안녕하세요, Expo!</Text>
      <Text style={styles.subtitle}>첫 번째 앱입니다 🎉</Text>
    </View>
  );
}

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

저장하면 폰에 즉시 반영됩니다. 새로고침 필요 없습니다.

app.json — 앱 기본 설정

앱 이름, 아이콘, 버전 등 기본 정보를 설정하는 파일입니다.

{
  "expo": {
    "name": "나의 첫 앱",
    "slug": "my-app",
    "version": "1.0.0",
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "bundleIdentifier": "com.yourname.myapp"
    },
    "android": {
      "package": "com.yourname.myapp"
    }
  }
}
항목설명
name앱스토어에 표시되는 앱 이름
slugExpo 프로젝트 식별자 (영문 소문자)
version앱 버전
bundleIdentifieriOS 앱 고유 ID (역도메인 형식)
packageAndroid 앱 고유 ID (역도메인 형식)

에뮬레이터로 테스트하기 (선택)

실기기 없이 에뮬레이터로도 테스트할 수 있습니다.

# iOS 시뮬레이터 (Mac + Xcode 필요)
npx expo start --ios

# Android 에뮬레이터 (Android Studio 필요)
npx expo start --android

# 웹 브라우저
npx expo start --web

실기기 테스트가 가장 정확하므로, 가능하면 실기기를 사용하는 것을 권장합니다.

자주 발생하는 문제

QR 코드 스캔 후 연결이 안 될 때

  • 폰과 컴퓨터가 같은 Wi-Fi에 연결되어 있는지 확인
  • 터미널에서 s 키를 눌러 터널 모드로 전환
# 터널 모드 (다른 네트워크에서도 연결 가능)
npx expo start --tunnel

Metro 번들러가 느릴 때

# 캐시 초기화 후 재시작
npx expo start --clear

정리

Node.js 확인
    ↓
npx create-expo-app@latest my-app
    ↓
npx expo start
    ↓
Expo Go로 QR 스캔
    ↓
코드 수정 → 즉시 반영 확인

Expo의 가장 큰 장점은 설치부터 실기기 확인까지 10분이면 충분하다는 점입니다.
다음 편에서는 화면을 구성하는 핵심 컴포넌트들을 코드와 함께 살펴보겠습니다.

시리즈 목차

  • 1편 Expo 개발 환경 세팅 & 첫 앱 실행 ← 현재 글
  • 2편 화면 구성 & 핵심 컴포넌트
  • 3편 화면 이동 구현 (Expo Router)
  • 4편 상태 관리 & API 연동
  • 5편 디바이스 기능 활용 (카메라, 위치, 알림)
  • 6편 Firebase 연동
  • 7편 빌드 & 앱스토어 배포



댓글 남기기