API 해체분석기 소개

소개

API 해체분석기는 API 응답을 기록하고 분석하는 도구입니다.

인기 게임 리그 오브 레전드 (LOL)의 미니언 해체 분석기에서 따왔습니다.

TODO: 링크 연결

---

제작 배경

회사 팀원분과 얘기를 하다가 개발자 도구를 보면서 뭔가를 하고 있었는데,
굉장히 많은 양의 데이터 중에서 특정한 key의 값을 모아서 봐야했습니다.
그리고 다시 잘못된 값을 수정해서 다시 API를 쏴야하는 상황이었죠.

하지만 할 수 있는거라고는 개발자도구에서 복사해서 IDE로 옮긴 다음,
검색기능으로 하나하나 살펴보는 것 뿐이었습니다.

그러고보니 저도 개발자도구를 사용하면서 불편한 점이 있었습니다.
조건에 맞는 API를 찾아서, 열어서, 뜯어서, 값을 찾아서 확인을 해야 했죠.

이러한 문제점을 해결하기위해 API 해체 분석기를 만들었습니다.

---

주요 기능 및 사용 방법

응답을 기록할 API 등록하기

새 API 추가 버튼을 누르면 추가 화면으로 넘어가며,
화면에 표시될 이름과 URL 패턴을 입력합니다.

새 API 추가 화면

URL 패턴은 Regex가 아닌 문자열이며,
전체 경로가 아닌 일부만 충족해도 API를 잡아냅니다.

예시:

목표 API: https://www.naver.com/search?keyword=abcd
URL 패턴1: naver.com (O)
URL 패턴3: r.com/search (O)
URL 패턴3: *naver.com/search* (X)

---

응답 Inbox 열어보기

등록해둔 API 패턴에 일치하는 API가 호출되면
API Response가 Inbox에 등록됩니다.

사이드바의 Inbox 목록들

우측 상단에서 Inbox 탭을 눌러 목록을 조회하세요.

---

응답 내용 살펴보기

Inbox 목록에서 내용을 보고 싶은 항목을 클릭하면
API의 응답값을 볼 수 있습니다.

JSON 에디터에서 수정 버튼으로 값을 수정할 수 있습니다.
단, 다른 API 응답 화면으로 이동하거나, 새 API 추가 화면 등
다른 화면으로 이동하면 변경사항을 초기화됩니다.

---

모아보기

API 응답을 보는 화면에서 검색창에 키워드를 입력하고 검색하면
모아보기 화면으로 이동하며, 접혀있는 검색 결과를 클릭하여 상세 내용을 볼 수 있습니다.

API 응답 화면과 마찬가지로 값을 수정할 수 있습니다. 
뒤로가기 아이콘을 눌러 이전 화면으로 돌아가도,
수정한 JSON 변경사항은 여전히 적용됩니다.

---

클립보드로 복사

API 응답 화면에서 모아보기 버튼 옆의 클립보드 아이콘을 누르면
API 응답이 클립보드로 복사됩니다.

API 응답 화면이나 모아보기 화면에서 수정한 값도
적용되어 클립보드로 복사됩니다.

---

개발 내용

API 해체 응답기 개발 내용