Showing Posts From

Proxy로

Charles Proxy로 네트워크 버그 잡는 방법 - 초보자 가이드

Charles Proxy로 네트워크 버그 잡는 방법 - 초보자 가이드

Charles Proxy로 네트워크 버그 잡는 방법 - 초보자 가이드 Charles 처음 깔았을 때 2년 전이다. 선배가 말했다. "민수야, 이거 깔아. 네트워크 보면 버그 금방 찾아." Charles Proxy. 처음 들어봤다. 깔았다. 실행했다. 암호 같은 화면이다. 뭐가 뭔지 모르겠다. 그냥 껐다. 그때 몰랐다. 이게 내 무기가 될 줄.선배가 옆에서 보여줬다. 앱 실행하니까 Charles에 뭔가 주르륵 뜬다. "봐, 이게 다 네트워크 통신이야." 신기했다. 앱이 서버랑 뭘 주고받는지 보인다. 근데 SSL이라고 자물쇠 그림만 보인다. "이건 어떻게 봐요?" "인증서 설치해야지." 그날 3시간 걸렸다. 인증서 설치. iOS는 더 복잡했다. 프로필 신뢰, 인증서 신뢰. 두 번 해야 한다. 몰랐다. 처음 잡은 네트워크 버그 한 달 뒤였다. 결제 화면에서 "결제 실패" 팝업이 뜬다. 근데 결제는 됐다. 이상하다. 개발자한테 물었다. "로그 좀 보내줄래요?" "제 폰에선 재현이 안 되는데요." 또 시작이다. Charles 켰다. 앱 실행했다. 결제 버튼 눌렀다. 실패 팝업 떴다. Charles 봤다. POST /api/payment - 200 OK GET /api/payment/result - 504 Gateway Timeout 찾았다. 결제는 성공했다. 근데 결과 조회가 타임아웃이다. 앱은 결과 못 받아서 실패로 처리한 거다.스크린샷 찍었다. 지라에 올렸다. "결제 API는 성공, 결과 조회 API가 504" 개발자가 답했다. "아, 서버 타임아웃 설정이 짧았네요." 버그 수정됐다. 그때부터다. Charles 없으면 불안하다. SSL Proxying 설정의 함정 초보 때 자주 헤맸다. SSL Proxying Settings 메뉴. 처음엔 *:443 하나만 넣었다. 안 보이는 도메인이 많았다. 왜지? 찾아봤다. 443 포트만 캐치한다. 8443 같은 건 안 잡힌다. 그래서 지금은 이렇게 한다. : - 전부 다 근데 이것도 문제다. 필요 없는 것까지 다 잡는다. 로그가 너무 많다. 찾기 힘들다. 그래서 요즘은 도메인 지정한다. api.회사도메인.com:* 이렇게. 깔끔하다. 우리 API만 보인다. Breakpoints 기능 이거 알고 나서 세상이 바뀌었다. Breakpoints는 통신을 멈춘다. Request를 수정할 수 있다. Response도 바꿀 수 있다. 예를 들어. 사용자 정보 API가 있다. GET /api/user/profile Response는 이렇다: { "name": "홍길동", "grade": "VIP", "point": 5000 }궁금했다. grade가 "VVIP"면 어떻게 보일까? point가 음수면? 이름이 100자면?Breakpoint 설정했다. 통신이 멈췄다. Response 수정했다. grade를 "VVVVVVVIP"로 바꿨다. Execute 눌렀다. 앱 화면이 깨졌다. UI가 삐져나왔다. 버그 찾았다. 긴 텍스트 처리 안 돼 있다. 티켓 올렸다. 재현 스텝에 스크린샷 첨부했다. "Charles로 Response 조작해서 확인" 개발자가 물었다. "이거 어떻게 한 거예요?" 알려줬다. 고마워했다. Map Local로 서버 없이 테스트 배포 전날이었다. 서버가 죽었다. 점검 중이다. 근데 테스트는 해야 한다. Map Local 기능 썼다. 로컬 파일로 Response를 대체한다. 순서는 이렇다.원하는 API 우클릭 Map Local 선택 JSON 파일 경로 지정서버 없어도 테스트 가능하다. 꿀팁이다. 에러 상황도 테스트했다. error.json 파일 만들었다: { "error": "SERVER_ERROR", "message": "서버 오류입니다" }Map Local로 연결했다. 앱이 에러 처리를 제대로 하는지 확인했다. 개발자는 몰랐다. "서버 없는데 어떻게 테스트했어요?" 비법 알려줬다. Throttle Settings로 느린 네트워크 테스트 가장 많이 쓰는 기능이다. Proxy 메뉴 → Throttle Settings 여기서 네트워크 속도를 조절한다. 3G로 설정했다. 앱이 느려졌다. 로딩이 오래 걸린다. 이때 버그가 나온다.로딩 화면 없이 멈춘 것처럼 보임 중복 클릭으로 API 두 번 호출 타임아웃 처리 안 됨지하철에서 쓰는 사용자 생각했다. 느린 네트워크는 현실이다. Throttle 없이는 못 찾는다. QA가 사무실 와이파이로만 테스트하면 놓친다. 요즘은 배포 전에 꼭 한다. Throttle 켜고 전체 시나리오 한 번 더. Repeat 기능으로 부하 테스트 동시 접속 버그 있었다. 같은 API를 빠르게 여러 번 호출하면 에러. 재현하기 어려웠다. 손으로 빠르게 클릭? 불가능하다. Charles의 Repeat 기능 썼다. API 우클릭 → Repeat Advanced 설정했다. Iterations: 10번 Concurrency: 5개 동시 실행했다. 서버가 500 에러 뱉었다. 개발자 불렀다. "이것 좀 보세요." 재현 성공했다. 동시성 처리 안 돼 있었다. 트랜잭션 락 문제였다. 수정했다. 다시 Repeat 돌렸다. 이번엔 괜찮았다. Recording Settings 정리 처음엔 Recording이 계속 켜져 있었다. 브라우저 켜면 크롬 통신도 다 잡힌다. 찾기 힘들다. Recording Settings에서 조절한다. Include에 넣는다:우리 API 도메인 테스트할 도메인Exclude에 넣는다:광고 도메인 분석 도메인 (Google Analytics 등) OS 업데이트 체크깔끔해졌다. 필요한 것만 보인다. Rewrite 기능 활용 Map Local보다 간단할 때 쓴다. 특정 값만 바꾸고 싶을 때. 예시: 서버가 주는 버전 정보가 있다. { "min_version": "1.0.0" }이걸 "9.9.9"로 바꾸고 싶다. Rewrite 설정한다. Type: Modify Body Where: Response Match: min_version": "1.0.0" Replace: min_version": "9.9.9" 실행했다. 앱이 "업데이트 필요" 팝업 띄웠다. 버전 체크 로직 확인 완료. No Caching 설정 캐싱 때문에 헷갈릴 때 많다. API 수정됐는데 앱이 옛날 데이터 보여준다. Tools 메뉴 → No Caching 체크했다. Cache-Control 헤더를 조작한다. 캐시를 무효화한다. 테스트할 때 필수다. 안 그러면 "어? 왜 안 바뀌지?" 한다. 실전 팁 모음 2년 쓰면서 배운 것들. 필터 활용 Structure 탭 위에 Filter 있다. 도메인 일부만 입력해도 된다. "api" 치면 api 들어간 것만 보인다. 차트 보기 Session Overview 탭. Timeline 그래프 있다. 어느 API가 느린지 한눈에 보인다. Export 기능 Session → Export API 호출 내역을 파일로 저장한다. 개발자한테 전달할 때 쓴다. Compose 기능 API를 직접 호출한다. Postman 없어도 된다. Request 우클릭 → Compose Focus 기능 특정 도메인만 집중해서 볼 때. 우클릭 → Focus 나머지는 흐려진다. Charles 없는 QA는 상상 못 한다 지금은 출근하면 Charles부터 킨다. 습관이다. 버그 잡는 속도가 다르다. "왜 안 돼요?" 대신 "이 API가 500 에러입니다" 말한다. 개발자도 좋아한다. 재현 스텝이 명확하다. 고치기 쉽다. 신입이 들어오면 제일 먼저 알려준다. Charles 설치부터 시작한다. 처음엔 어려워한다. 나도 그랬다. 근데 한 번 맛보면 빠진다. 보이지 않던 게 보인다. 앱이 서버랑 뭘 주고받는지. 어디서 터지는지. QA한테 Charles는 X-Ray다.오늘도 Charles 켜고 버그 찾는다. 네트워크는 거짓말 안 한다.