[Spring Boot]/[JPA]17 [JPA] 블로그 테마 수정 & 백엔드 연동 https://themewagon.github.io/proman/ ProMan - Personal Portfolio HTML Template Full Name Designer themewagon.github.io 블로그 테마 선정 설치 경로 C:\Work\08_Pilot_Project\01_Blog\01_JPA\02_normal_thema\00_thema_down 블로그 테마 선정 및 환경 설 template typescript cmd 리액트 생성 npx create-react-app frontend-typescript --template typescript 경로 : index.html C:\Work\08_Pilot_Project\01_Blog\01_JPA\02_normal_thema\01_proman\.. 2023. 11. 4. [JPA] Creative-stylish-portfolio (블로그 테마) 연습 예제 stylish-portfolio easy_thema Blog 연습 예제 https://startbootstrap.com/theme/creative 기본 설정 # 설치 패키지 # 1) 메뉴 라이브러리 설치 npm i react-router-dom npm i @types/react-router-dom # 2) 벡엔드 연동 라이브러리 설치 npm i axios # 3) pre css 컴파일러 : sass npm i sass # 4) Material Page component 업그레이드 # 과거 v4 -> v5 변경 설치 npm i @mui/material @emotion/react @emotion/styled # 4-1) 소스에서 임포트 사용법 : import Pagination from '@mui/mater.. 2023. 11. 3. [JPA] 벡엔드 (02_SimpleDMS_Page) 반응형 게시판 벡엔드 순서 ReplyBoard.java -> ReplyBoardRepository.java-> ReplyBoardDto -> ReplyBoardService.java -> ReplyBoardController.java ReplyBoard.java package com.example.simpledms.model.entity.normal; import com.example.simpledms.model.common.BaseTimeEntity; import lombok.*; import org.hibernate.annotations.DynamicInsert; import org.hibernate.annotations.DynamicUpdate; import org.hibernate.annotations.SQLD.. 2023. 11. 2. [JPA] 프론트엔드 (02_SimpleDMS_Page) 반응형 게시판 플러그인 설치 CamelCase 단축키 (shift + alt + u) 프론트 ReplyBoardList.tsx -> app.tsx -> IReplyBoard.ts(벡엔드의 schema.sql 폴더 참고) -> ReplyBoardService.ts ReplyBoardList.tsx // ReplyBoardList.tsx : rfce import React, { useEffect, useState } from "react"; import TitleCom from "../../../components/common/TitleCom"; import { Link } from "react-router-dom"; import IReplyBoard from "../../../types/normal/IReplyBoard.. 2023. 11. 1. [JPA] Pilot Project 2 https://startbootstrap.com/ 무료 템플릿 다운 사용한 툴 // # 설치 패키지 # 1) 메뉴 라이브러리 설치 npm i react-router-dom npm i @types/react-router-dom // # 2) 벡엔드 연동 라이브러리 설치 npm i axios # 3) pre css 컴파일러 : sass npm i sass # 4) Material Page component 업그레이드 # 과거 v4 -> v5 변경 설치 npm i @mui/material @emotion/react @emotion/styled # 4-1) 소스에서 임포트 사용법 : import Pagination from '@mui/material/Pagination'; # 5) typescript jquer.. 2023. 10. 31. [JPA] Pilot_Project 블로그 테마별 알아보기 0) 홈메뉴(1St 페이지) 1) Simple_ bootstrap-icons 아이콘과 텍스트 페이지 만들기 2) Simple_ CountUp 숫자 카운팅 페이지 만들기 2-2) Simple_ CountUpExam 숫자 카운팅 페이지 만들기 예제 3) Simple_ TypedCom텍스트 타이핑 애니메이션 페이지 만들기 3-2) Simple_ TypedExam텍스트 타이핑 애니메이션 페이지 만들기 예제 4) Simple_ WowCom 텍스트 위치 변화 애니메이션 페이지 만들기 5) Complex_ SimpleLightboxCom 이미지 애니메이션 페이지 만들기 5-2) Complex_ SimpleLightboxComExam 이미지 애니메이션 페이지 만들기 예제 6) Complex_ OwlCarousel 이미.. 2023. 10. 30. 이전 1 2 3 다음