거니의 velog

2. DTO와 인증 처리 서비스* 엔티티 처리를 확인했다면 서비스 계층을 만들어서 로그인 기능을 구현해 놓는다. 가장 먼저 dto 패키지에 MemberDTO 클래스를 추가한다. MemberDTO는 기존의 DTO와는 달리 스프링 시큐리티에서 이용하는 타입의 객체로 만들어서 사용하기 위해서 org.springframework.security.core.userdetails.User 클래스를 상속하는 구조로 생성하고, User 클래스의 생성자를 사용할 수 있는 구조로 작성한다(상속하는 부모 클래스의 생성자 함수 때문에 생성자 방식을 사용한다).package com.unlimited.mallapi.dto; import java.util.List; import java.util.ArrayList; import ja..

* API 서버는 기본적으로 지난번 호출에 대해 기록하지 않는 무상태(stateless) 서비스이다. 무상태(stateless) 서비스란 서버가 클라이언트의 이전 요청에 대한 정보를 기억하지 않고, 각각의 요청을 독립적으로 처리하는 특성을 말합니다. 다시 말해, 서버는 각각의 클라이언트 요청을 별개의 이벤트로 취급하며, 이전 요청의 상태나 정보를 저장하지 않습니다. 무상태 서비스의 특징은 다음과 같습니다. 1. 상태 저장 없음(Stateless): 서버는 클라이언트의 상태를 저장하지 않습니다. 클라이언트의 각 요청은 독립적이며, 이전 요청의 상태에 영향을 받지 않습니다. 이는 서버에서 세션 정보나 쿠키를 사용하지 않는다는 것을 의미합니다. 2. 성능 향상: 무상태 서비스는 서버 측에서 클라이언트의 상태를..

5. 수정/삭제 페이지와 컴포넌트 처리 * 수정/삭제를 위한 페이지는 pages/products/ModifyPage.js 파일로 작성하고, router/productsRouter.js 파일을 수정해서 라우팅 설정을 추가한다. import React from "react"; const ModifyPage = () => { return ( Products Modify Page ); }; export default ModifyPage; * router/productsRouter.js 내 ModifyPage 설정을 추가한다. import React, { Suspense, lazy } from "react"; import { Navigate } from "react-router-dom"; const product..

4. 조회 페이지와 조회 컴포넌트 * 조회 페이지는 pages/products/ReadPage.js로 작성한다. import React from "react"; const ReadPage = () => { return ( Products Read Page ); }; export default ReadPage; * router/productRouter.js에 ReadPage에 대한 설정을 추가한다. import React, { Suspense, lazy } from "react"; import { Navigate } from "react-router-dom"; const productsRouter = () => { const Loading = Loading....; const ProductsList = l..

3. 목록 페이지와 목록 컴포넌트 처리 * 목록 페이지와 목록 컴포넌트 처리 역시 이전의 Todo 예제와 유사하다. useCustomMove를 이용하면 이동과 관련된 처리를 쉽게 처리할 수 있고 FetchingModal을 이용해서 서버와의 통신 과정에 보여주도록 처리한다. * 우선 api/productsApi.js에는 서버에서 목록 데이터를 가져오기 위한 함수를 준비한다. import axios from "axios"; import { API_SERVER_HOST } from "./todoApi"; const host = `${API_SERVER_HOST}/api/products`; export const postAdd = async (product) => { const header = { headers..

2. 등록 페이지와 컴포넌트 처리 * 등록 작업은 AddPage.js 이름의 페이지 컴포넌트를 추가하고 라우터를 설정해 주는 것으로 시작한다. import React from "react"; const AddPage = () => { return ( Products Add Page ); }; export default AddPage; (1) 라우팅 설정 * router/productsRouter.js에는 AddPage에 대한 라우팅 정보를 설정한다. import React, { Suspense, lazy } from "react"; import { Navigate } from "react-router-dom"; const productsRouter = () => { const Loading = Loadi..

* 상품 API의 경우 파일 데이터가 추가된다는 점을 제외하면 JSON을 이용하는 데이터 처리방식과 유사하다. 하지만 파일 데이터가 추가되기 때문에 처리 과정에 걸리는 시간에 맞는 모달창을 보이는 등의 추가적인 부분이 필요하다. 이 장에서는 컴포넌트의 재사용을 이용해서 이러한 처리를 연습한다. * 이번 장의 개발 목표는 다음과 같다. 1. 파일이 추가되는 데이터 처리 2. 기존 공통 컴포넌트의 재사용 1. 상품 관련 React-Router 설정 * 개발하려는 상품 기능은 목록 화면에서 새로운 상품을 등록할 수 있고, 조회 화면에서는 수정/삭제 화면으로 이동이 가능하도록 구성해야 한다. 상품 등록 시에는 상품의 이미지들과 함께 추가해서 등록하게 된다. * 상품 목록 페이지는 상품들의 이미지를 같이 보여주고..