사고쳤어요

웹 페이지를 제작할 때 화면 크기가 변경되었을 때 화면이 잘 출력되도록 대응하는 것은 매우 중요하다.화면 크기에 맞춰 잘 보여지도록 개발을 하더라도 화면 크기에 따라 의도하지 않은 화면이 보여질 수 있다.예를 들어 위의 페이지에서는 화면이 정상적으로 잘 보여진다.그러나 모바일 환경 또는 화면 크기를 줄이면 의도하지 않은대로 화면이 깨지는 것을 볼 수 있다.이런 일이 발생하지 않도록 화면 크기에 대응하여 보여지도록 해보자. 미디어 쿼리(@media)const BooksListStyle = styled.div` display: grid; grid-template-columns: ${({ view }) => view === "grid" ? "repeat(4, 1fr)" : "repeat(1, 1fr)..

https://mswjs.io/docs/getting-started Getting startedThree steps to get started with Mock Service Worker.mswjs.ioMSW(Mock Service Worker)는 클라이언트 측에서 네트워크 요청을 가로채고 이를 모킹할 수 있게 해주는 라이브러리이다.주로 API 통신을 테스트하거나 개발 단계에서 백엔드 없이 API를 개발하고 테스트할 때 유용하게 사용된다. 다음 명령어를 통해 설치를 진행해준다.npm install msw@latest --save-dev 이후 다음 명령어를 통해 mock service worker를 생성해준다.npx msw init public/ --save 명령이 실행되면 public 폴더에 mockS..