Flipper는 iOS Android React-Native 에서 사용할수 있는 디버깅툴입니다. React-Native에서 디버그는 다소 시간이 걸리고 귀찮은 일인데요 이 도구를 사용한다면 비교적 쉽게 앱을 디버깅 할 수 있습니다. 여기서는 Flipper를 사용해서 React Native를 편하게 개발할 수 있는 방법에 대해서 알아보겠습니다
React Native 0.62가릴리즈 되었습니다(2020.03.27.).React-Native 0.62부터는 플리퍼를 기본적으로 사용할 수 있도록 설정이 모두 되어 있으니 공식홈페이지에서 Desktop App을 설치 하시기만 하면 됩니다 👍
설치링크: https://fbflipper.com
혹시 0.62버전 미만에서 Flipper를 사용하시기 원한다면 공식문서 설치 방법을 참고해서 설정을 완료해주세요
플리퍼를 사용하면 더이상 log를 크롬 디버그 창에서 확인 하지 않아도 됩니다.
React.useEffect(() => {
console.log("이제 더이상 로그를 크롬 디버그창에서 확인하지 않아도 됩니다!");
}, []);
위 사진에서 확인한 것처럼 디버그 모드를 켜지 않더라고 바로 React Native
섹션 아래 Logs
에서 로그를 확인할 수 있습니다. 자바스크립트에서 찍은 로그만 확인하기 위해서는 Tag를 client_log
로 선택하시면 됩니다
플리퍼 섹션아래 Network
플러그인을 확인하면 서버와의 통신도 쉽게 할 수 있습니다 다음 api를 테스트용으로 호출 해보겠습니다
https://yts.mx/api/v2/list_movies.json?limit=10&minimum_rating=8.5`
React.useEffect(() => {
fetch("https://yts.mx/api/v2/list_movies.json?limit=10&minimum_rating=8.5")
.then((res) => res.json())
.then((result) => console.log(result));
}, []);
플리퍼에서는 위 사진처럼 내가 호출한 URL을 클릭하면 쿼리스트링
, 리스폰스 헤더
, 리스폰스 바디
정보를 아주 보기 편하게 보여줍니다.
깔끔한 Response body
React Native에서는 이미 다음처럼 show inspector
라는 기능을 통해서 레이아웃을 확인할 수 있는 기능을 제공해주고 있었습니다
자세한 뷰의 스펙을 확인하기에는 좋았지만 웹에서 사용하는 css 처럼 실시간으로 값을 바꿔가면서 바뀐 UI를 수정할 수는 없었는데요 플리퍼의 Layout
플러그인을 사용하면 어느정도 이 답답함을 해결 할 수 있습니다
플리퍼라는 도구 자체가 출시된지 그리 오래되지 않았고, React Native를 아직 완벽하게 지원하지 못하기 때문에 여기저기 아쉬운점도 많이 보입니다.
더 이상 느린 크롬 디버그창을 보지 않아도 되는건 일단 저에게 가장 큰 행복인 것 같습니다. 하지만 리덕스를 활발하게 써야 한다면 Redux devtools 을 켜기 위해서 어쩔 수 없이 debug모드를 켜야겠네요..ㅠㅠ(빨리 플러그인이 나왔으면 좋겠습니다) 추가적으로 네트워크(통신) 상태를 자세하게 볼수 있는 Network 플러그인은 정말 유용하게 사용 할 수 있겠네요. 아직까지 실제로 사용해보지 않아 무슨 불편함이 더 나올지는 모르겠지만, 플리퍼는 React Native 개발자들에게 정말 유용한 도구가 되리라 생각합니다 👍
redux devtools가 연동이 안돼서 불편했는데 다시 알아보니(05.24) 역시 많이 쓰이는 도구인만큼 빠르게 제작이 되었네요. 먼저 플리퍼 앱을 최신버전으로 설치 해주셔야 합니다 (현재 버전은 0.43.0) 그리고 다음 레포지토리를 참고합니다. redux-flipper 문서를 잘 읽고 필수 패키지를 모두 설치하면 아래의 패키지들이 설치 됩니다.
"react-native-flipper": "^0.39.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-flipper": "^1.1.0"
그리고 리덕스 inspector가 잘 동작하는지 보기 위해 counter
예제프로젝트를 만들어서 확인해 보겠습니다
스토어의 상태 변화 그리고 dispatch 되는 액션이 잘 보이네요