거니의 velog

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..

* 사용자의 인증에 대한 처리가 완료되었다면 로그인한 사용자들이 사용할 수 있는 장바구니 기능을 구현해 보도록 하자. 장바구니는 JPA의 연관관계를 이용해서 구성하고 @Query를 이용해서 현재 사용자의 장바구니가 가진 상품목록과 수량(장바구니 아이템)들을 반환하는 기능을 구현한다. * 이번 장의 학습 목표는 다음과 같다. 1. JPA의 연관관계를 이용한 장바구니 설계 2. JPQL을 이용한 조인 처리와 Projections를 이용한 DTO 처리 3. 스프링 시큐리티와 로그인 정보를 활용한 사용자 인증 처리 1. 장바구니 엔티티의 설계 * 장바구니는 사용자 한 명당 하나의 장바구니를 가지도록 구성되고 하나의 장바구니에는 여러 개의 상품과 해당 상품(장바구니 아이템)의 수량을 넣을 수 있도록 구성된다. 이..

6. 회원정보 수정 * 회원정보 수정은 현재 애플리케이션의 상태로 유지되고 있는 사용자 정보로 화면에 출력하고 수정하게 된다. 이를 위해서 먼저, 화면에서 회원정보를 수정할 수 있도록 처리하는 작업과, API 서버의 작업, API 서버 연동 순으로 처리한다. (1) 회원정보 수정 화면 처리 * 프로젝트의 components/member 폴더에는 ModifyComponent.js를 추가한다. import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; const initState = { email: "", pw: "", nickname: "", }; const ModifyComponent = () ..