hansoo/Obsidian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
266674cc0e776bfee8da7c151563a146ab68ddcc
Obsidian/ZELLYY/zellyy note/02_기술_문서/React_Native_설정_가이드.md
hansoo 266674cc0e 초기 커밋
2025-03-26 18:16:46 +09:00

8.4 KiB
Raw Blame History

React Native 설정 가이드

이 문서는 Zellyy 모바일 앱 개발을 위한 React Native 개발 환경 설정 방법을 안내합니다.

개발 환경 요구사항

  • Node.js 16.0.0 이상
  • npm 8.0.0 이상 또는 Yarn 1.22.0 이상
  • Git
  • Watchman (macOS 사용자)
  • Xcode 14.0 이상 (iOS 개발용, macOS 필요)
  • Android Studio (Android 개발용)
  • JDK 11 이상

개발 환경 설정

1. Node.js 및 npm 설치

macOS (Homebrew 사용)

brew install node

Windows (Chocolatey 사용)

choco install nodejs

Linux (Ubuntu/Debian)

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

2. React Native CLI 설치

npm install -g react-native-cli

3. Expo CLI 설치 (권장)

Expo는 React Native 개발을 더 쉽게 만들어주는 도구 세트입니다. Zellyy 프로젝트는 Expo를 사용하여 개발합니다.

npm install -g expo-cli

4. iOS 개발 환경 설정 (macOS 필요)

Xcode 설치

App Store에서 Xcode를 설치하거나 Apple 개발자 웹사이트에서 다운로드합니다.

iOS 시뮬레이터 설정

Xcode를 설치한 후, 다음 명령어로 iOS 시뮬레이터를 설치합니다:

  1. Xcode 실행
  2. Xcode > Preferences > Components 메뉴 선택
  3. 원하는 iOS 시뮬레이터 버전 설치

CocoaPods 설치

sudo gem install cocoapods

5. Android 개발 환경 설정

Android Studio 설치

Android Studio 다운로드 페이지에서 Android Studio를 다운로드하고 설치합니다.

Android SDK 설치

Android Studio를 설치한 후, 다음 단계를 따릅니다:

  1. Android Studio 실행
  2. SDK Manager 열기 (Tools > SDK Manager)
  3. "SDK Platforms" 탭에서 Android 12 (API Level 31) 이상 설치
  4. "SDK Tools" 탭에서 다음 항목 설치:
    • Android SDK Build-Tools
    • Android Emulator
    • Android SDK Platform-Tools
    • Google Play services

환경 변수 설정

macOS/Linux

~/.bash_profile 또는 ~/.zshrc 파일에 다음 내용을 추가합니다:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
Windows

시스템 환경 변수에 다음 내용을 추가합니다:

  • 변수 이름: ANDROID_HOME
  • 변수 값: C:\Users\USERNAME\AppData\Local\Android\Sdk

PATH 환경 변수에 다음 경로를 추가합니다:

  • %ANDROID_HOME%\platform-tools
  • %ANDROID_HOME%\emulator
  • %ANDROID_HOME%\tools
  • %ANDROID_HOME%\tools\bin

Zellyy 프로젝트 설정

1. 프로젝트 클론

git clone https://github.com/your-organization/zellyy-app.git
cd zellyy-app

2. 의존성 설치

npm install
# 또는
yarn install

3. 환경 변수 설정

.env.example 파일을 복사하여 .env 파일을 생성하고 필요한 환경 변수를 설정합니다:

cp .env.example .env

.env 파일을 열고 다음 변수를 설정합니다:

API_URL=https://a11.ism.kr/api
SUPABASE_URL=https://a11.ism.kr
SUPABASE_ANON_KEY=your_supabase_anon_key

4. iOS 설정 완료 (macOS 필요)

cd ios
pod install
cd ..

5. 앱 실행

Expo 개발 서버 시작

expo start

이 명령어는 개발 서버를 시작하고 QR 코드를 표시합니다. Expo Go 앱(iOS/Android)으로 QR 코드를 스캔하여 앱을 실행할 수 있습니다.

iOS 시뮬레이터에서 실행

expo run:ios
# 또는
npm run ios

Android 에뮬레이터에서 실행

expo run:android
# 또는
npm run android

프로젝트 구조

Zellyy 앱 프로젝트는 다음과 같은 구조로 구성됩니다:

zellyy-app/
├── App.js                # 앱의 진입점
├── app.json              # Expo 설정
├── assets/               # 이미지, 폰트 등의 정적 자산
├── babel.config.js       # Babel 설정
├── components/           # 재사용 가능한 UI 컴포넌트
│   ├── Card/             # 카드 관련 컴포넌트
│   ├── Common/           # 공통 UI 컴포넌트
│   └── ...
├── constants/            # 상수 정의
├── hooks/                # 커스텀 React 훅
├── navigation/           # 네비게이션 설정
├── screens/              # 앱 화면
│   ├── Auth/             # 인증 관련 화면
│   ├── Cards/            # 카드 관련 화면
│   ├── Profile/          # 프로필 관련 화면
│   └── ...
├── services/             # API 및 외부 서비스 통합
│   ├── api.js            # API 클라이언트
│   ├── supabase.js       # Supabase 클라이언트
│   └── ...
├── store/                # 상태 관리 (Redux 또는 Context API)
├── styles/               # 글로벌 스타일 정의
└── utils/                # 유틸리티 함수

주요 라이브러리

Zellyy 앱은 다음과 같은 주요 라이브러리를 사용합니다:

  • React Navigation: 화면 간 네비게이션
  • Expo: 개발 도구 및 네이티브 기능 접근
  • Supabase JS Client: Supabase 백엔드 연동
  • React Native Paper: Material Design 컴포넌트
  • Formik & Yup: 폼 관리 및 유효성 검사
  • React Native Share: 소셜 미디어 공유 기능
  • Async Storage: 로컬 데이터 저장
  • React Native SVG: SVG 이미지 지원
  • React Native Reanimated: 고급 애니메이션

코딩 스타일 가이드

Zellyy 프로젝트는 다음과 같은 코딩 스타일을 따릅니다:

  • ESLint & Prettier: 코드 품질 및 포맷팅
  • 함수형 컴포넌트: 클래스 컴포넌트 대신 함수형 컴포넌트와 훅 사용
  • 명명 규칙:
    • 컴포넌트: PascalCase (예: CardItem.js)
    • 함수 및 변수: camelCase (예: getUserData)
    • 상수: UPPER_SNAKE_CASE (예: API_URL)
  • 파일 구조: 관련 기능끼리 폴더로 그룹화
  • 주석: 복잡한 로직에 주석 추가

디버깅

React Native Debugger 설정

React Native Debugger를 사용하여 앱을 디버깅할 수 있습니다:

  1. React Native Debugger 설치:

    # macOS (Homebrew)
brew install --cask react-native-debugger

# Windows/Linux
# GitHub 릴리스 페이지에서 다운로드

  2. 디버거 실행:

    open "rndebugger://set-debugger-loc?host=localhost&port=19000"

  3. 앱에서 디버깅 활성화:

    • iOS 시뮬레이터: Cmd + D 누르고 "Debug JS Remotely" 선택
    • Android 에뮬레이터: Cmd + M 또는 Ctrl + M 누르고 "Debug JS Remotely" 선택

Flipper (선택 사항)

네이티브 코드 디버깅을 위해 Flipper를 사용할 수 있습니다.

빌드 및 배포

iOS 앱 빌드

  1. 앱 버전 업데이트: app.json 파일에서 version 및 buildNumber 업데이트

  2. 배포용 빌드 생성:

    expo build:ios

  3. 생성된 IPA 파일을 App Store Connect에 업로드

Android 앱 빌드

  1. 앱 버전 업데이트: app.json 파일에서 version 및 versionCode 업데이트

  2. 배포용 빌드 생성:

    expo build:android

  3. 생성된 APK 또는 AAB 파일을 Google Play Console에 업로드

문제 해결

일반적인 문제 및 해결 방법

  1. Metro 번들러 캐시 문제:

    expo start --clear

  2. 의존성 문제:

    rm -rf node_modules
npm install

  3. iOS 빌드 실패:

    cd ios
pod install --repo-update
cd ..

  4. Android 빌드 실패:

    cd android
./gradlew clean
cd ..

참고 자료

결론

이 가이드는 Zellyy 앱 개발을 위한 React Native 환경 설정 및 프로젝트 구조에 대한 기본 정보를 제공합니다. 개발 과정에서 추가적인 질문이나 문제가 있으면 개발팀에 문의하세요.

Reference in New Issue View Git Blame Copy Permalink