📌 주요 학습 내용1. Products 라우팅 구조 설계productsRouter.js 생성/products/list → 상품 목록 페이지/products/add → 상품 등록 페이지기본 경로(/products) 접근 시 /products/list로 리다이렉트const productsRouter = () => { const Loding = Loding....... const ProductsList = lazy(() => import("../pages/products/ListPage")) return [ { path: "list", element: }, { path: "", element: } ]}root 라우터 수정 → /products 하위 경로에서 ..

이번 글에서는 /products 라우팅 트리를 만들고, 상품 등록(Add) 폼에서 파일 업로드를 위해 FormData를 다루는 방법을 실습합니다.간단한 개요/products 아래에 IndexPage를 두고, 그 아래 자식 라우트로 list / add 페이지를 구성AddComponent에서 텍스트 입력 + 다중 파일 업로드를 FormData로 묶어 API 전송productsApi.js에 등록 API(postAdd) 분리1) 디렉터리 & 인덱스 페이지src/pages/products/IndexPage.jsimport { useCallback } from "react";import { Outlet, useNavigate } from "react-router-dom";import BasicLayout from ..

📌 주요 학습 내용 정리1. ✅ ModifyComponent 기능 구현getOne(tno)로 기존 데이터를 불러와 수정 화면 구성제목, 날짜, 완료 여부 수정 가능putOne(todo)로 수정, deleteOne(todo)로 삭제 가능처리 결과를 ResultModal을 통해 사용자에게 알림완료 후 목록 페이지 또는 상세 페이지로 이동if(result === '삭제성공') moveToList()else moveToRead(tno)2. ✅ ProductDTO 클래스 생성상품 정보(tno, pname, price, pdesc, delflag)와파일 리스트(files, uploadFileNames)를 포함Lombok의 @Builder.Default로 리스트 초기화3. ✅ application.propertie..

이번 강의에서는Todo 항목을 조회, 수정, 삭제할 수 있는 ModifyComponent를 만들고,처리 결과를 모달창(ResultModal)로 보여주는 방법까지 실습합니다.1. Todo 수정 컴포넌트(ModifyComponent.js) 작성src/components/ModifyComponent.jsimport { useEffect, useState } from "react";import { deleteOne, getOne, putOne } from "../../api/todoApi";import useCustomMove from "../../hooks/useCustomMove";import ResultModal from "../common/ResultModal";const initState = { ..

📌 주요 학습 내용1. 상세 페이지 컴포넌트(ReadComponent) 구현useEffect로 getOne(tno) API 호출받아온 데이터를 useState로 저장재사용 가능한 makeDiv()로 UI 구성하단에 목록으로 이동 / 수정 페이지로 이동 버튼 추가👉 useCustomMove 훅 사용 moveToList()}>List moveToModify(todo.tno)}>Modify2. 커스텀 훅(useCustomMove) 생성페이지 정보 (page, size)를 URL 쿼리에서 가져옴moveToList, moveToModify 함수 제공수정 페이지 이동 시에는 pathname: ../modify/${num} 형식으로 이동 처리const { moveToList, moveToModify } = use..

이번 글에서는 서버에서 Todo 데이터를 읽어서 보여주는 컴포넌트(ReadComponent, ListComponent)그리고 페이지 이동/쿼리 파라미터 처리를 쉽게 해주는 커스텀 훅(useCustomMove) 구현 방법을 배우겠습니다.1. Todo 상세 조회 컴포넌트(ReadComponent.js) 생성src/components/ReadComponent.jsimport { useEffect, useState } from "react"import { getOne } from "../../api/todoApi"import useCustomMove from "../../hooks/useCustomMove"const initState = { tno: 0, title: '', writer: '',..

70일차 수업 요약: Todo 목록 API 구축 및 클라이언트 호출 준비🔧 1. TodoService 인터페이스 확장페이징 기반 조회 메서드 추가PageResponseDTO list(PageRequestDTO pageRequestDTO);⚙️ 2. TodoServiceImpl 페이징 구현Pageable 객체를 생성하여 findAll 사용ModelMapper로 Todo → TodoDTO 변환총 게시물 수와 페이지 정보 포함한 PageResponseDTO 반환public PageResponseDTO list(PageRequestDTO pageRequestDTO) { Pageable pageable = PageRequest.of( pageRequestDTO.getPage() - 1, ..

이번 강의에서는 React에서 외부 서버(Spring Boot 등)와 통신하기 위해Axios 라이브러리를 설치하고,실제 REST API 요청을 별도 모듈(todoApi.js)로 관리하는 방법을 실습합니다.1. Axios 설치먼저 터미널(VSCode의 하단 터미널 창)에서 아래 명령어를 실행하여axios 라이브러리를 설치합니다.npm install axiosAxios는 Promise 기반의 HTTP 클라이언트로,서버와 비동기 통신(REST API 호출)에 매우 널리 사용됩니다.2. API 호출 모듈 분리src/api/todoApi.js 파일을 아래와 같이 생성합니다.import axios from "axios";// API 서버 주소(포트 및 주소는 환경에 맞게 수정 가능)export const API_S..

✅ 주요 학습 목표useParams, useNavigate, useSearchParams 등 React Router 훅 활용URL 파라미터 및 쿼리스트링(Query String) 처리버튼 클릭 시 페이지 이동 (navigate) 구현Todo 게시판의 상세 조회(Read) 및 수정/등록/목록 연동 구성📌 학습 내용 정리📁 1. ReadPage.jsx - 상세 보기 페이지useParams()로 URL 경로 변수(tno) 추출useSearchParams()로 쿼리스트링(page, size) 파싱useNavigate()를 활용하여 버튼 클릭 시 이동 기능 구현createSearchParams()로 쿼리스트링을 다시 조합하여 페이지 전환 시 전달const {tno} = useParams()const [quer..

이번 글에서는 Todo 등록(AddPage), 읽기(ReadPage), 수정(ModifyPage) 컴포넌트를 각각 만들고,페이지 이동(navigate) 기능을 통해 서로 연결하는 방법을 실습합니다.1. AddPage(등록 페이지) 컴포넌트 만들기src/pages/todo/AddPage.js 파일을 아래와 같이 작성합니다.const AddPage = () => { return ( Todo Add Page Component... )}export default AddPage;기능:Todo 등록 폼이 들어갈 자리입니다(현재는 기본 틀만 구현).2. ReadPage(읽기 페이지) 컴포넌트에서 이동 구현sr..