[FE] 모킹 서버, 리뷰 작성, UI 구현 추가

모킹 서버(MSW)

• Mock Service Worker
• 존재하지 않는 API 에 대한 응답을 모킹
• servie worker 에서 요청을 처리
• chrome 기준 devTool 의 Application / Servie workers 의 "Bypass for network" 로 일시정지 

npm install msw --save-dev

 

작동 방식

• 클라이언트의 네트워크 요청을 가로채서 모의 응답을 반환
• 실제 서버처럼 동작하지 않고 미리 저장된 데이터를 단순히 전달

 

사용 목적

• 백엔드 개발이 완료되지 않은 상태에서 프론트엔드 개발 진행 가능
• 다양한 시나리오 테스트 및 에러 상황 시뮬레이션
• 실제 API 호출 비용 절감

➡️ MSW(Mock Service Worker)를 사용하여 실제 API가 없는 상황에서도 도서 리뷰 작성 기능을 구현하였다. 모의 서버를 통해 리뷰 작성 요청을 가로채고 가상의 응답을 제공함으로써, 실제 백엔드 서버 없이도 리뷰 기능을 테스트하고 개발할 수 있게 되었다.

---

🌟 배운 점

오늘은 정말 많은 것을 배웠다. 너무 한꺼번에 많은 것을 배워서, 복습이 꼭 필요할 것 같다. 인강을 듣는데만 5시간이 넘게 걸렸다. 모킹 서버라는 것에 대해서도 처음 알게 되었고, 드롭다운, 탭, 토스트, 모달, 그리고 무한 스크롤을 구현하는 법도 배웠다. 모두 웹 사이트를 만들 때 굉장히 자주 사용하는 기능이기 때문에 어떻게 구현을 하는건지 기억해두면 좋을 것 같다. 혼자 해보는 시간을 가져야겠다.