react-native-debugger + redux-devtools (feat. react-native-debugger-open)
안녕하세요!
주니어 개발자 (이제 11개월차이므로 더이상 신입이라고 할 수 없군요.. 😭) 한유덕입니다.
저는 그 동안 외주 업체에서 만든 스프링 프레임워크 프로젝트를 유지보수하느라 앱 작업을 많이 하지 못했었어요. 미국에 있는 시니어 앱 개발자가 이해하지 못하는 한국어 문구들을 번역해서 전달해주는 것이 거의 전부였습니다.
그러나 이제 해당 스프링 프레임워크 프로젝트를 조금 지연해도 되는 상황이 오면서, 다시 앱 개발에 착수하게 되었는데요. 제일 큰 문제는 앱에서 일어나는 데이터의 흐름을 알 수가 없다는 것이었습니다. 그래서 어떻게해야하는지 막막했는데, 하나하나 살펴보기 위해 디버거를 사용하면 될 것 같더라고요!
그래서 이번 포스팅에서는 제가 구성한 react-native 디버깅 환경을 공유해보려고 합니다. 그리 어렵지 않으니, 가볍게 읽으면서 따라와 주세요! ㅎㅎㅎ
1. React-native-debugger 설치 및 실행
react-native-debugger는 순수 크롬 개발자 도구에서 디버깅을 하시지 않는다면 대부분의 리액트 네이티브 개발자분들이 애용하는 라이브러리일 겁니다.
그럼 한 번 설치해볼까요?
터미널을 열고, root 경로에서 다음 명령어를 실행합니다.
brew update && brew cask install react-native-debugger그럼 자동으로 react-native-debugger가 설치가 되는데요. 설치가 된 react-native-debugger를 어플리케이션 폴더로 이동시켜야합니다. (Mac OS 기준입니다! )
mv /usr/local/Caskroom/react-native-debugger ~/Applications그럼 이렇게 react-native-debugger가 어플리케이션에 보이는 걸 확인할 수 있어요!
이 react-native-debugger를 실행하시면 아래와 같이 실행됩니다.
위의 그림에서 저희는 3가지 섹션을 볼 수 있어요.
먼저 왼쪽 위의 화면은 react-devtools의 부분입니다.
그 아래에 있는 화면은 chrome 개발자 도구의 elements 탭입니다.
그리고 오른쪽 화면은 chrome 개발자 도구의 console 탭이 기본으로 보이고, 다른 탭들을 선택할 수 있어요.
저희가 필요한 화면을 한 곳에서 볼 수 있게 해주는 거죠! 굉장하죠?? 이런 도구가 있는데 안 쓰면 바보입니다 ㅎㅎㅎㅎ
이렇게 react-native-debugger가 성공적으로 실행이 되었다면, 앱 프로젝트를 reload해주시고 command+D 를 눌러서 개발자도구에서 Debug JS remotely 버튼을 클릭해주세요. 그러면 자동으로 아래와 같이 왼쪽 하단 elements 섹션과 오른쪽 console 섹션이 활성화됩니다!
그런데 왼쪽 상단 섹션은 아무것도 나오지 않죠? 모바일 앱 프로젝트에 redux-devtools가 제대로 적용되어있지 않기 때문입니다. 그러면 이제 redux-devtools를 한 번 적용해볼까요?
2. Redux-devtools 설치 및 적용
저희는 위의 방법대로 한 번 해볼거에요!
먼저 터미널에서 모바일 앱 프로젝트 내의 경로로 이동하여 redux-devtools 패키지를 설치합니다.
NPM을 사용하신다면,
npm install --save-dev redux-devtools-extension Yarn을 사용하신다면,
yarn add redux-devtools-extension으로 설치하시면 되겠죵?
이제 앱 프로젝트 내의 Store 설정 파일을 찾아갑니다! 그리고 import { composeWithDevTools } from ‘redux-devtools-extension’; 를 추가해서 redux-detools 패키지를 import해주세요.
store.js
...
import { composeWithDevTools } from 'redux-devtools-extension';
...그 다음, store를 생성하는 createStore()메서드를 찾아가 applyMiddleware 메서드를 다음과 같이 composeWithDevTools 메서드로 감싸줍니다.
//Before
const store = createStore(
reducer,
applyMiddleware(...middleware),
// other store enhancers if any
);//After
const store = createStore(
reducer,
composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
)
);
이제 다시 앱을 reload 해 볼까요?! 그리고 react-native-debugger 화면을 다시 보면?!
이렇게 redux-devtools 화면도 활성화된 것을 볼 수 있습니다.
redux의 data 변화를 볼 때는 크롬 개발자도구보다는 redux-devtools가 훨씬 편하더라고요. diff를 한 눈에 볼 있거든요!
3. 개발자 도구를 react-native-debugger로 여는 react-native-debugger-open
그러나 아직 시뮬레이터나 에뮬레이터에서 디버깅을 허용할 때마다 react-native-debugger가 아닌 크롬 개발자도구가 기본으로 실행되는 상황입니다. 따라서 디버깅을 허용하면 react-native-debugger가 기본으로 실행되도록 위의 라이브러리를 적용해볼게요.
먼저 프로젝트 내의 경로로 가서 react-native-debugger-open 라이브러리를 설치합니다.
$ npm i --save-dev react-native-debugger-openor
$ yarn add react-native-debugger-open --save-dev그 다음 package.json 파일에 다음의 코드를 추가합니다.
"scripts": {
"postinstall": "rndebugger-open"
}그 다음 위의 스크립트 명령어를 실행합니다.
$ npm run postinatllor
$ yarn postinstall아래와 같이 변경되었다는 문구가 터미널에 보이면 성공!
이제 react native 프로젝트를 다시 빌드한 후 Debug JS remotely 버튼을 클릭하면 react-native-debugger가 자동으로 실행됩니다! 👏🏻👏🏻👏🏻
글을 마치며
자, 어떤가요? 그리 어려운 부분은 없었죠? 차근차근 따라하신다면 모든 분들이 react-native 디버깅을 하실 수 있을것이라고 생각합니다. 리액트 네이티브 개발을 잘하게 되는 그날까지 같이 화이팅해요! 💪🏻
다음에는 더 유용한, 혹은 재밌는 포스팅으로 돌아오도록 하겠습니다!
긴 글 읽어 주셔서 감사합니다! 🙏🏻
만약 위의 내용에 대해 이해가 되지 않는 부분이 있으시거나 수정해야할 부분을 발견하셨다면 주저없이 댓글 남겨주시면 감사하겠습니다!
