[React Native] Metro? 메트로가 뭐야?

우혁주·2024년 2월 21일
reactnative
1

ReactNative

목록 보기
1/1

리엑트 네이티브 공부를 시작했다. 공부를 시작하고 조금씩 리엑트 네이티브를 만져보던 중, 매번 yarn start로 시작을 하면 metro가 나를 반겨줬고, 이게 뭔데 매번 나오는건지, 궁금해졌고 이것에 대해 포스팅을 하게 됐다.

메트로란??

내가 생각하기에 메트로는 다양한 역할을 하지만 그 중, 가장 크게 다루어지는것은 번들러의 역할인것으로 생각된다.

그렇다면 번들러가 무엇인가?

리엑트로 개발을 할때 한가지 파일 안에 모든 코드를 넣는것이 아니라, 모듈화하여 개발을 하는경우가 많고, 여러가지를 import 하여 코드 작성을 한다.

  1. 이때 번들러가 따로따로 떨어진 여러 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어준다. 또한 import 경로를 정확하게 찾아 주어, 개발 시에 크게 신경 쓰지 않고 개발을 이어나갈 수 있도록 해준다.
  2. 또한 타입스크립트, 리엑트네이티브에서 사용되는 Flow 같은 비표쥰 자바스크립트들을 표준 자바스크립트로 변환해주는 역할을 한다.
  3. 1번과 2번의 과정을 resolution과 load라 하는데 마지막으로 Optimization 이란 최적화 작업을 진행한다.
    1. 전체적으로 보면 Minificaiton 과 Tree Shaking 이 있지만 Tree Shaking의 경우 React Native에서 제공되지 않는다.
    2. Minification에는 Compression(압축)과 Mangling이 있는데,
      Minification은 undefined -> void 0 , 2 + 3 -> 5 이런식으로 코드 동작을 최대한 유지하고 코드를 압축하는것이다.
      Mangling은 (이름 바꾸기)인데, function add(num1,num2) { return num1 + num2;} 이런 코드를 funciton add(a,b) {return a + b; } 와 같이 이름을 변경하여 메모리를 줄이는 작업이다.

이외에 매트로가 하는 일에 대하여 하나씩 알아보도록 하자!

캐싱

  • 위 번들링 과정에서 캐싱을 통해 모듈과 종속성이 변경되지 않는 한, 다음 번들링에서 또다시 계산하는 작업이 사라져, 빌드속도를 향상시키며, 반복적인 빌드 작업 시 자원을 절약 시켜준다.
  • 하지만 이 캐싱 때문에 문제가 발생하는 경우도 있다. 예로, 캐시된 파일이 업데이트 되지 않는 경우 발생시 변경사항이 바로 반영되지 않는 경우도 있기 때문이다.

핫 리로딩 (메트로 번들러)

  • 개발 중에 코드 변경을 감지하고, 실시간으로 리로딩을 하여 어플리케이션 수정시, 즉시 변경 사항을 확인 할 수 있도록 하여, 효율적인 개발과 디버깅을 할 수 있도록 합니다.

정적 자산 관리

  • Assets, 즉 이미지, 폰트, 스타일 시트 등의 정적 자산을 효율적으로 관리하여 줍니다.

서버

  • 메트로 서버는 개발 서버를 제공하여 앱을 개발 중에 실행할 수 있도록 한다. 개발 서버는 앱의 자바스크립트 파일을 호스팅하고, 번들링된 파일을 클라이언트에 제공한다.
  • 리엑트를 개발할때 localhost:3000 에서 확인을 하고 계속 개발이 진행이 된다.
    이는 로컬의 3000번 포트에 서버를 여는것인데, 개발 서버는 보통 이와 같이 로컬의 8081 포트에 서버를 열어 앱이 실행될수 있도록 한다.
포트 번호 변경 원할시에 아래 참고하면 된다.

$ adb devices

예뮬레이터 혹은 기기 목록 출력

emulator-5234 device
emulator-1156 device
adb -s [기기이름] reverse tcp:[포트번호] tcp:[포트번호]

예)
adb -s emulator-5554 reverse tcp:8081 tcp:8081

이를 통해 포트번호를 지정해 줄 수 있다.
  • Metro는 로컬 호스트에서 WebSocket을 열어 에뮬레이터 또는 실제 장치에 연결한다. 이 소켓 연결은 앱의 코드나 리소스에 변경이 발생할 때 Metro에게 알리고, 변경 사항을 즉시 반영하여 앱을 다시 빌드하고 새로 고침 없이 변경 사항을 확인하기에 위에서 언급한 핫 리로딩이 가능해 지는것이다.
    • 즉, 메트로가 코드 변경 사항을 실시간으로 감지하여 핫 리로딩(Hot Reloading)을 지원하는 것이다.

그럼 진행 프로세스를 한번 보고 블로그 포스팅을 마무리 하겠다.

  1. yarn start 명령어 실행
    • 개발서버(매트로서버)와 메트로 번들러가 실행된다.
    • 개발 서버는 앱의 자바스크립트 파일을 호스팅하고, 메트로 번들러는 이 파일들을 번들링한다.
  2. 번들링된 자바스크립트 파일 다운로드:
    • 개발 서버에서 번들링된 자바스크립트 파일을 다운로드한다.
      • 이 파일은 안드로이드 앱이나 에뮬레이터에서 실행될 때 사용된다.
  3. yarn ios / yarn android 실행
    1. ios 시뮬레이터, android 에뮬레이터가 켜지고,
    2. 자바스크립트로 번들링된 파일을 로드하고 실행된다.
  4. 리액트 네이티브 앱이 시작
    1. 이때 핫 리로딩은 리엑트 번들러로 인해 실행되는것이다.

이 외에 중요한것들이 빠져있다면 계속 공부하면서 추가해 나갈것이다.
https://metrobundler.dev/docs/getting-started
이 문서는 메트로 공식 문서로 잘 설명 되어 있으니, 안을 보고 더 공부해봐야겠다.

최종 정리

메트로 번들러와 메트로 서버는 리액트 네이티브 애플리케이션 개발에서 중요한 역할을 하는 도구다. 메트로는 자바스크립트 코드를 번들링하고 개발 서버를 제공하여 실시간으로 수정하고 테스트할 수 있도록 한다.

메트로 번들러 (Metro Bundler)

리액트 네이티브 애플리케이션의 자바스크립트 코드를 번들링하는 도구다. 번들링이란 앱의 모든 자바스크립트 파일을 하나의 번들로 묶는 과정이다. 아래 메트로 번들러의 주요 역할이다.

의존성 해결 (Dependency Resolution)

앱의 모든 자바스크립트 파일이 의존하는 모듈 및 라이브러리를 식별하고, 이를 정확한 순서로 가져오는 것을 처리한다.

번들링 (Bundling)

의존성을 해결하고 개발 서버로부터 요청을 받으면, 메트로 번들러는 모든 자바스크립트 코드를 단일 번들 파일로 결합한다.

Hot Reloading 지원

개발 모드에서는 코드 변경 사항을 실시간으로 감지하여 즉시 적용할 수 있도록 핫 리로딩(Hot Reloading)을 지원한다.

디버그 정보 포함

개발 모드에서는 디버깅을 위해 추가적인 정보를 번들에 포함시킨다. 예를 들어, 소스 맵(Source Maps)을 생성하여 개발자가 원래의 소스 코드를 디버깅할 수 있도록 한다.

메트로 서버 (Metro Server)

메트로 서버는 개발 중에 사용되는 개발 서버다. 메트로 번들러와 함께 작동하여 앱을 개발 중에 실행하고 디버깅하는 데 필요한 환경을 제공한다. 메트로 서버의 주요 역할은 다음과 같다.

개발 서버 제공

개발 서버는 앱의 자바스크립트 파일을 호스팅하고, 개발 중에 앱을 실행하는 데 사용된다.

Hot Reloading

메트로 서버는 코드 변경 사항을 실시간으로 감지하여 핫 리로딩을 지원한다. 이를 통해 개발 중에 코드 변경 사항을 즉시 확인할 수 있다.

디버깅 환경 제공

개발 모드에서는 메트로 서버가 앱의 디버그 정보를 포함한 추가적인 정보를 제공한다. 이 정보를 사용하여 앱을 디버깅하고 문제를 해결할 수 있다.

profile
우혁주
프론트엔드 개발자

0개의 댓글