거니의 velog

5. 리코일(Recoil) 라이브러리 * 리코일 라이브러리는 리덕스나 리덕스 툴킷과 유사하게 애플리케이션 내에 상태를 처리하기 위한 라이브러리이다. https://recoiljs.org/ko/ Recoil A state management library for React. recoiljs.org * 리액트의 생태계가 발전하면서 상태관리를 위한 다양한 라이브러리가 등장했는데 리코일은 2020년에 등장하면서 많은 인기를 끌고 있다. * 리코일 라이브러리를 이해하기 위해서는 위의 그림에 나오는 Atoms와 useRecoilState()를 이해해야 한다. Atoms는 리코일을 통해서 보관하고 싶은 데이터를 의미한다. 리덕스가 애플리케이션당 하나의 상태를 유지하는 것과 달리, 리코일은 여러 개의 Atoms를 만들..

4. 상품 수정 처리 * 상품 수정은 조회와 등록 기능이 같이 존재하기 때문에 useQuery()와 useMutation()을 같이 사용해야 한다. 상품의 수정 처리는 기본적으로 다음의 흐름을 따라서 처리한다. - useQuery()를 이용해서 상품 데이터를 가져온 후 컴포넌트의 상태 값으로 지정한다. - 을 이용해서 컴포넌트의 상태로 유지되는 데이터를 수정한다. - 수정이나 삭제를 처리한 후 화면을 이동하게 된다. * 리액트 쿼리 3 버전까지는 useQuery() 의 파라미터로 지정되는 옵션에는 onSuccess를 지정해서 서버의 데이터를 직접 useState()가 사용하는 상태로 변경할 수 있었지만 5 버전 부터는 deprecated 되므로 다른 방법을 사용해야 한다. (1) 조회 및 상태 처리 * ..

3. 상품등록 처리 * 리액트 쿼리에서 가장 중요한 기능은 useQuery()와 useMutation() 이다. SQL로 비유하자면 useQuery()가 select를 위해서 사용된다면, useMutation()은 insert/update/delete를 위해서 사용된다. useMutation() 은 파라미터로 서버를 호출하는 함수를 전달하고 mutate()를 이용해서 처리 결과에 대한 다양한 정보를 얻을 수 있다. * 상품등록 기능을 처리하는 components/products/AddComponent.js를 수정한다. * AddComponent에 useMutation()이 적용되므로 모달창을 처리하기 위한 fetching이나 result와 관련된 내용들을 모두 삭제하고 useMutation()을 적용한다..

2. 상품목록 페이지 * 상품목록에서 데이터를 조회하는 기능은 동일하지만 페이지의 번호나 검색 조건 등이 변경될 수 있으므로 useQuery를 이용할 때 주의할 점이 생긴다. (1) 중복적인 쿼리 키(key) * 기존 components/products/ListComponent.js 에 useQuery를 이용해서 page와 size까지 쿼리 키(key)가 되도록 수정한다. import React from "react"; import { getList } from "../../api/productsApi"; import useCustomMove from "../../hooks/useCustomMove"; import FetchingModal from "../common/FetchingModal"; impo..

* 리액트의 인기 요인 중 하나는 방대한 생태계에 있다. 리액트의 버전이 변경되면서 추가되는 기능보다 빠른 속도로 라이브러리나 프레임워크들이 등장하고 있는 상황이다. * 이번 장에서는 비동기 처리를 더욱 손쉽게 할 수 있는 리액트 쿼리(React Query)와 리덕스 대신에 많이 사용하는 상태관리 라이브러리인 리코일(Recoil)을 이용한다. 리액트 쿼리는 기존 서버의 데이터를 캐싱하는 기능을 가지고 있어서 불필요한 서버 호출을 줄여줄 뿐 아니라 간략한 코드로 기능을 구성할 수 있습니다. 리코일은 과거 리덕스(리덕스 툴킷 이전)의 복잡함을 없애고 손쉽게 애플리케이션의 상태 관리를 가능하게 한다. * 이번 장의 학습 목표는 다음과 같다.1. 리액트 쿼리(React Query)의 설정과 상품 관리 적용 2...

4. 상품 조회에서 장바구니 추가 * 장바구니에 존재하는 장바구니 아이템을 변경하거나 삭제하는 작업이 완료되었다면 이제 상품 조회 화면에서 장바구니에 상품을 추가하는 기능을 구현한다. 상품을 추가하면 장바구니 아이템을 생성하게 되는데 이때 서버에 전달하는 데이터는 '이메일, 상품번호, 수량'이다. 아래와 같은 상품 조회 화면에는 장바구니에 담기 버튼을 추가해 주어야 한다. (1) 상품 조회 기능 수정 * 장바구니에 상품 추가 기능은 components/products/ReadComponent.js를 수정해야만 한다. import React, { useEffect, useState } from "react"; import { getOne } from "../../api/productsApi"; import..

3. 장바구니 아이템 컴포넌트 * 브라우저에서는 장바구니에 있는 장바구니 아이템 목록의 개수만 출력해 주었으므로 실제 내용물을 보여주는 컴포넌트를 구성해 본다. * components 폴더에 cart 폴더를 추가하고 CartItemComponent를 추가한다. * CartItemComponent 는 장바구니 아이템을 출력하는 용도이므로 이에 대한 데이터를 속성으로 전달받도록 구성한다. import React from "react"; const CartItemComponent = ({ cino, pname, price, pno, qty, imageFile }) => { return ( {cino} -- {pname} ); }; export default CartItemComponent; * menus 폴더..

* 이번에는 이전에 구성했던 API 서버에 장바구니 관련 기능을 리액트를 이용해서 실제 화면을 구성해 본다. 리덕스 툴킷을 이용해서 로그인 상황에 따라 장바구니에 상품을 추가하고 변경하는 작업을 처리해 본다. * 이번 장의 학습 목표는 다음과 같다. 1. 리덕스 툴킷을 이용한 장바구니 상태 관리 2. API 서버와 장바구니 상태 동기화 처리 1. API 서버와 통신 * 가장 먼저 할 일은 프로젝트 내 api 폴더에 cartApi.js를 추가하고 장바구니 관련 기능을 정리해 두는 것이다. import jwtAxios from "../util/jwtUtil"; import { API_SERVER_HOST } from "./todoApi"; const host = `${API_SERVER_HOST}/api/c..

4. 장바구니 서비스 계층의 설계/구현* 장바구니 서비스는 service 패키지 내에 CartService와 CartServiceImpl로 구현한다.* CartService에는 장바구니 아이템을 추가하거나 수정하는 기능이 CartItemDTO를 이용하므로 하나의 메서드로 설계하고 사용자의 장바구니 아이템들의 조회와 장바구니 아이템의 삭제 기능을 선언한다.package com.unlimited.mallapi.service;import java.util.List;import org.springframework.transaction.annotation.Transactional;import com.unlimited.mallapi.dto.CartItemDTO;import com.unlimited.mallapi.d..

3. Repository의 설정 * Cart와 CartItem 엔티티 객체를 처리할 Repository를 생성한다. repository 패키지에 Cart를 처리하는 CartRepository, CartItemRepository 인터페이스를 생성한다. (1) CartRepository * CartRepository는 기본적으로 JpaRepository가 제공하는 기능들을 사용자의 이메일을 통해서 Cart를 알아내는 기능을 추가해 준다. package com.unlimited.mallapi.repository; import java.util.Optional; import org.springframework.data.jpa.repository.JpaRepository; import org.springframe..