이번 글에서는 백엔드/프론트엔드 코드에서 JWT가 실제로 어떻게 흘러가는지를 확인해보도록 하겠습니다.백엔드 코드 : https://github.com/AppleMoon98/Study_FrontEnd프론트엔드 코드 : https://github.com/AppleMoon98/Study_Backend1. 로그인부터 토큰을 받기까지(프론트) 로그인 요청 보내기src/components/member/LoginComponent.js사용자가 이메일, 비밀번호를 입력하면, handleClickLogin을 통해 useCustomLogin().doLogin() 호출 src/hooks/useCustomLogin.jsdoLogin은 리덕스 thunk인 loginPostAsync를 디스패치 src/slices/LoginSlic..

이번 글에서는 /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 ..

이번 강의에서는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 = { ..

이번 글에서는 서버에서 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: '',..

이번 강의에서는 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..

이번 글에서는 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..

이번 글에서는 라우터 파라미터(useParams), 쿼리스트링(useSearchParams), 페이지 이동(useNavigate) 등을 활용해Todo의 읽기/수정/등록/목록 페이지를 연결하고, URL의 값을 활용하는 방법을 배웁니다.1. ReadPage: URL 파라미터, 쿼리스트링, 페이지 이동src/pages/todo/ReadPage.js 파일을 아래와 같이 작성합니다.import { useCallback } from "react";import { createSearchParams, useNavigate, useParams, useSearchParams } from "react-router-dom";const ReadPage = () => { const { tno } = useParams() ..

1. BasicLayout.jsBasicLayout은 Spring boot에서 layout의 역할을 하고 있습니다.저희가 사용하기 앞서 Spring boot에서 사용한 layout과는 무슨 차이가 있고,어떤 내용으로 되어있는지 알아보려고 합니다. import BasicMenu from "../components/menu/BasicMenu"BasicMenu는 상단 메뉴 컴포넌트로 이 레이아웃에 임포트를 하였습니다.BasicMenu라는 이름으로 스크립트에서 사용할 수 있습니다. const BasicLayout = ({ children }) => { ... }BasicLayout은 함수형 컴포넌트입니다.props를 구조분해 할당하여 children을 받고,children은 이 레이아웃 내부에 어떤 페이지 컴포..

이번 강의에서는 중첩 라우터와 Outlet 컴포넌트를 활용해 Todo 페이지의 기본 구조를 설계합니다.1. IndexPage(인덱스 페이지) 만들기src/pages/todo/IndexPage.js 파일을 아래와 같이 작성합니다.import { Outlet } from "react-router-dom";import BasicLayout from "../../layouts/BasicLayout"const IndexPage = () => { return( List Add );}export default I..

이번 강의에서는 리액트 프로젝트에서 레이아웃 컴포넌트(BasicLayout)와 메뉴 컴포넌트(BasicMenu)를 구현하고, TailwindCSS로 스타일링하는 방법을 실습합니다.1. BasicLayout 컴포넌트 만들기src/components/layout/BasicLayout.js 파일을 아래와 같이 생성합니다.import BasicMenu from "../menu/BasicMenu"const BasicLayout = ({children}) =>{ return( {children} Sidebar ..