Backend
Frontend
Database & Infra
Project
codesche’s blog
/
Education
/
코드로 배우는 React with 스프링부트 API 서버
Backend
Frontend
Database & Infra
Project
codesche’s blog
/
Education
/
코드로 배우는 React with 스프링부트 API 서버
Share
Backend
Frontend
Database & Infra
Project
🦾
코드로 배우는 React with 스프링부트 API 서버
생성일
2025/01/24 05:52
태그
inflearn
게시일
2025/04/17
코드로 배우는 React with 스프링부트 API 서버
Search
•
node.js 설치
◦
리액트 개발을 위해서는 JavaScript 런타임인 node.js 필요
◦
https://nodejs.org/ko
◦
LTS 버전 설치
◦
명령 프롬프트로 node.js 설치 확인
•
폴더 생성 후 리액트 프로젝트 생성하기
리액트 프로젝트 생성
참고링크:
https://tailwindcss.com/docs/installation
•
VSC 터미널에 tailwind css 설치
•
taliwind.config.js의 content를 다음과 같이 설정
•
src 폴더의 index.css 를 다음과 같이 설정
•
app.js를 수정한다.
Tailwind CSS 설정
•
MySQL DB 연동 후 DB와 계정 생성
DB와 부트 프로젝트 생성
React-Router 설정
공통레이아웃설정
Outlet을 이용한 서브메뉴
경로값 추출을 위한 useParams
useSearchParams와 useNavigate
동적 페이지 이동
React-Router
부트 프로젝트 생성 및 확인
엔티티의 테스트
목록(페이징) 처리 구현
서비스계층 만들기
페이지처리를 위한 DTO 설계
스프링부트와 API 서버
•
엔티티 설계
•
엔티티
◦
엔티티 클래스 / 엔티티 객체 의 두 가지 의미가 있음
•
두 가지 경우
◦
테이블 설계를 먼저 하는 경우
◦
테이블 설계를 하지 않고 자동으로 지정하는 경우
엔티티 클래스 만들기
•
build.gradle 설정
•
QTodo
◦
인텔리제이 기준 오른쪽 사이드바의 Other 메뉴에서
complie.java
실행
•
TodoRepository - TodoSearch 추가
•
TodoSearch 인터페이스 생성
•
TodoSearchImpl 생성 - 여기서는 querydsl 활용하여 쿼리 구성 및 페이징 처리
Querydsl 설정하기
•
dto 생성
•
service
◦
인터페이스 상에 entity → dto 로 dto → entity로 변환하는 코드 작성
•
serviceimpl
•
테스트 코드 작성
DTO 설정과 서비스 계층 만들기
