React-native 디버깅 과정 공유

 

React-native 에서 디버깅을 했던 과정들을 공유드립니다.

 

저는 일단 이러한 환경에서 작업을 하였습니다.

 

1. WebStorm 2022.3

2 .Xcode 14.2

3. AndroidStudio 

 

 

귀여운 무당벌레쓰

 

---

1.  React-native 자체에서 제공하는 디버깅 툴 사용

 

https://reactnative.dev/docs/debugging

Debugging Basics · React Native

 

리엑트 네이티브 개발환경에서 기본적으로 제공해주고 있습니다.

 

에뮬

1.  안드로이드 command + m

2.  IOS command + d

 

핸드폰을 연결하여 사용하였을 때

1.  기기 위아래로 흔들기

 

위 액션을 하였을 때 나오는 팝업

 

1. Reload 앱 재시동

 

2. Change Bundle Location

location 위치 변경

쓴적이 없어요

3.  Show Element Inspector / Hide Element Inspector

Touchables는 자주 쓰는듯?

- 3-1 Inspect 해당 옵션을 키고 컴포넌트 클릭 시 웹에서 많~이보던 스타일을 볼 수 있다.

- 3-2 Perf API 요청 등의 비동기 통신이 이뤄진 시간을 표시

- 3-3 Network 

- 3-4 Touchables 터치 가능한 영역을 화면에 표시

터치 가능 영역 표시

4. Fast Refresh JS 코드 변경감지시 즉시 변경 여부 설정

5. Show Perf Monitor UI FPS, JS FPS 등 사용 여부 체크 가능 IOS 환경일 시 메모리 체크 가능

6. Debug Debug 모드 진입. 설정 변경이 없을 경우 http://localhost:8081/debugger-ui/ 이동

 

console.log 을 직접 찍어서 확인 가능합니다.

debuggerMode 이용시 코드 라인에 쓰로틀을 거시고 해당 함수를 실행하시면 해당 Info가 출력됩니다.

 

안갈켜줌 ㅋㅋ

적은 기능 외에도 다른 기능들도 있지만 저 같은 경우는 보통 저 옵션들을 중심적으로 이용하였습니다.

---

위 방법만으로는 구체적인 디버깅에 문제가 생길 수 있습니다.

 

2. Flipper

영롱쓰

 

React-native 디버깅을 도와주는 툴 입니다.

 

다운로드

https://fbflipper.com/

Extensible mobile app debugger | Flipper

or

brew install --cask flipper

 

세팅방법

echo $ANDROID_HOME
# 결과 경로를 Android SDK Location 에 추가해주세요.

결과를 직접 넣어주시는걸 추천

 

세팅 후 

Network, Logs, Hermes Debugger (RN) 등 기능을 활용 할 수 있습니다.

 

또한 캐싱된 이미지 용량 체크 가능

 

Redux, React-query 등의 옵션 또한 플러그인을 설치하여 Chrome과 동일한 환경처럼 개발이 가능합니다.

React-query, Redux 같은 경우 위 글과 같이 사용해주시면 되겠습니다.

// react-query 
if (__DEV__) {
    import("react-query-native-devtools").then(({ addPlugin }) => {
        addPlugin({ queryClient });
    });
}

// redux-toolkit
// 미들웨어 설정
const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => {
        if (__DEV__) {
            const reduxFlipper = require("redux-flipper").default;
            return getDefaultMiddleware({
                serializableCheck: false
            }).concat(reduxFlipper());
        } else {
            return getDefaultMiddleware({
                serializableCheck: false
            });
        }
    }
});

 

만약 헤르메스를 사용하고 계신다면

헤르메스 디버거로 들어가시면 지금 사용하고있는 앱 내 메모리를 체크할 수 있습니다.

내 앱 메모리 체크

 

 

 

또한 react-devtools 설정을 하고 난 이후에는 렌더링 시간을 체크할 수 있는데요.

제 환경에서는 react-devtools 가 제대로 호환이 안되어서 따로 설치하여 사용하였습니다.

 

// 터미널
npm install -g react-devtools

// 설치 이후 
react-devtools

실행 직후

 

만약 react-devtools 실행 이후 아무런 응답이 없을 경우 port 문제일 가능성이 있습니다. (Android 12)

// 입력
adb reverse tcp:8097 tcp:8097

 

이후 밑과 같은 페이지가 정상 작동된다면 Profiler 사용이 가능해집니다.

녹화 이후 앱 내에서 버튼 클릭, 네비게이션 이동 등의 액션등이 전부 기록이되어
해당 앱 내에서 렌더링이 어떻게 이루어 지는지 체크 가능합니다.

 

 

---

 

참고 자료

https://velog.io/@rjc1704/React-Native-Flipper-Debugger-%EC%84%A4%EC%A0%95