Metro 란?

Metro는 엔트리 파일과 다양한 옵션을 사용할 수 있으며, 모든 코드와 종속성을 포함하는 단일 자바스크립트 파일을 반환해주는 Javascript 번들러입니다. 

 

메트로는 개발자가 코드 작업을 할 때 React-native 개발자의 경험을 개선하는 데 중점을 두었습니다.

 

앱 개발 시에 작은 변화에도 처음부터 끝까지 번들링하여 보여주는 방식을 탈피하기 위하여 태어났습니다.

 

Metro 번들링 프로세스는 세 가지 단계로 나뉘어집니다.

1. 해결

Metro는 진입점에서 필요한 모든 모듈의 그래프를 작성합니다. 메트로는 다른 파일에서 어떤 파일이 필요한지 찾기 위해서 Resolver 를 사용합니다. 이 단계는 변환 단계와 병행하여 발생합니다.

2. 변환

모든 모듈은 하나의 transfomer를 거치게 됩니다. transfomer 는 REACT-NATIVE 가 이해할 수 있는 방식으로 변환해주는 역할을 해줍니다. 모듈의 변환은 보유한 코어의 양에 따라 병렬로 이루어집니다.

3. 직렬화

모든 모듈이 변환되는 즉시 직렬화됩니다. 직렬화기는 모듈을 결합하여 하나 또는 여러 번들을 생성합니다.

 

특징

메트로는 React-native 개발자 플랫폼으로 개발자 경험을 중심으로 개발되어있습니다.

1. Hot Module reloading 

작은 코드의 변환도 감지하여 바로 번들링 작업을 진행하여 결과로 내놓을 수 있습니다.

2. 빠른 리로딩 속도

1초 미만의 리로드 사이클을 목표로 하고 있습니다. 개발자는 긴 시간동안 기다릴 필요가 없습니다.

3. 다양한 기능

D 버튼을 눌러 개발자 모드에 들어가거나 R 버튼을 눌러 재시작을 할 수 있습니다.

또한 Android, IOS 에뮬레이터에 해당 앱을 번들링한 파일을 실행시킬 수 있습니다.

 

그 외에도 웹을 통한 디버깅, Chorme 디버깅, VS Code 디버깅 등 디버깅 기능을 제공합니다.

4. assets 관리

메트로는 assets 요소를 이미지로 표시할 수 있는 개체로 변환해줍니다.