Spring&React Project
1.01. 프로젝트 설정
먼저 리액트 프로젝트를 생성해준다.최근 리액트에서는 CSS 설정을 편하게 하기 위해서 Tailwind CSS 라이브러리를 많이 사용한다고 한다. 이번 프로젝트에서는 Tailwind CSS 라이브러리를 사용할 것이다.Tailwind CSS 설정을 위해서 'npx tail
2.02. React-Router 설정
현재 폴더 구조는 다음과 같다. root.js root.js는 createBrowserRouter()를 통해서 어떤 경로에는 어떤 컴포넌트를 보여줄 것인지를 결정하는 역할을 한다. App.js 페이지용 컴포넌트 추가와 설정 MainPage.js AboutPag
3.03. URL Params, useSearchParams(), useNavigate(), useSearchParams()
현재 하나의 라우팅 설정에 children 속성을 이용해서 중첩적인 라우팅 설정을 적용할 수 있지만 페이지가 많아지면 페이지가 너무 복잡해지는 단점이 있다. 그래서 별도의 파일을 만들어 관리하고자 한다. todoRouter.js 리다이렉션 처리 '/todo/' 경로로
4.04. Querydsl 설정 및 사용법(최신 버전)
build.gradle에 다음의 코드를 추가해준다.이후 compile.java를 실행해준다.그러면 Qdomain이 생기게 되고 세팅이 완료된다.TodoSearchTodoRepositoryTodoSearchImpl인터페이스의 구현체 클래스의 이름은 '인터페이스+Impl'
5.05. 페이징 처리
페이징 처리가 되는 목록 데이터는 크게 1) 해당 페이지의 TodoDTO 리스트와 2) 페이지 번호, 전체 데이터 수, 이전/다음 페이지 처리에 필요한 부가적인 데이터로 구성될 수 있다. 부가적인 데이터를 프론트엔드쪽에서 처리할 수도 있지만 서버에서 데이터의 가공이 많
6.06. @RestControllerAdvice
API 서버는 화면이 없는 상태에서 개발되기 때문에 잘못된 파라미터 등으로 인한 서버 내부의 예외 처리를 @RestControllerAdvice로 처리해 주는 것이 안전하다.CustomControllerAdvice
7.07. Formatter를 이용한 LocalDate 처리, CORS관련 설정
날짜/시간은 브라우저에서 문자열로 전송되지만, 서버에서는 LocalDate 혹은 LocalDateTime으로 처리된다. 그렇기 때문에 이를 변환해 주는 Formatter를 추가해서 이 과정을 자동으로 할 수 있도록 설정한다.@Configuration을 통해 등록해준다.
8.08. Ajax 통신 처리
9.09. 파일 업로드
파일 업로드 처리 파일 업로드에 필요한 모든 기능은 이미 스프링 Web 관련 라이브러리에 존재하므로 프로젝트의 application.properties에 이와 관련된 설정을 추가한다. 예제에서는 프로젝트의 실행 폴더에 upload 폴더를 생성해서 파일들을 보관하도록