[feat] Add MSW setup for API mocking

[karnelll]

#️⃣연관 이슈

ex) #이슈번호

---

📝작업 내용

1. MSW(Mock Service Worker) 환경 세팅 완료

• 참고 자료:
  • 첫 번째 블로그를 참고하여 환경 세팅 완료.
  • Mock API 요청 테스트를 위한 핸들러(GET, POST) 구현.
  • 브라우저 및 서버 환경 지원과 React 통합 완료.

---

🚨추가 사항

1. npm audit fix 실행 보류

• 상황:
  취약점 해결을 위해 npm audit fix 실행 시 새로운 빌드 오류가 발생할 가능성이 있어 실행하지 않음.
• 조치 필요:
  취약점 해결 방법 재검토 및 안전한 업데이트 방안 모색.

2. MSW 환경 세팅 방식의 다양성

• 상황:
  • 두 번째 블로그에서 MSW 최신 버전과 TypeScript 적용 시 모듈 인식 오류 발생 가능성 언급.
  • 첫 번째 블로그의 방법으로 해결했으나, 두 번째 블로그는 MSW 버전 다운그레이드로 문제를 해결.
• 조치 필요:
  1. MSW 최신 버전과 TypeScript 호환성 검토.
  2. 필요 시 MSW 버전 다운그레이드와 같은 다양한 방법 검토.

3. MSW 설치 및 devDependencies 문제

• 상황:
  npm install msw --save 실행 후에도 MSW가 devDependencies로 인식.
  패키지 재설치(npm uninstall msw → npm install msw --save)를 시도했으나 빌드 오류 발생.

• 임시 조치:

  • ESLint 규칙 추가:

    mocks 경로 내 파일에서 devDependencies 사용을 허용하도록 설정.

    "rules": {
      "import/no-extraneous-dependencies": [
        "error",
        { "devDependencies": ["**/mocks/**"] }
      ]
    }

---

💬리뷰 요구사항

1. 'npm audit fix' 관련 취약점 해결 방법 재검토.
2. MSW 환경 세팅 방식 비교 및 최적의 방법 도출.
3. TypeScript 호환성 검증.
4. MSW 설치 문제 해결 및 ESLint 설정 점검.

[cr-gpt]

Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pingping-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 13, 2025 10:11pm

[github-actions]

Code review by ChatGPT

[choihooo]

음.. 챗지피티 리뷰가 생각보다 퀄이 높게 리뷰 잘 해준거 같아서 지금 부분에서 더 리뷰할건 없는 거 같아요.
그리고 참고할만한 것들을 찾아봤는데

• https://oliveyoung.tech/2024-01-23/msw-frontend/
  • 이거로 MSW 개념 같은 거 한 번 이해하고
• https://github.com/dreamyPatisiel/devdevdev-client
  • 이거로 폴더구조랑 다른 사람은 어떻게 짰나 보고 응용하면 좋을 거 같아요.

이거 두개 참고할만한 거 같고 두번째 레포는 앞으로 폴더구조 변경할때도 참고하면 좋을 거 같습니다!
앞으로도 화이팅👏

[choihooo]

LGTM👍