RN_yarn 사용

개발 중인 Expo 프로젝트 실행 방법 (Yarn 사용 가능)

개발 중인 프로젝트에서는 핫 리로딩, 빠른 의존성 관리, 효율적인 패키지 관리가 중요. Expo에서는 npm, npx, yarn 모두 사용 가능하며, Yarn을 사용하는 것이 더 빠르고 효율적일 수 있음.

---

1️⃣ Yarn으로 Expo 프로젝트 시작하기

✅ 기본 실행 명령어

yarn start

• package.json의 scripts에 정의된 start 명령어를 실행합니다:

  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  }

⚡ 실행 결과:

• Expo DevTools가 자동으로 열림
• QR 코드 스캔 또는 에뮬레이터로 앱 실행 가능
• 핫 리로딩(Hot Reloading) 자동 활성화 → 코드 변경 시 즉시 반영

---

2️⃣ 개발 중 자주 사용하는 명령어 (Yarn 기준)

기능	명령어	설명
앱 실행 (기본)	yarn start	Expo DevTools 실행
Android 에뮬레이터 실행	yarn android	Android 시뮬레이터에서 앱 실행
iOS 시뮬레이터 실행 (Mac)	yarn ios	iOS 시뮬레이터에서 앱 실행
웹 브라우저에서 실행	yarn web	React Native Web으로 앱 실행
캐시 초기화 후 실행	yarn start --reset-cache	캐시 문제 해결용
프로덕션 모드로 실행	yarn start --no-dev --minify	프로덕션 빌드와 유사한 환경에서 테스트

---

📍 3️⃣ 개발 중 캐시 문제 해결

개발 중 캐시 이슈로 인해 코드 변경이 반영되지 않는 경우가 있음. 이럴 때는 캐시를 초기화해야함:

yarn start --reset-cache

또는 더 강력한 초기화 방법:

rm -rf node_modules
yarn install
yarn start

---

4️⃣ Yarn 설치 및 초기 설정 (필요한 경우)

만약 아직 Yarn이 설치되어 있지 않다면:

npm install --global yarn

Expo 프로젝트에 Yarn을 설정하려면:

yarn install

이후부터는 npm 대신 yarn을 사용할 수 있습니다.

---

5️⃣ 개발 환경 최적화 설정

✅ 핫 리로딩 활성화 (Expo DevTools에서 설정 가능)

1. yarn start 실행 → Expo DevTools가 열림
2. 우측 상단의 "Options" 클릭
3. Hot Reload 또는 Fast Refresh 활성화

✅ 환경 변수 설정 (개발/프로덕션 분리)

.env 파일 생성:

API_URL=https://dev-api.example.com

React Native 환경에서는 react-native-dotenv 패키지로 사용할 수 있습니다.

yarn add react-native-dotenv

babel.config.js 설정 추가:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ["module:react-native-dotenv"]
    ]
  };
};

사용 예시:

import { API_URL } from '@env';
console.log(API_URL);

---

📢 최종 추천

상황	추천 명령어
일반적인 개발 환경	yarn start
Android 에뮬레이터 실행	yarn android
iOS 시뮬레이터 실행 (Mac)	yarn ios
웹 브라우저 테스트	yarn web
캐시 초기화 후 실행 (문제 발생 시)	yarn start --reset-cache