데브코스/도서 판매 쇼핑몰 (22) 썸네일형 리스트형 [FE]메인 화면 구현 react-slick slider: React 애플리케이션에서 캐러셀(슬라이더) 컴포넌트를 쉽게 구현할 수 있게 해주는 라이브러리 🔨 설치npm install react-slick slick-carousel --save ✏️ 사용법 1️⃣ 기본 사용법import React from "react";import Slider from "react-slick";import "slick-carousel/slick/slick.css";import "slick-carousel/slick/slick-theme.css";function SimpleSlider() { const settings = { dots: true, // 하단 점 네비게이션 infinite: true, //.. [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가 없는 상황에서도 도서 리뷰.. [FE] 중간 회고: 코드 리팩토링 🔨 중간 회고 도출 아이템1. alias 적용2. 중복 코드 제거3. 스니펫 만들기4. useAuth 훅 만들기5. react- query 적용6. 다양한 UI 경험 스니펫(snippet)이란? 재사용 가능한 코드나 텍스트의 작은 부분을 의미한다. ✏️사용해 보기 vscode extensions 에서 설치를 해준다. $3 snippet 으로 만들고자 하는 부분을 작성해준다. 맨 처음에 불러왔을 때 커서는 차례대로 $1 부분, $2 부분, $3 부분을 가리키게 된다. vscode 에서 해당 코드를 드래그 > 우클릭 > Generate snippet 을 누르고, 호출할 때 이름과 해당 스니펫에 대한 설명을 작성하면 사용할 수 있다. 그러면 위와 같이 스니펫을 만들 때 작성한 이름(_comp.. [FE] 프로젝트에서 사용한 React Hook 정리 Hook 이란? 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수 1️⃣useMemo: 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅: 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 const totalQuantity = useMemo(() => { return carts.reduce((acc, cart) => { if (checkedItems.includes(cart.id)) { return acc + cart.quantity; } return acc; }, 0); }, [carts, .. [FE] 도서 상세페이지 구현(좋아요, 장바구니) 👩🏻💻 개발 상황도서 상세 페이지 구현로그인 시 좋아요 추가 취소 기능 구현도서 수량 변경 기능 추가장바구니 담기 기능 추가 💥 발생한 오류 (미해결)메인 화면에서 로그인을 하고 상세 도서 페이지에 들어가서 좋아요 누르기는 되는데, 상세 도서 페이지에서 로그인을 하고 다시 도서 페이지로 돌아와서 좋아요를 누르려고 하면, 기능이 제대로 동작하지 않고 아래와 같은 오류가 생긴다. perplexity 에게 물어봤을 때 문제의 원인은 아래와 같은 문제 때문이라고 한다,, 아직 해결을 하지 못해서 해결하면 내용을 추가해야겠다. 1. 상태 동기화 문제페이지에 이미 들어가 있는 상태에서 로그인할 때, 해당 페이지의 컴포넌트가 인증 상태 변화를 감지하지 못하고 있습니다.2. 컴포넌트 리렌더링 문제로그인 후 .. [FE] 도서 목록 페이지 구현 zustand 란? : React 애플리케이션을 위한 간단하고 가벼운 상태 관리 라이브러리 authStore.ts: Zustand를 사용한 인증(Authentication) 상태 관리 스토어 1. 인터페이스 정의 interface StoreState { isloggedIn: boolean; // 로그인 상태 storeLogin: (token: string) => void; // 로그인 함수 storeLogout: () => void; // 로그아웃 함수}스토어의 상태와 액션들의 타입을 정의isloggedIn: 현재 로그인 상태를 나타내는 불리언 값storeLogin: 토큰을 받아 로그인 처리를 하는 함수storeLogout: 로그아웃 처리를 .. [FE] 라우트 작성, api 통신 및 회원가입 구현 라우트 작성1. 메인 페이지(/) 라우트{ path: "/", element: ( ), errorElement: ,}루트 경로("/")에 접속하면 Layout 컴포넌트 내부에 Home 컴포넌트가 렌더링에러 발생 시 Error 컴포넌트가 표시됨2. 도서 목록 (/books) 라우트 { path: "/books", element: ( 도서 목록 ),}"/books" 경로에 접속하면 Layout 안에 도서 목록 텍스트가 표시됨 3. 회원가입 (/signup) 라우트 { path: "/signup", element: ( ),}"/signup" 경로에서는 Layout 내부에 SignUp 컴포넌트가 렌더링됨 API 통신 1... [FE] 기본 컴포넌트 작성(Title, Button, Input) Title 컴포넌트① 인터페이스 정의 interface Props { children: React.ReactNode; // 타이틀 내용 size: HeadingSize; // 제목 크기 color?: ColorKey; // 선택적 색상 값}HeadingSize와 ColorKey는 theme 파일에서 정의된 타입을 사용한다.② 컴포넌트 구현function Title({ children, size, color }: Props) { return ( {children} );} ③ 스타일 구현const TitleStyle = styled.h1>` font-size: ${({ theme, size }) => theme.heading[size].fon.. 이전 1 2 3 다음
