이 프로젝트는 React Native를 기반으로 한 모바일 애플리케이션입니다.
프로젝트는 @react-native-community/cli를 사용해 부트스트랩 되었으며, TypeScript를 포함한 현대적인 모바일 개발 환경을 제공합니다.
주요 폴더 구조는 다음과 같습니다:
- apis: API 호출 및 관련 로직 관리
- assets: 이미지, 폰트 등 정적 자산 관리
- components: 재사용 가능한 UI 컴포넌트 모음
- constants: 프로젝트 전반에서 사용되는 상수 관리
- hooks: 커스텀 훅 관리
- navigations: 앱의 네비게이션 설정 및 관리
- screens: 화면 단위의 컴포넌트 모음
- states: Redux 상태 관리 관련 파일
- utils: 유틸리티 함수 및 공통 로직 관리
- webSocket: 웹소켓 관련 로직 및 상태 관리
전체 폴더 구조는 다음과 같습니다.
📦src
┣ 📂apis
┃ ┗ 📜api.ts
┣ 📂assets
┃ ┗ 📜circleLogo.png
┣ 📂components
┃ ┣ 📂chat
┃ ┃ ┣ 📜AddInstructionBtn.tsx
┃ ┃ ┣ 📜ChatbotInstruction.tsx
┃ ┃ ┣ 📜ImageInput.tsx
┃ ┃ ┣ 📜MessageInput.tsx
┃ ┃ ┗ 📜MessageItem.tsx
┃ ┣ 📜BookmarkContainer.tsx
┃ ┣ 📜CustomButton.tsx
┃ ┗ 📜InputField.tsx
┣ 📂constants
┃ ┣ 📜colors.ts
┃ ┗ 📜index.ts
┣ 📂hooks
┃ ┗ 📜useForm.ts
┣ 📂navigations
┃ ┣ 📂drawer
┃ ┃ ┣ 📜CustomDrawerContent.tsx
┃ ┃ ┗ 📜MainDrawerNavigator.tsx
┃ ┣ 📂root
┃ ┃ ┗ 📜RootNavigator.tsx
┃ ┣ 📂stack
┃ ┃ ┣ 📜AuthStackNavigator.tsx
┃ ┃ ┗ 📜SettingsStackNavigator.tsx
┃ ┗ 📜navigations.ts
┣ 📂screens
┃ ┣ 📂auth
┃ ┃ ┣ 📜LoginScreen.tsx
┃ ┃ ┣ 📜NicknameScreen.jsx
┃ ┃ ┣ 📜OnboardingScreen.tsx
┃ ┃ ┗ 📜SignupScreen.tsx
┃ ┣ 📂bookmarks
┃ ┃ ┗ 📜BookmarksScreen.tsx
┃ ┣ 📂chat
┃ ┃ ┗ 📜ChatScreen.tsx
┃ ┣ 📂dr
┃ ┃ ┣ 📜DRFirstScreen.tsx
┃ ┃ ┗ 📜DRSecondScreen.tsx
┃ ┗ 📂settings
┃ ┃ ┣ 📜SettingsFirstScreen.tsx
┃ ┃ ┣ 📜SettingsMainScreen.tsx
┃ ┃ ┗ 📜SettingsSceondScreen.tsx
┣ 📂states
┃ ┣ 📜authSlice.ts
┃ ┣ 📜store.ts
┃ ┗ 📜userSlice.ts
┣ 📂utils
┃ ┣ 📜common.ts
┃ ┣ 📜imagePicker.ts
┃ ┣ 📜index.ts
┃ ┗ 📜validate.ts
┗ 📂webSocket
┃ ┣ 📜websocketActionTypes.ts
┃ ┣ 📜websocketActions.ts
┃ ┣ 📜websocketHandler.ts
┃ ┗ 📜websocketReducer.ts
React Native 프로젝트를 빌드하고 실행하려면 환경 설정이 필요합니다.
아래 React Native - Environment Setup을 완료한 뒤 진행하세요.
React Native는 Metro라는 JavaScript 번들러를 사용합니다.
먼저 Metro 서버를 실행해야 합니다.
터미널에서 프로젝트 루트 디렉터리로 이동한 후 다음 명령어를 실행하세요:
# npm 사용 시 npm start
# 또는 Yarn 사용 시 yarn start
Metro 번들러를 실행한 상태에서 새로운 터미널을 열고 아래 명령어를 입력하세요.
# npm 사용 시 npm run ios
# 또는 Yarn 사용 시 yarn ios
조건:
- iOS 시뮬레이터가 올바르게 설정되어 있어야 합니다.
- Xcode를 통해 직접 실행할 수도 있습니다.
프로젝트를 설치하려면 다음 명령어를 실행하세요:
# 패키지 설치 npm install
# 또는 yarn install
React Native에 대해 더 알아보려면 다음 리소스를 참고하세요:
아래 명령어를 사용해 iOS 시뮬레이터에서 애플리케이션을 테스트할 수 있습니다:
npm run ios
테스트 시 사용할 계정 정보는 다음과 같습니다:
- ID:
[email protected] - PW:
password1!
- 메뉴 추천 기능 : I want to eat something spicy.
- 메뉴판 설명 기능:
- 반찬 설명 기능:
