1. React Query 설정React Query : React 애플리케이션에서 서버 상태를 효율적으로 관리하기 위한 강력한 라이브러리 React Query는 버전이 여러 개 있다는 것을 주의해야 한다. https://tanstack.com/query/v4/docs/framework/react/installation TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com해당 문서를..

1. cartSlice 작성import jwtAxios from "../util/jwtUtil";import { API_SERVER_HOST } from "./todoApi";const host = `${API_SERVER_HOST}/api/cart`export const getCartItems = async () => { const res = await jwtAxios.get(`${host}/items`) return res.data}export const postChangeCart = async (cartItem) => { const res = await jwtAxios.post(`${host}/change`, cartItem) return res.data}src\api\cart..

1. 장바구니 엔티티 설계회원, 장바구니, 상품, 장바구니 상품, 이미지총 5개의 테이블을 사용한다.새로 생성해야 하는 테이블은 장바구니와 장바구니 상품 테이블 package org.zerock.apiserver.domain;import jakarta.persistence.*;import lombok.*;@Entity@Builder@AllArgsConstructor@NoArgsConstructor@Getter@ToString(exclude = "owner")@Table( name = "tbl_cart", indexes = { @Index(name = "idx_cart_email", columnList = "member_owner")})public class Cart { @I..

1. 카카오 애플리케이션 설정카카오에 접근하기 위한 인가 코드access 토큰사용자 정보를 얻어 옴 구현 방식→ 카카오나 네이버 서비스는 ‘권한부여 승인 코드 방식  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com해당 사이트에서 로그인 후 진행 애플리케이션 추가하기생성 후 '앱 키'에서 REST API 키 복사해 두기 Web 플랫폼 등록 '등록하러 가기' 선택 Redirect URI 설정 카카오 로그인에서 활성화 설정 ON카카오 로그인 > 동의항목닉네임 필수로 받도록 설정  2. 인가코드 받기코드..

1. 리덕스 툴킷 설정리덕스 : 상태 관리 라이브러리, 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너npm install @reduxjs/toolkit react-reduxvscode에서 설치 강의에는 나오지 않았지만 redux 사용할 때 필요할 것 같아 해당 확장 프로그램을 설치하고 진행했다.(vscoe 환경에서 진행 중)import { configureStore } from "@reduxjs/toolkit";export default configureStore({ reducer: {},});mall\src\store.js import React from "react";import ReactDOM from "react-dom/client";import "./index.css";import App ..

1. 스프링 시큐리티 추가 및 기본 설정implementation 'org.springframework.boot:spring-boot-starter-security'보안 기능이 추가되도록 해당 라이브러리를 gradle에 추가인증(로그인)과 인가(권한 부여) 같은 기본적인 보안 기능 적용 package org.zerock.apiserver.config;import lombok.RequiredArgsConstructor;import lombok.extern.log4j.Log4j2;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springf..

https://zk202308a.github.io/reactbookcodes/ Heroic Features - Start Bootstrap TemplateAs always, Start Bootstrap has a powerful collectin of free templates.zk202308a.github.io화면 디자인 같은 부분은 강의에서 너무 빨리 넘어가고 안 보이는 경우도 있어서 해당 깃허브에서 코드 참고했음 1. 상품 관련 React-Router 설정import React from "react";function IndexPage() { return IndexPage;}export default IndexPage;mall\src\pages\products\IndexPage.js import {..

1. 서비스 계층 - 상품 목록 처리package org.zerock.apiserver.service;import org.springframework.transaction.annotation.Transactional;import org.zerock.apiserver.dto.PageRequestDTO;import org.zerock.apiserver.dto.PageResponseDTO;import org.zerock.apiserver.dto.ProductDTO;@Transactionalpublic interface ProductService { PageResponseDTO getList(PageRequestDTO requestDTO);}org/zerock/apiserver/service/Product..

1. 파일 업로드 설정과 확인spring.servlet.multipart.max-request-size=30MBspring.servlet.multipart.max-file-size=10MBorg.zerock.upload.path=uploadresources/application.propertiesHTTP 요청에서 업로드할 수 있는 파일과 데이터의 최대 크기를 설정단일 파일의 최대 업로드 크기를 설정파일을 업로드할 경로를 지정하는 설정package org.zerock.apiserver.util;import jakarta.annotation.PostConstruct;import lombok.RequiredArgsConstructor;import lombok.extern.log4j.Log4j2;import o..