Travel Point - 기획부터 개발까지 3

# Expo 프로젝트 설치
npx create-expo-app@latest

# 프로젝트 실행
npx expo start

# 파일 한도 에러 발생 시 한도 추가 (재부팅 시 초기화 - 필요 시 .zshrc 수정)
sudo launchctl limit maxfiles 524288 524288 && ulimit -n 524288

# 필수 패키지 설치
npx expo install react-native-webview
npx expo install expo-status-bar
expo install react-native-safe-area-context

# Android 빌드
eas build --platform android --profile preview

import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
import { StatusBar } from 'expo-status-bar';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { SafeAreaView } from 'react-native-safe-area-context';

// 앱의 모든 에셋이 로딩되기 전에 스플래시 화면이 자동으로 숨겨지는 것을 방지합니다.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  // 'useFonts' 훅을 사용하여 커스텀 폰트를 로드합니다.
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  // 'loaded' 상태가 변경될 때마다 실행되는 효과 훅을 설정합니다.
  useEffect(() => {
    // 폰트가 로드되었을 때 스플래시 화면을 숨깁니다.
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  // 폰트가 로드되지 않았다면 아무 것도 렌더링하지 않습니다.
  if (!loaded) {
    return null;
  }

  return (
    // 'SafeAreaView'를 사용하여 화면 상단 노치나 하단 홈 버튼 영역을 침범하지 않도록 합니다.
    <SafeAreaView style={styles.container}>
      {/* 상태 표시줄 스타일을 설정합니다. */}
      <StatusBar style="auto" />
      {/* 웹뷰를 사용하여 특정 URL을 로드합니다. */}
      <WebView source={{ uri: 'https://travel-point-umber.vercel.app/' }} style={styles.webview} />
    </SafeAreaView>
  );
}

// 스타일시트를 사용하여 스타일을 정의합니다.
const styles = StyleSheet.create({
  // 컨테이너 스타일을 설정합니다.
  container: {
    flex: 1, // 컨테이너가 화면 전체를 차지하도록 합니다.
    backgroundColor: '#fff', // 배경색을 흰색으로 설정합니다.
  },
  // 웹뷰 스타일을 설정합니다.
  webview: {
    flex: 1, // 웹뷰가 컨테이너 전체를 차지하도록 합니다.
  },
});

{
  "expo": {
    "name": "Travel-Point",
    "slug": "travel-point",
    "version": "1.0.0",
    "scheme": "travel-point",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.inhwancho.travelpoint"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/android-chrome-512x512.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.inhwancho.travelpoint"
    },
    "web": {
      "favicon": "./assets/images/apple-touch-icon.png"
    },
    "extra": {
      "eas": {
        "projectId": "2f1a1775-7cf1-40d8-befe-a7d9be153dc0"
      }
    }
  }
}

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "production": {
      "ios": {
        "simulator": false,
        "image": "latest"
      },
      "android": {
        "buildType": "app-bundle"
      }
    }
  }
}