
2025.02.17 - [웹 개발 공부하기] - [02.11] 모킹 서버2025.02.17 - [웹 개발 공부하기] - [02.11] 도서 상세 - 리뷰💥 드롭다운import React, { useEffect, useRef, useState } from "react"import styled from "styled-components"interface Props { children: React.ReactNode toggleButton: React.ReactNode isOpen?: boolean}function Dropdown({ children, toggleButton, isOpen = false }: Props) { const [open, setOpen] = useState(fal..

💥 리뷰 목록 구현하기1. BookReview.tsximport { BookReviewItem as IBookReveiwItem } from "@/models/book.model"import styled from "styled-components"import BookReviewItem from "./BookReviewItem"interface Props { reviews: IBookReveiwItem[]}function BookReview({ reviews }: Props) { return ( {reviews.map((review) => ( ))} )}const BookReviewStyle ..

💥 모킹 서버(Mock Service Worker)1) MSW 자바스크립트 라이브러리2) 존재하지 않는 API에 대한 응답을 모킹3) service worker 에서 요청을 처리4) chrome 기준 devTool의 Application /Service workers 의 "Bypass for network"로 일시 정지 1. book.model.tsexport interface BookReviewItem { id: number; userName: string; content: string; created_at: string; score: number;}원래의 book.model.ts 파일에 BookReviewItem 인터페이스를 추가해주었다. 2. review.api.tsim..