Metro

Metro Bundler란?

Metro Bundler는 React Native 프로젝트에서 사용되는 기본 번들러입니다. 모바일 애플리케이션을 위해 설계되었으며, 주로 iOS 및 Android 네이티브 환경에서 JavaScript 코드를 번들링하고 실행 가능한 상태로 만들어줍니다.

Metro Bundler의 주요 기능:

1. 번들링(Bundling): Metro는 모든 JavaScript 모듈을 하나 이상의 파일로 번들링하여 모바일 장치에서 최적화된 방식으로 실행될 수 있게 합니다. 이 과정에서 불필요한 코드를 제거하여 파일 크기를 최소화하고 로딩 시간을 단축시킵니다.
2. 핫 모듈 리플레이스먼트(HMR): Metro는 HMR을 지원하여 개발자가 코드 변경 사항을 즉시 확인할 수 있도록 도와줍니다. 앱을 다시 빌드하지 않고도 변경 사항이 실시간으로 반영됩니다.
3. 트리 쉐이킹(Tree Shaking): 코드에서 사용되지 않는 부분을 제거하여 최종 번들 크기를 줄입니다.
4. 빠른 캐싱(Fast Caching): 변경되지 않은 파일을 캐싱하여 다시 번들링할 때 빠르게 처리할 수 있습니다.
5. 소스 맵(Source Maps): 소스 맵을 생성하여 디버깅 시 번들된 코드 대신 원본 코드를 추적할 수 있습니다.
6. 파일 타입 지원: JavaScript, JSON, 이미지 등의 파일 형식을 지원하며, 애플리케이션에 필요한 리소스를 함께 관리할 수 있습니다.

React Native에서 Metro Bundler의 동작 방식:

• iOS 및 Android: Metro Bundler는 iOS와 Android 플랫폼 모두에서 동일하게 사용되며, 두 플랫폼의 네이티브 코드와 JavaScript 코드를 번들링하여 하나의 애플리케이션으로 실행됩니다. 이를 통해 React Native의 Bridge가 JavaScript와 네이티브 코드 간의 통신을 원활하게 해줍니다.

Metro Bundler와 Vite 비교:

Metro Bundler와 Vite는 각각 모바일과 웹 환경에 최적화된 번들러로, 그 목적과 동작 방식이 다릅니다.

1. 주된 사용 환경: Metro는 모바일 애플리케이션(React Native) 개발에 중점을 두고, Vite는 웹 애플리케이션 개발에 최적화되어 있습니다.
2. 핫 리로딩(HMR): 두 도구 모두 HMR을 지원하지만, Vite는 웹 브라우저 환경에서, Metro는 모바일 장치에서 동작하도록 설계되었습니다.
3. 번들링 성능: Vite는 웹에서 빠른 빌드를 제공하기 위해 ESM을 활용하고, Metro는 모바일 환경에서 효율적인 번들링을 제공합니다.