1. Flipper란?
2. QA팀에게 소개하는 이유
2-1. 원인 파악이 빨라진다.
2-2. 데이터를 조작할 수 있다.
3. 설치
4. 설정
5. 사용법
6. Mocking이 안 되는 3가지 이유
6-1. Interceptor 인자
6-2. addNetworkInterceptor
6-3. path 중복
1. Flipper란?
Flipper는 iOS, Android, React Native를 디버깅하는 도구이다.
서버 응답 값을 간편하게 확인할 수 있고
백엔드의 도움이 없이 응답 값을 조작할 수 있다.
원래는 안드로이드 스튜디오에서 제공하는 App Inspection을 사용했으나
Flipper가 더 가볍고 기능이 많아 난 요즘 이것만 사용하는 중이다.
Flipper는 앱 개발자뿐만 아니라 QA분들에게도 꽤나 유용해서
사내에 공유하려고 자료를 준비했고, 이 포스팅은 그 내용을 일부 수정한 것이다.
2. QA팀에게 소개하는 이유
2-1. 원인 파악이 빨라진다.
👩🏻🦰: 주환님 알림함 목록이 안 뜨는데 확인 좀 해주세요.
👦🏻: 넵 확인해보겠습니다!
…
👦🏻: 어 이거 서버에서 응답값이 이상하게 내려오네요. 재석님한테 확인 요청 드릴게요!
QA ↔️ 백엔드 이렇게 소통하면 될 일이
QA ➡️ 클라이언트 ➡️ 백엔드 ➡️ QA 순서로 소통을 하게 되는 일이 이따금 생기곤 한다.
클라이언트 문제인지 백엔드 문제인지 몰라서 원인을 파악하는 데 시간이 낭비되는 것이다.
그때! Flipper를 사용하면 개발자들을 심판대로 올리기가 아주 쉬워진다.
QA도 디버깅하기가 쉬워지기 때문이다.
2-2. 데이터를 조작할 수 있다.
👩🏻🦰: 재석님~ 플래티늄 카드 테스트하게 제 카드 클래식으로 좀 바꿔주세요!
👱♂️: 네 바꿔드렸습니다!
(5분 뒤)
👩🏻🦰: 재석님 한 번만 더..!
👱♂️: 네 바꿨습니다.
(5분 뒤)
👩🏻🦰: 재석님..!
👱♂️: 네 바꿨어요.
(5분 뒤)
👩🏻🦰: 재석님 정말 죄송하지만..
👱♂️:
👩🏻🦰: 재석님?
👩🏻🦰: 어디 계신가요 재석님?
개발 혹은 QA를 하다 보면 상태를 자주 변경해 가며 테스트해야 할 때가 있다.
그때마다 백엔드에 매번 부탁하기도 뭐하고
바쁘거나 회의 중이시면 우리의 일도 그만큼 딜레이 되곤 한다.
이때 Flipper를 사용하면 백엔드 도움 없이 데이터를 변경할 수 있다.
그리고 실제 DB를 건드리는 것이 아니므로 안전하다!
3. 설치
Flipper를 사용하기 위해서는 안드로이드 스튜디오가 설치되어 있어야 한다.
포스팅 주제에서 벗어나므로 이 포스팅에서는 Flipper 설치 방법만 다루려고 한다.
Flipper 웹 사이트로 들어가 다운로드 후 파일을 실행한다.
프로그램을 실행하면 설정 마법사 창이 뜬다.
어떤 개발 환경을 사용할 건지 선택하면 된다.
Flipper 사용 전에 필요한 것들을 체크하는 단계이다.
체크표시가 되어있지 않는 게 있다면 설치해 주면 된다.
만약 OpenSSL이 설치되어 있지 않다면 여기를 참고하자.
PWA로 설치해 볼래?를 묻고 있다.
쉽게 말하면 우리가 흔히 윈도우나 맥에 설치하는 프로그램 개념이 아니라
프로그램을 설치하지 않고도 브라우저를 통해 Flipper를 사용할 수 있는데 그렇게 할래?라는 뜻이다.
Please라고 까지 하는데 웬만하면 그냥 설치해 주자.
4. 설정
이번 목차는 앱 개발자가 아니면 넘겨도 된다.
Flipper를 사용하기 위해 프로젝트에서 설정해주어야 하는 것이 몇 개 있다.
debugImplementation("com.facebook.flipper:flipper:0.200.0")
debugImplementation("com.facebook.soloader:soloader:0.10.4")
releaseImplementation("com.facebook.flipper:flipper-noop:0.200.0")
debugImplementation("com.facebook.flipper:flipper-network-plugin:0.200.0")우선 의존성을 추가해 주자.
버전 정보는 Flipper Repository를 확인.
debug 모드에서만 의존성이 추가되도록 debugImplementation을 사용해 주자.
releaseImplementation으로 추가한 것도 있는데 저 flipper-noop은 릴리즈 모드에서 디버깅 관련 코드가 빌드에 포함되지 않도록 한다.
@HiltAndroidApp
class XXXApplication : Application() {
@Inject
lateinit var flipperNetworkPlugin: NetworkFlipperPlugin
override fun onCreate() {
super.onCreate()
setDebugTool()
}
private fun setDebugTool() {
SoLoader.init(this, false)
if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)) {
val client = AndroidFlipperClient.getInstance(this)
client.addPlugin(InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()))
client.addPlugin(
InspectorFlipperPlugin(
applicationContext,
DescriptorMapping.withDefaults(),
),
)
// Flipper에서 SharedPreference 값 확인하기 위해 추가
client.addPlugin(SharedPreferencesFlipperPlugin(this, "app-settings.json"))
client.addPlugin(flipperNetworkPlugin)
client.start()
}
}
}Application에서는 위와 같이 코드를 추가해 주고
@Singleton
@Provides
fun provideAuthOkHttpClient(
...
flipperPlugin: NetworkFlipperPlugin,
): OkHttpClient {
...
return OkHttpClient.Builder()
...
// Flipper interceptor를 추가한다.
// 생성자 인자로 넘기는 boolean값을 true로 주어야 mocking을 할 수 있다.
.addInterceptor(FlipperOkhttpInterceptor(flipperPlugin, true))
.build()
}그리고 Flipper Interceptor를 추가해 준다.
이때 주의할 점은 두 번째 인자로 boolean 값을 넘기는데
true로 주어야 flipper에서 mocking을 할 수 있다!
이렇게만 하면 프로젝트에서 할 설정은 끝!
5. 사용법
5-1. 범인 찾기
이번 목차에서는 Flipper 화면에 있는 정보들을 설명할 건데
비 개발자분들이 이 글을 볼 수도 있기에 쉬운 것도 다 설명을 달아두려 한다.
1. Flipper로 네트워크 통신, 로컬 저장소, 네비게이션 등 다양한 걸 볼 수 있다. 이번 목차에서는 네트워크 탭 중심으로 설명할 예정이다.
2. 네트워크 목록이다. 색상별로 의미는 다음과 같다.
- 검은색: 정상
- 빨간색: 비정상
- 노란색: mock (mock에 대해서는 다음 목차에서 설명)
- 보라색 배경: 현재 선택한 api
3. status 숫자를 보고 상태를 알 수 있다.
- 200: 정상
- 4xx: 400번대 에러는 클라이언트 문제
- 5xx: 500번대 에러는 서버 문제
4. Response Body에서는 실제로 서버가 어떤 응답값을 주었는지 확인할 수 있다.
자 이제 한 번 해석을 해보자.
위 스크린샷을 보면 맨 아래에 있는 api가 빨갛게 표시되고 있다.
그리고 status가 404번이다.
즉, "클라이언트 쪽 문제로 동작하지 않는 api가 있구나!"를 알 수 있는 것이다.
QA팀에서 "이런 이런 api에서 404 에러가 떨어지니 확인해 주세요!"라고 해준다면
앱 개발자가 더욱 빠르게 대응할 수 있다는 것이다.
5-2. 데이터 조작
Mock이란 가짜를 의미한다.
Mock 데이터를 만든다(= 가짜 데이터를 만든다, 데이터를 조작한다)
이번엔 백엔드 도움 없이 가짜 데이터를 만들어 테스트를 해보려고 한다.
조작하고 싶은 api를 클릭한 뒤 우측 상단의 mock 버튼 클릭!
그러면 이런 창이 뜬다.
Copy Selected Calls를 클릭!
짜잔! 버튼 딸깍 하나로 가짜 데이터를 만들었다. (path 옆에 체크표시가 되어있어야 한다)
이제 여기서 원하는 데이터를 마음대로 수정하면 된다.
나는 title을 변경해 보았다. 어려울 것 없이 그냥 텍스트만 변경하면 된다.
이렇게 하면 창을 닫을 필요도 없이 앱에 들어가면 내가 만든 가짜 데이터를 응답으로 받아 동작한다.
6. Mocking이 안 되는 3가지 이유
Flipper를 사용하면서 Mock이 안 되는 경험을 여러 번 했었는데
그때마다 원인과 해결책을 찾느라 고생을 좀 했다.
인터넷에 나와 있는 정보가 많이 없어서 공유를 좀 해보려 한다.
6-1. Interceptor 인자
[목차 4]에서 언급했지만 Flipper Interceptor의 인자로 true를 줘야 한다.
만약 false로 준다면 위 스크린샷처럼 Mock 버튼이 사라진다.
6-2. addNetworkInterceptor
// 잘못된 예시
.addNetworkInterceptor(FlipperOkhttpInterceptor(flipperPlugin, true))
// 올바른 예시
.addInterceptor(FlipperOkhttpInterceptor(flipperPlugin, true))
Interceptor를 추가할 때 addNetworkInterceptor를 사용하면
디버깅까지는 되는데 Mock을 하면
FlipperOkHttpInterceptor mock: must call proceed() exactly once 에러가 뜨며 앱이 그대로 죽어버린다.
이와 관련해서 Flipper Repository Issue - 2276번에 올라온 것이 있다.
6-3. path 중복
앱에서 사용하는 api가 이렇게 4개 있다고 치자
이때 만약 내가 api-url.com/settings를 mocking 하면
저 api 4개가 모두 mocking이 되어버린다.
즉, 원하지 않는 결과가 나와버린다.
mocking할 path를 start()로 찾아야 하는데
Flipper 내부 로직이 contains()로 되어있다.
이와 관련해서 Flipper Repository Issue-4161번에 올라온 것이 있다.
댓글을 읽어보면 의도된 것이라는데 내 영어가 짧아서인지 당최 이게 왜 의도된 것인지 잘 모르겠다. 끙
아무튼 그래서 이런 경우는 어떻게 해결해야 하느냐?
테스트할 때만 잠시 path 중간에 임의의 값을 넣으면 해결할 수 있다.
api-url.com/test/settings 이런 식으로 말이다.
그다지 좋은 방법은 아니지만 어쩌겠나...
💡 느낀 점
- Flipper 없는 시절로 돌아가고 싶지 않아... 이젠 개발할 때 필수 툴이 되어버렸다.
- 나는 개인적으로 Flipper를 도입하고 개발 효율이 크게 증가했다. iOS, QA 팀한테 공유하려고 하는데 효과가 있었으면 좋겠다.
- Flipper처럼 팀 내에 도움 되는 플러그인 개발을 하는 것도 재밌겠다는 생각이 들었다.
📘 참고한 자료
'오늘은 뭘 배울까? > etc' 카테고리의 다른 글
| Teachable Machine의 개념과 사용법 (5) | 2022.06.23 |
|---|---|
| Get과 Post의 차이가 무엇인가요? (4) | 2022.06.21 |
| 맥린이가 알려주는 맥 사용법 및 설정 (6) | 2021.05.03 |
| [Heroku] 헤로쿠 가입/설치/사용법 with 파이썬 (8) | 2021.02.13 |
| 자바로 셀레니움(Selenium)을 써보자 :: 크롤링 (6) | 2020.12.25 |
댓글