https://github.com/lizyeseul/ridi-recap/commit/3ea0cdd1d5afbe829a3e1c7b506b3c04a9e3d8a3
260111 개발환경 해결 · lizyeseul/ridi-recap@3ea0cdd
github.com
거의 5개월만에 해결한거같은데...
개발환경 전용으로 proxy서버 역할해줄 확장앱 + vite 로컬 서버 구조로 해결했음
아래는 문제해결방식
1. 최초 개발환경
react 파일 구조에서 babel 빌드만 돌려서 확장앱 업로드
문제: 라이브러리 의존성 관리 불가(min.js 파일을 일일이 다운받아서 lib 폴더 밑에 두고 import하는 방식으로 사용)
2. vite빌드로 변경
1번환경에서 소스만 옮기니까 사용가능한 react 문법이 뭔가 틀어져서 동작이 안 됨 > 다 변경함
manifest도 뭔가 아다리 안 맞아서 계속 변경함
3. 로컬서버와 확장앱 구동 환경 다름
npm run으로 로컬서버로 실행할 경우: 요청호스트가 로컬이라서 리디에 정보 호출이 불가능함(CORS에러도 있음), 세션을 못 가져옴
확장앱에서 개발할 경우: 수정한 소스 실시간 반영 어려움, react developer tools가 리액트 사이트라고 인식을 못 함, 빌드해서 배포하면 개발자도구 디버깅이 어려움
4. 최종
로컬서버에서 구동하면 어떻게든 리디정보 긁어올 수만 있다면 모든 게 해결되는 상황 > 확장앱 개발 쪽 보다는 로컬서버 개발환경으로 맞추는 게 빠를 것 같다
그래서 처음엔 확장앱에서 indexedDB 크롤링한 정보만 좀 받아놓고 DB추출하는 방법 찾아서 로컬에 DB업로드해서 사용해볼까 생각했음
근데 크롤링이라는 기능을 테스트 해야하는데 리턴값이 같으면 개발이 힘들거같음 + 빌드 프로파일도 확장앱이랑 로컬이랑 나누고 소스도 프로파일 따라서 분기 태워야 함
> 지피티 물어봤을 때 CORS 에러 해결방법 묻다가 프록시 서버 두라는 말이 생각남 지피티가 얘기한 건 다른 거긴 했지만? 프록시라는 키워드는 기억났죠?
>> 확장앱을 프록시로 두자!
그래서 확장앱에다가는 로컬서버에서 요청한 리퀘스트 파라미터 받아서 request받고 그대로 다시 로컬로 쏴주는 것만 올려놨음
사실 개발환경이 안 갖춰져 있고 개발을 할 수는 있는데 되게 번거롭고 불편하게 해야하는 상황이다보니까 손이 안가기도 하고 딴 거 취미생활 하고 싶어서 손뗀지 좀 됐는데 최근에 갑자기 생각나서 시도해봄ㅋㅋㅋ