Project: 온 세상이 주식이야 - Chrome Extension 마무리

*주의!* 2025년 1월 말부터 시작했던 Project 온 세상이 주식이야 관련 포스팅입니다. 아래의 순서대로 진행될 예정입니다.

• Outro
• Chrome Extension 마무리
• 기타 Frontend 및 Spring Backend 개발
• LLM Application - LangGraph 전환 및 API 구현
• 회고

마지막 Chrome Extension 관련 포스팅은 아래의 링크에서 확인할 수 있다.
Project: 온세 세상이 주식이야 - Chrome Extension 개발 Intro & MVP

Project: 온 세상이 주식이야 - Chrome Extension 개발 Intro & MVP

 
그리고 아래의 실수를 저질렀다.

문제상황: TypeScript 굳이?

분명 이전에도 과거를 돌아보며 그거 '아니야! 틀렸어!' 하고 외친 적이 있었는데 이번에도 똑같이 과거에게 외치고 싶었다.
물론 이런게 싸이면 싸일수록 성장하고 뭐 그런 거겠지만 뭔가 미리 알았으면 더 좋았을 텐데 하는 아쉬움은 어쩔 수 없다.
 
TypeScript를 처음에 사용하지 않으려고 했던 이유는 정말로 간단하다. 구현하기로한 기능들이 단순했기 때문에 큰 문제가 없다고 생각했다. 하지만 이건 Backend 개발과 AI/LLM Application 개발만 해왔던 나의 큰 착각이었다. 
 
실제로 Chrome Extension이 할 기능들은 아래와 같다.

• 사용자의 화면 데이터 수집 및 생성 요청 및 반환 결과 표시
• 반환 결과 저장 및 비인증 사용자에 대한 인증 진행 후 저장

처음에는 간단한 데이터 수집 및 생성요청만이 유일한 기능이었지만  FastAPI LLM Application 서버와 Spring Backend 서버와의 통신이 필요하고 동시에 인증인가 유무 확인과 진행까지 담당해야 한다는 점에서 확장성이 중요해졌다.
 
그래서 안정적인 Type 관리 및 Error 처리가 중요했졌다. 그리고 새로운 Tool 사용을 대비한 확장성까지 고려야 됐기 때문에 TypeScript 도입은 어떻게 보면 당연한 순서였다. 그래서 TypeScript를 도입함과 동시에 React 기반으로 Vite를 활용하여 Chrome Extension을 구현을 진행했다. 
 
React와 Vite 사용이 가능한 이유는 결론적으로 Chrome Etenstion을 구성하기 위한 핵심 부분은 manifest.json이기 때문에 manifest.json 설정과 dist 디렉터리 생성에만 주의하면 일반적인 React 프로젝트처럼 Chrome Extension을 구현할 수 있었다.
 
특히, TypeScript + React를 도입한 시점부터 components, services 그리고 styles 분활이 가능하게 돼서 개발편의성이 증가함과 동시에 유지관리가 쉬워졌다. 그리고 이러한 점들이 Chrome Extension의 확장성을 높이는 요소가 됐다. 
 
그래서 아래와 같은 구조로 Chrome Extension이 수정됐다.

JavaScript	TypeScript + React + Vite
ai-stock-extension ├── background.js ├── content.js ├── mainfest.json ├── package-lock.json ├── package.json ├── popup.html ├── popup.js └── style.css	ai-stock-extension-v1/ ├── dist/ └── src/       ├── assets/       ├── components/       ├── services/       ├── styles/       ├── App.css       ├── App.tsx       ├── background.ts       ├── index.css       └── main.tsx

 
그래서 최종적인 결과는 아래와 같다.
왼쪽이 초기 MVP 버젼 오른쪽이 최종버전이다.

 

• Refresh 버튼: 화면전환이 적용이 안 된 경우 화면의 내용을 다시 가져오는 역할을 한다.
• 온 세상이 주식이야! 버튼
  • 저장하기 - 사진에는 없으나 저장하기 버튼이 있고 인증되지 않은 사용자의 경우 Social Login 진행
• 테스트케이스 저장하기 버튼
  • 부하테스트를 진행하기 위한 테스트케이스 수집 버튼

이렇게 Chrome Extension 개발이 마무리 됐다. React+Vite를 기반으로 Chrome Extension이 고도화될 수 있다는 사실과 Frontend의 Client 구성에 있어 확장성과 수정을 고려한 Project 구조의 구성단위 분할에 중요성을 확인하게 됐고 이를 바탕으로 Web client의 Frontend 구성에 적용했다.
 
구체적인 Chrome Extension 개발 코드는 아래의 링크에서 확인할 수 있다.
Github 저장소: jwywoo/SAE-Chrome-Dev

GitHub - jwywoo/SAE-Chrome-Dev

 

 
다음 포스팅에서는 기타 Frontend 및 Spring Backend 개발 관련 내용을 정리할 예정이다.
 
감사합니다!