모킹 서버 작성MSW는 존재하지 않는 API에 대한 응답을 받을 수 있게 해준다.개발 환경에서만 사용하므로 --save-dev 옵션을 넣어준다.npm i msw --save-dev아래 명령어를 실행하면 public 폴더에 mockServiceWorker.js 파일이 생성된다.npx msw init public/ --save가짜 리뷰 데이터 생성을 위해 faker를 설치한다.npm i @faker-js/faker --save-dev models/book.model.ts리뷰의 인터페이스를 정의한다.export interface BookReviewItem { id: number; userName: string; content: string; createdAt: string; scor..
스니펫 만들기스니펫은 키워드와 템플릿을 설정하면 키워드를 입력했을 때 해당 템플릿이 입력되게 해준다.즉, 자동완성 기능을 사용할 수 있게 해주기 때문에 반복 타이핑을 피할 수 있다. 1. vscode의 확장에서 스니펫을 설치한다. 2. 컴포넌트 이름이 들어가는 부분들에 $1을 입력한다. $1은 스니펫이 입력된 직후에 커서가 위치하는 곳이다.참고로 $1에서 탭을 누르면 $2로 이동한다.import styled from "styled-components";function $1() { return ( $1 body );}const $1Style = styled.div``;export default $1; 3. 등록할 코드를 드래그하고 우클릭해서 gen..
import alias현재 import 경로는 상대 경로로 지정되어 있다. 프로젝트 규모가 커졌을 때 상대 경로로 지정되어 있으면 유지보수가 힘들어지므로 절대 경로로 바꿔보자. vite.config.tsvite.config.ts 파일을 생성하고 아래와 같은 코드를 입력한다.alias 부분에 별칭을 작성한다.import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'// https://vitejs.dev/config/export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: '@', replacement: '/src' } ] }..
https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 studiomeal.com위 글을 참고하여 작성했다. Flex 아이템 속성flex-basisFlex 아이템의 기본 크기를 설정한다. flex-direction이 row면 너비, column이면 높이를 설정한다.기본 값은 auto이다..item { flex-basis: 100px;}원래 width가 100px이 넘는 B는 원래의 크기 그대로 유지되고, 원래의 width가 100px이 안 되는 A와 C는 100px로 늘어난다. flex-grow아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.기본값이 0이기 때문에 별도로 설정하지 않으면 아이템이 늘어나지 않는다. 아이..
주문서 작성api/order.api.ts주문 요청을 보내는 함수를 다음과 같이 정의한다.export const order = async (orderData: OrderSheet) => { const response = await httpClient.post('/orders', orderData); return response.data;} components/order/FindAddressButton.tsx주소를 찾는 버튼이다. daum의 api를 사용하며, onCompleted로 전달되는 함수는 주소 InputText에 주소를 찾은 결과를 set 하는 함수이다.import Button from "../common/Button";import { useEffect } from "react";int..
장바구니api/carts.api.ts백엔드의 api로 요청을 보내는 함수를 작성한다. 각각 장바구니 추가, 장바구니 목록 가져오기, 장바구니에서 삭제 함수이다.import { Cart } from "../models/cart.model";import { httpClient } from "./http";interface AddCartParams { book_id: number; quantity: number;}export const addCart = async (params: AddCartParams) => { const response = await httpClient.post('/carts', params); return response.data;}export const fetch..
라우팅 경로 추가App.tsxapp.tsx 파일에 도서 상세 페이지 경로를 추가해 준다.const router = createBrowserRouter([ ... { path: '/book/:bookId', element: ( ) }]) 도서 상세 페이지 컴포넌트Headerapi/books.api.ts도서 상세 정보 조회 api로 http request를 보내는 함수를 생성한다.export const fetchBook = async (bookId: string | undefined) => { const response = await httpClient.get(`/books/${bookId}`); return response.data;..
비밀번호 초기화api/auth.api.ts비밀번호 초기화와 회원가입에 관련된 api를 정의한다.import { httpClient } from "./http";import { SignupProps } from "../pages/Signup";export const resetRequest = async (data: SignupProps) => { const response = await httpClient.post('/users/reset', data); return response.data;}export const resetPassword = async (data: SignupProps) => { const response = await httpClient.put('/users/reset..
등장 배경브라우저의 개발자 도구를 열면 DOM이 어떻게 작성되어 있고, 어떤 서버와 통신하는지, 리소스 출처는 어딘지 등 여러 정보들을 제한 없이 열람할 수 있다. 사용자가 악의를 가지고 소스 코드를 보면 토큰이나 쿠키 같은 사용자의 정보를 탈취할 수도 있다.따라서 브라우저는 기본적으로 같은 출처에서만 리소스를 공유할 수 있다는 SOP 정책을 따른다.근데 이게 개발할 때 불편하기 때문에 SOP의 불편함을 해소하고, 보안을 지키기위해 CORS가 등장한다. CORS정의출처가 서로 다른 서버끼리 리소스를 주고 받을 때 보안을 위해 설정된 정책이다. 출처 판단 기준https://www.domain.com:3000/category?limit=4¤t_page=1#first ProtocolHostPortP..
기본 컴포넌트 작성세 컴포넌트 모두 Home 컴포넌트에서 렌더링 된다.function Home() { return ( 제목 테스트 버튼 테스트 Home body )} Title컴포넌트props로 children, size, color을 받는다. children은 h1 태그에 들어가고, size와 color는 스타일로 설정한다.import { styled } from "styled-components";import { ColorKey, HeadingSize } from "../../style/theme";interface Props { ..
