거니의 velog

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

* 사용자의 인증에 대한 처리가 완료되었다면 로그인한 사용자들이 사용할 수 있는 장바구니 기능을 구현해 보도록 하자. 장바구니는 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 = () ..

5. 자동 회원 추가 및 회원정보의 반환 * API 서버가 Access Token을 처리해서 사용자의 이메일 정보를 추출하는 것을 확인했다면 이를 이용해서 데이터베이스에 존재하는 회원인지 처음으로 접근한 회원인지에 따라서 데이터베이스에서 조회 혹은 추가(회원가입)를 해 주어야 한다. (1) MemberService 회원 처리 * 회원정보는 MemberDTO 타입을 통해서 처리되어야 하므로 Member 엔티티 객체를 MemberDTO 객체로 변환하는 entityToDTO() 를 추가한다. package com.unlimited.mallapi.service; import java.util.stream.Collectors; import org.springframework.transaction.annotatio..

4. API 서버에서 Access Token 처리 * 예제에서는 프론트 환경에서 Access Token까지 처리하고 API 서버에 이를 전달해서 API 서버 내에서 사용자와 관련된 처리를 하는 방식으로 구성할 것이다. 따라서, API 서버에 추가적인 기능을 개발해야 한다. * 카카오 서비스에서 사용자 정보를 가져오기 위해서는 https://kapi.kakao.com/v2/user/me 를 Access Token을 이용해서 호출해야 한다. https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#req-user-info Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 A..

3. 리액트에서 카카오 로그인* API 서버는 하나의 서버로 여러 종류의 서비스나 앱에서 호출이 가능하기 때문에 소셜 로그인에 대한 실행은 반드시 프론트 애플리케이션에서 시작되어야 한다. 리액트에서는 여러 종류의 소셜 로그인 관련 라이브러리들이 존재하긴 하지만, 예제에서는 직접 구현을 해서 모든 과정을 이해해 본다(카카오 로그인에 관한 설명은 아래 문서를 참고). https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com(1) 인가 코드의 처리* ..