React Native Flipper: 더 나은 디버깅 방법

Flipper란?

페이스북mobile apps이 개발한 소스 디버깅 도구로 iOS와 안드로이드에 적용된다.그것은 이미 오랫동안 존재해 왔지만 아직 광범위하게 사용되지 않았다.그러나 React Native0.62의 발표에 따라 바뀔 수 있으며, 이 버전은 기본적으로 Flipper와 통합되어 있다.
Flipper는 원격 디버깅을 사용하여 가능한 한 생산 환경에 가까운 환경에서 프로그램을 실행할 수 있도록 합니다.직접 디버깅하는 것보다 프로그램을 디버깅할 때 자신감을 갖게 한다.
그러나 Flipper는 다른 디버그 도구와 다른 가장 큰 장점은 플러그인 라이브러리입니다. 플러그인 라이브러리는 플러그인 인터페이스에서 플러그인을 직접 설치하고 기능을 확장할 수 있습니다.너도 플러그인을 만들어서 공유할 수 있어!하지만 우리 처음부터 시작합시다.

직접 및 원격 디버깅

"원격 또는 직접 디버깅은 무엇입니까?"라고 생각할 수 있습니다.아니면 "내가 왜 원격 디버깅을 사용해야 합니까?"설명 좀 할게요.

기본적으로 React Native app는 대상 장치에서 실행될 때 자바스크립트 코어를 엔진으로 사용합니다.응용 프로그램을 디버깅하기 시작하면 웹 원격 디버깅이나 React Native Debugger를 사용하는 것과 같은 상황이 달라집니다.
이 경우 애플리케이션이 로컬 시스템에서 V8을 사용하여 실행 중입니다.이는 V8에 나타나지 않았기 때문에 무시될 수 있는 오류를 초래할 수 있기 때문에 문제입니다.이 밖에 응용 프로그램이 기계에서 실행될 때의 성능은 실제 장치에서 실행될 때의 성능과 다르다.
React Native에서 커머셜 애플리케이션을 구축하시겠습니까?
Get a FREE Consultation Call To Set Up The Fundamentals

Flipper 사용 방법

앞에서 말했듯이, 만약 응용 프로그램이 React Native 0.62+를 사용한다면, 응용 프로그램에 플립퍼 통합이 되어 있습니다.설치Flipper만 하면 됩니다!
만약 이전 버전을 사용한다면, Flipper가 응용 프로그램과 함께 사용할 수 있는 추가 절차가 있습니다.iOS 및 Android의 URL을 따르십시오.

첫걸음

Flipper를 시작하면 볼 내용입니다. (기계나 연결된 장치에서 React 본체 프로그램을 실행하고 있다고 가정하십시오.)

여기서 다음을 액세스할 수 있습니다.

사고보고원-사고일지

로그 (js에서 온 로그와 본체 로그를 포함하여 Xcode나 안드로이드 스튜디오를 시작할 필요가 없음)

레이아웃 - Chrome 디버그 콘솔

에 해당하는 요소 브라우저

네트워크 – 모든 수신/전송 네트워크 요청을 탐색할 수 있음

공유 기본 설정 뷰어 - 공유 기본 설정을 보고 편집할 수 있음

Hermes Debugger – Hermes

의 Android 애플리케이션 디버거 사용

React DevTools – 전체 React DevTools를 Flipper 내부 플러그인으로 사용

만약 당신이 많은 다른 플러그인을 설치할 수 있다고 생각한다면, 플러그인 관리자를 사용해야 할 수도 있습니다. 플러그인은 당신이 설치한 플러그인을 훑어보고 업데이트를 삭제하거나 새 플러그인을 추가할 수 있도록 합니다.

자체 플러그인 작성

Flipper를 사용하면 프로그램의 특정한 용례를 디버깅하거나 테스트할 수 있는 플러그인을 만들 수 있습니다.응용 프로그램과 데이터 교환, 이벤트 전송, 수신, 그리고 유용한 UI로 포장할 수 있습니다.
Flipper 플러그인은

모바일 클라이언트 - 대상 장치에서 실행되는 코드

데스크톱 프로그램 - 컴퓨터에서 실행되는 전자 프로그램

데스크톱 응용 프로그램

Flipper 플러그인을 작성하려면 Thread 또는 npm을 사용하여 Flipper pkg을 설치해야 합니다.그런 다음 flipper pkg init를 사용하여 플러그인을 만들 수 있습니다.플러그인의 id와 제목을 요청받을 것입니다.
그리고 색인에 있는 코드를 바꿉니다.플러그인의 tsx 코드는 다음과 같습니다.

import {
  Text,
  Panel,
  ManagedDataInspector,
  createTablePlugin,
  TableBodyRow,
} from 'flipper';
import React from 'react';

type Row = {
  id: string;
  title: string;
};

const columns = {
  title: {
    value: 'Title',
  },
};

const columnSizes = {
  title: 'flex',
};

function renderSidebar(row: Row) {
  return (
    <Panel floating={false} heading={'Info'}>
      <ManagedDataInspector data={row} expandRoot={true} />
    </Panel>
  );
}

function buildRow(row: Row): TableBodyRow {
  return {
    columns: {
      title: {
        value: <Text>{row.title}</Text>,
      },
    },
    key: row.id,
    copyText: JSON.stringify(row),
    filterValue: `${row.title}`,
  };
}

export default createTablePlugin<Row>({
  method: 'testMethod',
  columns,
  columnSizes,
  renderSidebar,
  buildRow,
});

여기서 무슨 일이 일어났는지 설명해 드릴게요.내장된 Flipper 방법인createTablePlugin을 사용하고 있습니다. 네트워크 플러그인의 로그처럼 로컬 외관을 가진 테이블을 만들 수 있습니다.
우리는 Row를 사용하여 테이블의 각 행에 대한 데이터를 정의합니다.다음에 열과 열의 크기는 우리의 열 이름과 너비를 정의합니다.그리고 우리는 두 가지 방법이 있다.말 그대로,buildRow는 Flipper에게 복제를 처리하는 것과 같은 데이터로 줄을 채우는 방법을 알려 줍니다.renderSidebar는 줄의 데이터로 사이드바를 채웁니다.
마지막 단계는 플러그인을 내보내는 것입니다. 설정과 방법 필드로 플러그인을 채워서 어떤 방법 이름에 반응해야 하는지 알려 줍니다.
완료되면 Thread lint 또는 npm run lint을 사용하여 응용 프로그램에 오류가 없는지 확인하고 flipper pkg pack-o

에서 응용 프로그램 패키지를 만들어 flipper에 설치할 수 있습니다.우리는 잠시 후에 플러그인 관리자를 사용하여 가방을 플러그인에 끌어다 설치할 수 있습니다.

모바일 클라이언트

비록 Flipper가 안드로이드와 iOS를 위해 본체 클라이언트를 작성할 수 있지만, 우리는 현재 React 본체 클라이언트에만 관심을 가지고 있습니다.
우선 Thread 또는 npm을 사용하여 react native flipper 플러그인을 응용 프로그램에 추가해야 합니다.플러그인에 대한 간단한 테스트에서 이 코드를 프로그램에 추가할 수 있습니다.

import {addPlugin} from 'react-native-flipper';

  const arr = [
    {id: '0', title: 'test1'},
    {id: '1', title: 'test2'},
  ];

  addPlugin({
    getId() {
      return 'test';
    },
    onConnect(connection) {
      arr.forEach((item) => {
        connection.send('testMethod', item);
      });
    },
    onDisconnect() {},
  });

이 코드는 데스크톱 플러그인에 두 가지 간단한 메시지를 보낼 것입니다.우선, 클라이언트를 등록할 수 있도록 addPlugin 방법을 가져옵니다.Add plugin은 최소한 getId 방법을 실행해야 합니다. 이 방법은 클라이언트를 식별할 수 있고, 데스크톱 프로그램을 만들 때 정의한 같은 id를 서로 식별할 수 있도록 되돌려야 합니다.
그 다음은 연결과 연결이다.프로그램이 각각 데스크톱 프로그램과 연결되거나 연결을 끊을 때 터치됩니다.onConnect에 연결이 있습니다. 이 연결을 사용하여 프로그램에 이벤트를 보내거나 받을 것입니다.이 예에서는 send method을 사용합니다. 데스크톱 프로그램을 내보낼 때 정의한 방법의 이름을 먼저 제공합니다. 이 예에서는testMethod입니다. 다음에 우리가 보내고 싶은 데이터를 포함하는 대상을 제공합니다.

결실

이 모든 것을 완성한 후에 Flipper에서 플러그인을 보아야 합니다. 플러그인을 사용하면 테이블에 두 개의 항목을 볼 수 있습니다. 그 중 하나를 누르면 대상의 상세한 정보를 보내는 사이드바가 나타날 것입니다.

마지막 생각

Flipper를 사용하면 mobile app development 모든 기능을 쉽게 할 수 있습니다.Flipper는 디버그 로그, 네트워크, 개발 도구 등 응용 프로그램에 매우 중요한 도구로 구성되어 있다.그러나 다른 플러그인을 통해 확장할 수 있어 다른 도구가 부족할 수도 있는 복잡한 용례에 무한히 적응할 수 있다.또한 원격 디버깅은 우리가 응용 프로그램을 테스트할 때 진정한 생산 준비 응용 프로그램에 더욱 가깝게 하는 좋은 보충이다.
이 안내서는 나의 경험과 내가 Flipper Docs에서 찾을 수 있는 모든 것에 근거하여 쓴 것이다.flipper 플러그인을 만드는 데 대한 자세한 정보를 찾으려면 여기를 클릭하십시오.