사고쳤어요

웹 페이지를 제작할 때 화면 크기가 변경되었을 때 화면이 잘 출력되도록 대응하는 것은 매우 중요하다.화면 크기에 맞춰 잘 보여지도록 개발을 하더라도 화면 크기에 따라 의도하지 않은 화면이 보여질 수 있다.예를 들어 위의 페이지에서는 화면이 정상적으로 잘 보여진다.그러나 모바일 환경 또는 화면 크기를 줄이면 의도하지 않은대로 화면이 깨지는 것을 볼 수 있다.이런 일이 발생하지 않도록 화면 크기에 대응하여 보여지도록 해보자. 미디어 쿼리(@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..

VSCode에서는 스니펫을 사용하여 반복되는 코드 조각들을 편리하게 입력할 수 있다. VSCode 좌측 하단의 설정을 누른다. 코드 조각을 누른다. typescriptreact를 선택한다. (작업 환경에 맞는 언어와 프레임워크를 선택하면 된다) VSCode Extension에는 스니펫의 추가를 도와주는 여러 확장 프로그램들이 존재한다.Snippet Generator를 설치해준다. 스니펫을 추가하고자 하는 코드가 포함된 파일을 연다. 코드를 드래그한 뒤 팔레트 확장(Ctrl + Shift + P)를 눌러 Generate Snippet에 들어간다.이후 이름, 설명 등을 입력하면 스니펫이 클립보드에 복사된다. 처음에 열었던 typescriptreact.json에 복사한 스니펫을 붙여넣는다. 이제 VSCod..

https://craco.js.org/ Configure CRA without ejecting. | CRACOCreate React App Configuration Overridecraco.js.orgCraco란 Create React App Configuration Override의 약자로, Create React App(CRA)로 생성한 React 프로젝트에서 eject 하지 않고도 설정을 커스터마이징할 수 있게 해주는 도구이다.Craco를 사용하여 상대 경로가 아닌 절대 경로를 사용하여 파일을 import할 수 있도록 설정해보자. 먼저 다음 명령어들을 통해 craco를 설치해준다.npm i -D @craco/craconpm i -D @craco/types // 타입스크립트 다음으로 src폴더에 ts..

주소를 입력할 때 자주 볼 수 있는 화면이다.위 창에서 주소를 검색한 뒤 주소를 클릭하면 검색된 주소 정보가 입력된다. https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net위 서비스는 다음 링크에서 보다 자세히 안내되어 있으며 무료로 제약없이 사용할 수 있다.이를 활용하여 주문을 처리하는 페이지를 구현해보자. // FindAddressButton.tsximport Button from "../common/Button";import { useEffect } from..

// BookDetail.tsximport { Link, useParams } from "react-router-dom";import styled from "styled-components";import { useBook } from "../hooks/useBook";import { getImgSrc } from "../utils/image";import Title from "../components/common/Title";import { BookDetail as IBookDetail } from "../models/book.model";import { formatDate, formatNumber } from "../utils/format";import EllipsisBox from "../compon..

쿼리스트링을 활용하여 BooksFilter를 구현하여 카테고리를 선택하였음을 알 수 있도록 해보자. // BooksFilter.tsximport styled from "styled-components";import { useCategory } from "../../hooks/useCategory";import Button from "../common/Button";import { useSearchParams } from "react-router-dom";const BooksFilter = () => { const { category } = useCategory(); const [searchParams, setSearchParams] = useSearchParams(); const handleCate..

https://www.npmjs.com/package/zustand zustand🐻 Bear necessities for state management in React. Latest version: 5.0.3, last published: 3 months ago. Start using zustand in your project by running `npm i zustand`. There are 3665 other projects in the npm registry using zustand.www.npmjs.comZustand는 간결하게 상태 관리를 할 수 있도록 도와주는 라이브러리이다.npm install zustand // authStore.tsimport { create } from "zustand..