[FE] 개발환경과 빌드환경에 따라 msw 실행 여부를 결정하도록 msw 실행 조건문 개선

[BadaHertz52]

• resolves [FE] 개발환경과 빌드환경에 따라 msw 실행 여부를 결정하도록 msw 실행 조건문을 개선한다. #211

---

🚀 어떤 기능을 구현했나요 ?

기능 개발 계기:

현재 로컬에서 빌드 한 후 이를 s3에 올리는 상황이라, 로컬 빌드 시 env 파일 속 환경 변수가 들어가 msw의 목서버가 실행되는 문제점이 있었습니다.
이를 위해서 개발 시에는 enableMocking을 추가했다가 pr 시에 이를 빼는 번거로웠습니다. enableMocking 문을 그대로 둔 채 개발할 수 있게 하고 싶었습니다.

구현한 기능

개발 환경과 빌드 환경을 구분해 msw 실행 여부를 결장하도록 work.start 실행 조건문을 개선했습니다.

🔥 어떻게 해결했나요 ?

1차 시도 : yarn run buid, yarn run dev 시 env 다르게 설정하기

env를 빌드 시와 dev 실행 시 다르게 설정할 수 있는 방법을 시도해봤지만, env가 바뀌지 않는 문제가 있었습니다. 여러 env를 활용하자니 조건문이 길어졌습니다.

2차 시도 및 최종 방법

개발 환경 시 주소(localhost:3000), 배포 주소 가 다르며 빌드한 파일을 실행하는 http-sever 포트 8080로 프로그램을 실행하는 url이 모두 다릅니다.

그래서 host,port를 브라우저 환경에서 msw의 목 서버를 실행하는 조건문으로 활용해 개발환경, 빌드 환경, 배포 환경에 따라 목서버의 실행이 결정되도록 했습니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 조건문을 변경한 것이 프론트 팀원들의 번거로움을 덜어줬는지 확인해주세요.
• http-server를 앞으로도 사용할 것 인지에 대한 팀원들의 생각이 궁금해요
  • 빌드한 파일에 목서버가 실행되는지 확인하기 위해서 http-server를 설치했어요 , 빌드한 파일을 배포 사이트롤 배포하기 전 로컬에서 확인해보는 것이 중요하다고 생각되어 해당 패키지와 실행 명령어를 그대로 두었어요.

📚 참고 자료, 할 말

• 주말에 쉬려했는데 해야할 게 보이네 😅

[ImxYJL]

이제 귀찮게 주석처리하거나 실수할 여지가 줄어들겠네요!

[github-actions]

Test Results

24 tests   24 ✅  1s ⏱️
10 suites   0 💤
10 files     0 ❌

Results for commit 5ee022f.

[chysis]

고생했어요!!👍👍

[chysis]

http-server를 사용하지 않고 webpack-dev-server를 활용하는 방법이 있는지 찾아보는 것도 좋을 것 같아요!

[soosoo22]

수고했어요! 정말 유용하네요!
enableMocking 일일이 주석처리하고 해제하는게 귀찮기도 하고, 실수로 커밋했을 때도 있어서.. 좋은 방안이 없을까? 싶었는데 해결되었네요!!👍

[soosoo22]

고마워요!!!

[ImxYJL]

제발 머지돼라