[React Native] Metro Bundler 가이드

 

Metro Bundler 가이드

📦

Metro Bundler는 React Native 전용 JavaScript 번들러입니다.
여러 개의 JavaScript 파일을 하나로 합쳐서 앱에서 실행할 수 있게 만들어줍니다.

🍱 쉬운 비유: Metro는 도시락을 싸는 사람 같아요!
여러 반찬(JS 파일들)을 하나의 도시락통(번들)에 예쁘게 담아서,
핸드폰(앱)에서 바로 먹을 수 있게 준비해주는 거죠!

🔄 Metro의 작동 과정

1

파일 스캔

프로젝트의 모든 JS 파일을 찾습니다

2

종속성 분석

어떤 파일이 어떤 파일을 사용하는지 파악

3

코드 변환

최신 JS를 구형 기기에서도 실행되게 변환

4

번들 생성

모든 코드를 하나의 파일로 합침

5

앱으로 전송

완성된 번들을 디바이스로 전송

⚡

빠른 리로드

코드를 수정하면 즉시 앱에 반영됩니다. Fast Refresh 기능으로 개발 속도가 빨라져요!

🔍

실시간 감시

파일 변경을 실시간으로 감지해서 자동으로 다시 번들링합니다.

🎯

스마트 캐싱

변경된 부분만 다시 처리해서 빌드 시간을 단축시킵니다.

🛠️

개발자 도구

디버깅, 네트워크 검사, 성능 모니터링 등 개발에 필요한 도구를 제공합니다.

 

 

 

Metro Bundler 실행 화면

$ yarn start

Welcome to Metro!
Fast - Scalable - Integrated

✓ Metro Bundler ready.

┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ To reload the app, press "r" │
│ To open developer menu, press "d" │
│ To open React devtools, press "j" │
│ │
└──────────────────────────────────────────────────────────────────────────────┘

▓ Waiting for bundler to finish...

▓ Bundle ready (2.3s)

🎮 Metro 개발 중 유용한 명령어

r 키

앱을 다시 로드합니다. 뭔가 이상할 때 눌러보세요!

d 키

개발자 메뉴를 엽니다. 디버깅 도구에 접근할 수 있어요.

j 키

React DevTools를 엽니다. 컴포넌트 구조를 확인할 때 유용해요.

Ctrl + C

Metro 서버를 종료합니다. 개발 끝날 때 눌러주세요.

🚨 자주 발생하는 문제들

❌ "Metro bundler has encountered an internal error"

→ Metro 서버를 재시작하세요: Ctrl + C 후 yarn start

❌ 포트 8081이 이미 사용 중

→ yarn start --port 8082로 다른 포트 사용
→ 또는 npx kill-port 8081로 포트 해제

❌ 캐시 문제로 이상한 오류 발생

→ yarn start --reset-cache로 캐시 초기화
→ 또는 npx react-native start --reset-cache

💡 초보자를 위한 핵심 요약

Metro = React Native 앱을 만들어주는 요리사

🍱 여러 JS 파일들을 하나로 합쳐서 앱이 실행될 수 있게 만듭니다
⚡ 코드 수정하면 즉시 앱에 반영됩니다 (Fast Refresh)
🎮 r, d, j 키로 다양한 개발 도구를 사용할 수 있어요
🚨 문제 생기면 서버 재시작이나 캐시 초기화를 먼저 시도해보세요!