API 해체 응답기 개발 내용

프로젝트 소개

API 해체분석기 소개

---

개발 스택

Typescript: 정적 타입 언어 사용 (JS 답답해서 못 씀)
React: 컴포넌트 기반 구현 (JQuery 답답해서 못 씀)
Webpack: TS 트랜스파일 및 React 컴파일
Chrome API: Chrome 내부 기능 사용
Jotai: Atomic 컨셉의 상태 관리 라이브러리

Eslint: 문법 및 오타 체크
Prettier: 컨벤션 자동 수정
Watch: 파일 변화 감지하여 자동 빌드에 사용

---

구조

Service Worker

사용자가 등록한 API에 따라 API 호출을 감지하여
Inbox에 데이터를 삽입하거나,

사용자 페이지에서 API 설정 변경이 있을 때
이벤트를 받아 처리하는 로직이 포함되어있다.

---

Chrome Extension Storage

크롬 익스텐션에서 제공하는 storage 서비스이며,
localStorage와 달리 모든 페이지에서 접근 가능하다.

inbox: 응답 목록
apis: 저장할 API에 대한 설정 목록
apiIndex: api에 고유 index를 부여하기 위한 카운터

---

Jotai Store

Atomic 컨셉의 상태관리 라이브러리 Jotai의 관리 단위.

inbox: 응답 목록. Chrome Storage의 내용과 싱크
apis: API 설정 목록. Chrome Storage의 내용과 싱크
apiIndex: API id 부여를 위한 카운터. Chrome Storage의 내용과 싱크

bodyMode: body의 모드. 현재 모드를 파악하여 Body를 렌더
bodyContent: Body에서 표시할 내용을 관리
currentTab: 현재 탭. API 목록 / Inbox 목록

---

Hooks

React Hook을 모아놓은 폴더

useStorage: 프로젝트 구조 상, chorme Extension과 사용자 페이지, Service worker 간의 싱크가 맞아야 함.
관련 로직을 처리하는 훅.

useBody: bodyMode와 bodyContent를 관리.

useTab: currentTab을 관리

---

Components

컴포넌트 단위로 페이지를 구현

Sidebar: 사이드바
Body: 본문 영역. bodyMode에 따라 다른 컴포넌트를 render

---

회고

Jotai를 적극적으로 사용해본 프로젝트.
하지만 너무 Atomic하게 사용한건지 사용이 복잡했다.

특히 value를 관리하는 것이지, 로직이 관리되는 것이 아니기 때문에
useContext의 부재가 뼈져리게 느껴졌다.

결국 Hook을 이용해서 로직을 정리하였으나,
이럴거면 그냥 Context를 쓰는게 낫지 않나 생각이 들었다.

---

프로젝트를 설정하면서 Chrome Extension을 매번 설정하는게 복잡해서,
템플릿을 만들어버렸다. 껄껄.

GitHub - ImInnocent/chrome-extension-template: 크롬 익스텐션 + Typescript + React + Webpack 템플릿

추가로 eslint나 prettier, watch 설정도 해야하는데
이건 브랜치로 따서 분리하는게 나을 것 같다.

---

개발 과정에서 chat GPT를 적극 활용했다.
특히 자료가 많지 않은 Chrome Extension을 개발할 때 도움이 되었다.

하지만 한계도 명확했다.
chat GPT가 항상 정확한 답변을 내는 것은 아니므로,
내가 로직을 보고 문제점을 스스로 파악할 수 있어야 했다.

결국 로직을 이해하고 파라미터를 파악하는 용도로 주로 이용한 것 같다.