develop mode에서 msw와 로컬 서버를 동적으로 선택하는 기능 제안

[gabrielyoon7]

현재 웹팩 기준, 어떠한 addon 설치가 안되어있을 때의 현황은 다음과 같습니다.

webpack mode

1. production
   이 모드는 당연하지만 실제 프로덕션 코드이므로 aws의 우리 서버를 바라봐야함. 따라서 논의할 가치 x

2. develop
   이 모드는 개발 시에 사용하는 모드임.

develop 모드에서는 어떻게 개발을 할 수 있나?

msw를 활용해서 서버의 도움 없이 클라이언트에서 데이터를 mocking해서 최대한 모의 상황을 구현하여 개발이 가능함.
그런데, 실제 연결 하는 것과는 차원이 다른 문제임.
백엔드 개발 입장에서도 항상 postman을 붙잡고 개발하는 것은 한계가 있으므로 로컬에서의 연결이 굉장히 중요함.

며칠 전에 @feb-dain 이 테스트해본 결과, msw를 동작하는 것 만으로도 localhost:8080이 mocking되는 현상이 있었음.
즉, 로컬 서버를 띄운 상태에서 개발하려면 msw 코드를 강제로 제거해서 테스트를 할 수 밖에 없음

어떻게 해결하였는가?

진짜 단순 무식하게 develop에서만 동작 하는 것을 가정함.

1. develop mode에서만 navigation 바의 빈 공간에 msw 켜기/끄기 스위치를 띄우는 것임.
2. 해당 버튼을 누르면 msw를 동적으로 죽였다 살렸다 할 수 있음.

로컬 서버(localhost:8080)와 연결해야한다면 버튼을 눌러 msw를 끄면 되고
다시 msw와 연결해야 한다면 버튼을 눌러서 키면 됨.

참고로 테스트는 MSW를 그대로 복붙한 express 서버에서 cors 테스트 완료했음

내일 즉석 코딩으로 시연할테니 검토 바랍니다.