DateP 프로젝트 초기 설정

 npx gluestack-ui add --all

DateP 프로젝트 초기 설정

---

1. 프로젝트 생성 및 초기화
   1. React-Native EXPO 생성
      • 프로젝트 생성 명령어:
        bash

        코드 복사

        npx create-expo-app DateP
      • EXPO는 크로스 플랫폼 개발에 강력한 도구로, iOS와 Android 앱을 동시에 개발할 수 있습니다.
   2. Gluestack UI 설치 및 초기화
      • Gluestack UI는 React-Native 앱 개발에서 빠르고 일관성 있는 UI 컴포넌트를 제공.
      • 프로젝트에 Gluestack UI 설치:
        bash

        코드 복사

        npm install gluestack-ui
      • Gluestack UI에서 제공하는 모든 컴포넌트를 초기화:
        bash

        코드 복사

        npx gluestack-ui add --all
      • 위 명령어로 Gluestack UI의 전체 컴포넌트가 프로젝트에 추가되며, 모든 UI 요소를 손쉽게 사용할 수 있습니다

---

전체적인 앱 구조 설계

• 탭 구조:
  • Home 탭: 사용자 입력 및 추천받기 기능.
  • Result 탭: 추천받은 결과를 확인하고 저장.
• 프로젝트의 MVP를 빠르게 구현하기 위해 홈 화면 작업부터 시작.

---

결과물

• 프로젝트가 기본적으로 EXPO 환경에서 동작하며, Gluestack UI로 구성된 기본적인 UI를 사용할 준비가 완료된 상태.

---

코드 스니펫

 

npx create-expo-app DateP
npm install gluestack-ui
npx gluestack-ui add --all

 

_layout.tsx 초기화 코드

import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: 'absolute',
          },
          default: {},
        }),
      }}
    >
      {/* Home 화면 */}
      <Tabs.Screen
        name="index"
        options={{
          title: 'Index',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />

      {/* Result 화면 */}
      <Tabs.Screen
        name="result"
        options={{
          title: 'Result',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="checkmark.seal.fill" color={color} />,
        }}
      />
    </Tabs>
  );
}

 

---

주요 내용 요약

• React-Native EXPO로 프로젝트 생성 완료.
• Gluestack UI 초기화를 통해 빠르고 일관성 있는 UI 구성 가능.
• 앱 구조 설계: Home 탭(사용자 입력)과 Result 탭(결과 확인)을 중심으로 설계.