[ 69일차 29~32 ] 수업 정리 - Backend

✅ 69일차 수업 요약: Todo 프로젝트 백엔드 서비스 구현📦 도메인 클래스: Todo.java@Entity, @Table(name = "tbl_todo")를 통해 tbl_todo 테이블과 매핑.필드 구성:id: PK, auto-incrementtitle: 할 일 제목writer: 작성자complete: 완료 여부 (boolean)dueDate: 마감일 (LocalDate)@Entity@Table(name = "tbl_todo")public class Todo { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String title; private String writer; ..

Spring Boot 32강 - Repository와 Service 계층 설계

이번 강의에서는 데이터베이스와 직접 연결되는 Repository 계층과비즈니스 로직을 처리하는 Service 계층을 설계하는 방법을 살펴봅니다.1. Repository 계층폴더 및 파일 구조mall_d69/└── src/ └── main/ └── java/ └── com/ └── example/ └── mall/ └── repository/ └── TodoRepository.javaTodoRepository 코드 예시package com.example.mall.repository;import com.example.mal..

Spring Boot 31강 - DTO 설계 및 페이징 구조: TodoDTO, PageRequestDTO, PageResponseDTO

이번 강의에서는 실제 서비스에서 화면과 데이터를 주고받을 때 사용하는 DTO(Data Transfer Object) 구조와페이지네이션(페이징) 처리를 위한 DTO 설계를 살펴봅니다.1. DTO란 무엇인가?DTO(Data Transfer Object)는 엔티티와 분리하여 화면-서비스-컨트롤러 간 데이터를 전달하는 역할을 합니다.실무에서는 엔티티 직접 노출을 지양하고, DTO를 통해 필요한 정보만 주고받는 것이 표준입니다.2. DTO 폴더 구조src/main/java/com/example/mall/dto/ 폴더에 아래와 같은 파일이 있습니다.mall_d69/└── src/ └── main/ └── java/ └── com/ └── example..

Spring Boot 30강 - 도메인 설계: Todo 엔티티 클래스

이번 글에서는 Todo 관리 애플리케이션의 핵심인 도메인(Entity) 클래스를 직접 살펴봅니다.Spring 프로젝트에서 도메인 클래스는 데이터베이스 테이블과 매핑되는 "핵심 데이터 구조"입니다.1. 도메인 폴더 구조src/main/java/com/example/mall/domain/ 폴더에는 Todo.java 엔티티가 위치합니다.mall_d69/└── src/ └── main/ └── java/ └── com/ └── example/ └── mall/ └── domain/ └── Todo.java2. Todo 엔티티 ..

Spring Boot 29강 - Spring Boot Todo 프로젝트 구조와 환경설정

이번 글에서는 프론트는 React가, 백은 Spring Boot가 받는 형식으로 진행할 것이기 때문에,Spring Boot를 이용하는 글도 잠깐 이곳에 적혔습니다. 나중에 정리가 끝난다면, 이 글은 Spring Boot로 이동하고 React 쪽에 제가 글을 따로 걸어두겠습니다.1. 프로젝트 폴더 구조프로젝트를 생성하면 아래와 같은 폴더 및 파일 구조가 만들어집니다.mall_d69/├── build.gradle├── settings.gradle├── src/│ ├── main/│ │ ├── java/│ │ │ └── com/│ │ │ └── example/│ │ │ └── mall/│ │ │ ├── MallAp..

✅ 주요 학습 목표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..

이번 글에서는 라우터 파라미터(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은 이 레이아웃 내부에 어떤 페이지 컴포..

✅ 주요 학습 목표공통 레이아웃 컴포넌트(BasicLayout) 구현공통 메뉴 컴포넌트(BasicMenu) 분리중첩 라우팅(Nested Routing) 적용 및 Outlet 사용Todo 페이지 구성과 라우터 분리(todoRouter)📌 학습 내용 정리📁 1. 공통 레이아웃 컴포넌트: BasicLayout.jsx화면 구조를 2열로 구성 (main, sidebar)자식 페이지 컴포넌트를 {children}으로 삽입전체 페이지에 적용되는 공통 틀 {children} Sidebar📁 2. 공통 메뉴 컴포넌트: BasicMenu.jsxReact Router의 를 사용해 페이지 전환로그인 버튼도 포함전체 네비게이션 바 구성MainAboutTodo📁 3. Todo 인덱스 페이지: IndexPage.jsxB..