도와줘요, 찰스(Charles)! 업무 효율 높이는 웹 디버깅 프록시 툴 사용법
아이디어스팀에 합류한지 만 1년이 되어가는 API셀 이지향입니다.
오늘은 저희의 개발 문화를 소개하며 실무에서 유용하게 사용 중인 찰스 꿀팁들을 풀어볼 테니 끝까지 스크롤을 내려주세요 🙏🏻
아이디어스팀에 합류하면 on-boarding 기간에 입사자 가이드를 공유 받습니다.
업무에 필요한 여러 계정 신청 방법, VPN 설정 방법 그리고 개발 환경 셋팅 방법 등이 정리된 위키 문서인데요. Jira, Bitbucket, Postman, Datadog 등 웬만한 툴들은 경험해 보았는데 유독 이름은 익숙하지만 낯선 툴이 하나 있었습니다.
그 이름은 바로 Charles!
(툴을 처음 접했을 당시) 왕세자 이름의 툴이라니?!
신선한 마음에 곧바로 계정을 발급받아 찰스를 켰지만 금방 다시 껐어요. 어떤 용도인지 알지 못했고, 이 툴을 알아가야겠다는 마음보다 메인 업무에 빨리 적응해야겠다는 마음이 컸기 때문이었죠.
그렇게 시간이 흘러 여러 스프린트를 진행하던 중, QA 기간마다 반복되는 API 작업 요청에 어떻게 대응하면 좋을지 고민되었습니다. 프로젝트 리더* 님께 상황을 설명드리니 proxy 아이디어를 주셨고, 셀리더* 님께 개발 조직에서 proxy를 어떻게 사용하는지 여쭤봤을 때 찰스를 말씀해 주셨어요!
미뤄왔던 숙제를 할 시간이 된 것 같은 기분이랄까요?
여기서 잠깐, 아이디어스팀의 개발 문화 엿보기 🔍
- 프로젝트 리더(PL) : 프로젝트 별로 각 파트의 개발자들이 모여요. 이 중에서 프로젝트의 개발 방향을 리드하는 PL이 정해집니다.
- 셀 리더 : 제가 속한 API셀의 테크 리더에요.
찰스를 본격적으로 알아가게 된 계기를 설명하는데 서두가 길었네요 ;)
저처럼 찰스 하면 과거 영국의 왕세자이자 현재 영국의 국왕인 분만 떠올렸던 분들을 위해 설명드리면,
Charles(찰스) 란?
웹 디버깅 프록시 툴로 디버깅을 위해 원하는 모든 네트워크의 흐름을 모니터링할 수 있고 프록시서버의 역할로 특정 네트워크의 요청과 응답을 핸들링 할 수 있습니다. 공식 홈페이지에서 다운로드할 수 있고, 30일 무료 사용기간 후에는 라이센스를 구입해야 해요.
구글링하면 많이 나오는 찰스의 설정 방법 설명은 생략하고 이 글에서는 실무에서 활용하기 좋은 몇 가지 꿀팁들을 알려드릴게요!
여기까지 긴 글 읽으신 분들에게 끝까지 힘내서 읽으실 수 있도록 박수 한 번 드립니다~
이번 스토리에서는 찰스와 핸드폰 연동이 되어있음을 가정하고 설명합니다.
꿀팁0. 프록시 설정하기
본격 꿀팁에 앞서 이 설정이 선행되어야 합니다!
프록시 설정만 잘해도 혼자서 뚝딱 많은 정보를 얻을 수 있어요.
먼저, 프록시를 설정할 호스트 정보를 등록합니다.
Proxy > SSL Proxying Settings 메뉴에서 설정하실 수 있어요.
(*버전별로 메뉴 순서의 차이가 있습니다.)
SSL Proxying 탭에서 Enable SSL Proxying 을 체크하시고 Add를 눌러 호스트명과 포트번호를 입력합니다.
이해를 돕기 위해 임의의 호스트명( *.abc.com)으로 입력하였어요! 서브도메인을 * 처리하여 abc.com 도메인으로 들어오는 모든 네트워크 통신을 허용해 주었습니다.
다음으로, 찰스 화면에서 모니터링할 호스트 정보를 등록합니다.
이번에는 Proxy > Recording Settings 메뉴에서 설정해요.
Include 탭에서 Add 를 클릭후 SSL Proxying settings 에서 등록했던 호스트정보와 같이 입력해주세요!
두 가지 설정을 마쳤으면 마지막으로 SSL Proxying 과 Recording 을 Start 합니다.
SSL Proxying 과 Recording 이 Stop 상태일 때 메뉴에는 Start ~ 로 표시되고, 아이콘은 흑백(비활성화)으로 현재 아무 동작도 안 하고 있음을 나타내요. 메뉴나 아이콘 클릭 또는 단축키 입력으로 두 가지 기능을 활성화시켜 줍니다.
이렇게 설정하면 현재 어떤 네트워크 통신이 일어나는지 모니터링할 수 있어요. 찰스에 앱을 연동하고 앱을 실행하면 어떤 API를 어느 값으로 호출하는지 알 수 있습니다. 응답 결과를 확인할 때 유용한데 특히 오류 상황을 쉽게 파악할 수 있어요. 마치 병원에서 초음파검사를 통해 어디가 문제인지 확인하는 것처럼 말이죠!
혹시 다음 이미지처럼 Path는 비어있고, 데이터가 알아볼 수 없는 문자로 보이시나요?
SSL Proxying 기능이 비활성화 상태에서 발생하는 상황으로 Recording 기능과 함께 활성화시켜주는 것 기억해 주세요 :)
꿀팁1. Status Code 변경하기
찰스의 Rewrite 기능을 이용하면 원하는 대로 Request 나 Response 데이터를 핸들링할 수 있습니다! Request Header를 수정할 수도 있고, Response Body의 일부 데이터를 변경할 수도 있죠. Rewrite의 기본 활용이라 생각하는 Http 상태 코드 변경하는 방법부터 알려드릴게요.
Tools > Rewrite 메뉴에 진입합니다.
Enable Rewrite를 체크하고 왼쪽 영역의 Add를 클릭해 주세요. 오른쪽 위 영역의 Add를 클릭해 Status Code를 변경하고 싶은 API를 입력해줍니다. 저는 임의의 Host 와 Path를 입력하였어요. 만약에 /products/1/detail , /products/2/detail 처럼 일정한 형식을 가진 EP를 테스트하고 싶다면 와일드카드를 사용해 /products/?/detail 또는 /products/*/detail로 입력하시면 됩니다.
Http 상태 코드를 변경할 때 Type 은 Response Status를 선택합니다. Match 영역의 Value에는 변경 대상이 될 상태 코드를 입력합니다. 정규식 표현을 지원해서 2xx 상태코드 전체를 치환할 수도 있어요. Replace 영역의 Value에는 변경하고 싶은 값을 입력하고 OK를 눌러 적용해 주세요.
비교를 위해 Rewrite 비활성화 상태에서 API를 호출해 봅니다. Response Code가 200으로 정상이네요.
Rewrite 를 활성화하고 다시 API를 호출하면 💣 이모지와 함께 Notes 항목이 추가로 생겼습니다.
Rewrite Tool: status changed to "500"지금까지 설정한 대로 잘 적용된 것을 노트 메시지를 통해 재확인했어요!
실무에서는 Status Code의 종류와 Response Body로 API의 예외처리를 구현하는데, 이렇게 Rewrite 기능을 이용해 간단히 테스트하실 수 있답니다.
Response Body를 일부 변경할 때는 Rewrite를 이용하고, 전체 내용을 변경하는 방법은 꿀팁3 에서 알려드릴게요 :)
꿀팁2. Request Header 변경하기
개발환경에서 Request Header를 핸들링하여 테스트해야 할 상황이 생기기도 합니다. 이 경우에도 Rewrite를 이용할 수 있어요.
Rewrite Rule 의 Type 을 Modify Header로 선택하고 Match 의 Name 에는
변경하고 싶은 Header 명을 입력해주세요.
헤더의 모든 값을 하나의 값으로 치환하고 싶은 경우, Match 의 Value 필드는 비워두고 Match whole value 를 선택합니다.
Replace의 Name은 변경을 원하지 않는다면 Math 의 Name 과 같은 값을 입력하시고, 변경을 원한다면 새로운 값으로 입력하시면 됩니다! Value에는 치환하고 싶은 값을 입력해주세요.
꿀팁1 에서 봤던 Notes가 또 있네요! 이 외에도 Rewrite를 통한 변경 내용은 Overview 탭의 Notes 필드 또는 Notes 탭으로 확인하시면 됩니다 :)
꿀팁3. json 파일로 Response Body 변경하기
꿀팁1 에서 알려드린 Status Code 변경과 함께 Response Body도 같이 변경하면 앱에서 API 오류 대응 테스트를 편하게 할 수 있습니다.
또는 API 의 Response를 변경에 앞서 side-effect 를 확인하는 용도로 이 기능을 활용할 수 있어요.
신규 API가 개발될 예정일 때 Mock 데이터를 json 파일로 클라이언트에 먼저 전달하면, 클라이언트와 백엔드 개발을 동시에 진행할 수 있는 장점이 있습니다!
Map Local 에 진입할 수 있는 방법은 3가지가 있어요.
첫 번째 방법은 메뉴바를 이용해 Tools > Map Local 에 들어갑니다. 두 번째 방법은 단축키(⌥ ⌘ L)를 이용하는 방법이에요. 이 두 가지 방법은 변경할 API를 직접 입력해야하는 번거로움이 있습니다.
세 번째 방법은 Sequence에 표시된 API 호출 목록 중 수정을 원하는 API를 선택한 후 우클릭 메뉴에서 Map Local에 들어갑니다.
우 클릭 메뉴로 진입했을 때의 장점은 Map From 필드가 자동으로 채워진다는 점이에요!
메뉴바 또는 단축키로 Map Local 메뉴에 진입한 경우에는 Enable Map Local 체크 후 Add로 매핑정보를 입력할 수 있습니다. Map From에는 호출하는 API 정보를 Map To에는 API의 응답값으로 내려줄 로컬 파일 경로를 입력합니다.
Choose 로 파일을 선택하면 편리하지만, 직접 입력하신다면 파일의 절대 경로를 입력해 주세요!
Mapped to local file: /Users/jihyang/idus/sample-data/sample-products.json잘 적용되었다면 Notes에 로컬 파일로 매핑되었다는 정보와 함께 API의 응답 결과가 로컬파일 데이터로 출력되는 것을 확인하실 수 있습니다.
꿀팁4. localhost 응답 결과로 Response Body 변경하기
개발 서버에 반영하기 이전에 로컬에서 작업한 API를 앱에서 호출하게 설정할 수도 있습니다. 앱에서 *.abc.com/products 라는 API를 호출했을 때 찰스를 통해 localhost/products 라는 API를 호출하도록 하는 기능입니다.
이를 활용하면 실제 앱에서 사용하는 Request Header 와 Query Parameter 들로 API 를 테스트할 수 있어서 보다 안정적인 API로 개발해서 배포할 수 있는 장점이 있어요!
Map Local처럼 Map Remote 에 진입하는 방법도 3가지가 있습니다.
Tools > Map Remote 방법으로 설명을 이어가도록 할게요!
설정화면은 Map Local 과 유사하지만 Map To 항목이 달라지고 체크할 항목이 하나 더 추가됨을 보실 수 있습니다. 예시 화면에서도 감을 잡으셨을 텐데요~
Map Remote의 Map To 항목에는 호출할 API 를 입력합니다. 로컬의 Docker 환경에서 실행 중인 애플리케이션을 호출할 때도 Host에 localhost로 입력하시면 돼요 :) Map From 에 입력한 origin API의 헤더값을 remote API에도 전달하려면 Preserve host in header fields를 선택해줍니다!
remote API를 localhost로 설정한다면, 꿀팁0 에 나왔던 Recording Settings 에서 Include 항목으로 http://localhost 를 추가해야 해요. 그래야 Sequence 에서 localhost 로 호출된 항목을 확인하실 수 있습니다.
Mapped from remote URL: https://sample.abc.com/productsMap Remote 가 정상 동작하면 Notes 에서 위와 같은 메시지를 볼 수 있어요!
여기까지 읽고 계신 여러분을 위해 소소한 ✨보너스 팁도 알려드립니다. 찰스가 잘 안되신다면 체크해 보세요 ✅
찰스와 앱을 연결해서 사무실에서는 잘 사용했는데, 재택 할 때는 접속이 안돼요!
- Wi-Fi 네트워크 대역이 변경됐을 때 발생하는 상황입니다. 앱에 설치한 프로파일을 삭제 후, 재 설치해 보세요!
cURL error 60: SSL certificate problem: self signed certificate in certificate chain 에러가 발생해요!
- Proxy > macOs Proxy 체크를 해제하세요!
- 해당 설정이 체크되어 있으면, 연결된 Wi-Fi 의 프록시 메뉴에서 웹 프록시 와 보안 웹 프록시 가 활성화됩니다.
더 많은 분들이 찰스를 유용하게 업무에 이용하실 수 있도록 실무에서 활용하고 있는 꿀팁들로 정리해 봤는데요 조금이나마 도움이 되셨기를 바랍니다 😉
여러분들의 찰스 활용법도 댓글로 공유해 주시면 좋을 것 같아요!
Written by idus API Cell
Content writer
Jihyang Lee아이디어스팀과 함께 할 테크인재를 영입 중입니다.
지금 여기에서 지원해 보세요!
