거니의 velog

6. 등록 컴포넌트와 모달창 처리 * 지금껏 작성한 조회나 목록 기능과 달리 남은 기능들은 다음과 같은 공통점이 있다. - GET 방식이 아니라 POST/PUT/DELETE와 같이 다른 방식으로 호출 - API 서버 호출의 결과가 주로 성공/실패와 같은 단순한 결과 - 처리 후 다른 경로로 이동하는 경우가 많음(리다이렉트) * 과거의 서버사이드 프로그래밍은 서버에서 처리한 후에 결과 메시지를 모두 만들어서 전송하거나 PRG(Post-Redirect-Get) 방식으로 다른 경로를 호출하는 방식이었다. 리액트와 같은 애플리케이션에서는 기본적으로 모든 처리는 현재 화면을 중심으로 처리된다. 현재 화면에서 서버를 호출하고 결과 역시 현재 화면에서 처리하고 이후에 이동하는 방식이다. * 등록 처리는 입력하는 화면..

5. 목록 데이터 처리 * 조회는 단순하게 서버의 데이터를 보여주는 기능만으로 구현할 수 있지만, 목록 데이터는 페이지 처리나 여러 링크 등이 추가되어서 더 복잡한 구성을 하게 된다. 가장 먼저 구현할 기능은 브라우저 경로에 있는 쿼리스트링으로 페이지 번호/사이즈에 따라서 서버를 호출하고 결과를 출력하는 것이다. (1) 목록 데이터 가져오기 * 해당 데이터를 가져오는 기능은 useEffect()를 사용해서 구현하는 것으로 컴포넌트는 components/todo 폴더 내에 ListComponent로 작성한다. * ListComponent는 useCustomMove()를 이용해서 현재 경로의 page와 size를 구성하고 API 서버를 호출한다. 서버의 데이터는 dtoList라는 배열 데이터와 pageNum..

4. 네비게이션 관련 커스텀 훅 * ReadComponent가 완성되기 위해서 남은 작업은 다시 목록 화면으로 이동하는 기능이 추가되어야 한다. 리액트에서 화면의 구성은 컴포넌트를 이용해서 처리할 수 있지만, 컴포넌트들 내부에서 만들어지는 공통적인 코드의 경우 커스텀 훅(custom hook)을 이용해서 작성한다. * 예제의 경우 조회 화면에서는 다시 목록 화면으로 이동해야 하는 기능이 필요하고 이를 구현하기 위해서 useNavigate()나 useSearchParams를 이용해야만 한다. 이렇게 만들어진 기능은 등록이나 수정/삭제 화면에서도 동일하게 사용된다. (1) 목록 페이지로 이동 * 커스텀 훅을 제작하기 위해서 프로젝트의 src 폴더에 hooks 폴더를 추가하고 useCustomMove.js 파..

* 대부분의 프론트엔드 관련 기술들은 서버와의 비동기 통신을 포함한다. 리액트 역시 Ajax로 서버의 데이터를 이용해서 필요한 기능을 완성한다. 이번 장은 이전에 구성한 서버를 이용해서 Todo의 기능을 완성해 보자. * 이번 장의 개발 목표는 다음과 같다. (1) Axios 라이브러리를 이용한 서버와의 통신 (2) useEffect()를 활용한 비동기 처리와 상태 변경 (3) 커스텀 훅을 이용한 공통 코드 재사용하기 (4) 컴포넌트에서 모달창을 이용해서 결과 보여주기 1. 개발 목표의 이해 * React-Router로 브라우저의 주소창을 처리했고, 스프링 부트로 서버사이드에서 원하는 데이터를 처리할 수 있게 되었다면 이제 각 화면 내부에 필요한 컴포넌트들을 추가해서 실제 내용을 구현해 본다. * 목록 ..

6. @RestControllerAdvice * API 서버는 화면이 없는 상태에서 개발되기 때문에 잘못된 파라미터 등으로 인한 서버 내부의 예외 처리를 @RestControllerAdvice로 처리해 주는 것이 안전하다. * 예를 들어 존재하지 않는 번호의 Todo를 조회하면 NoSuchElementException 에러가 발생한다. - http://localhost:8080/api/todo/33 * 또한 페이지 번호를 숫자가 아닌 문자로 전달하면 MethodArgumentNotValidException 에러가 발생한다. - http://localhost:8080/api/todo/list?page=A&size=10 * 이러한 예외를 처리하기 위해서 controller 패키지 내에서 advice 패키지를..

5. 목록 처리와 DTO* 페이징 처리가 되는 목록 데이터는 크게 1) 해당 페이지의 TodoDTO 리스트 2) 페이지 번호, 전체 데이터의 수, 이전/다음 페이지 처리에 필요한 부가적인 데이터 로 구성될 수 있다. * 부가적인 데이터를 리액트와 같은 프론트엔드 쪽에서 처리할 수도 있지만 서버에서 데이터의 가공이 많을수록 리액트에서 작업이 편해진다. * TodoRepository에서 목록 데이터는 Spring Data JPA 관련된 API들을 이용하기 때문에 Pageable 타입의 파라미터를 사용하고 리턴 타입 역시 Page의 형태로 결과를 생성해 낸다. 엔티티와 그에 관련된 처리는 가능하면 최소한의 영역에서만 처리하고 나머지는 DTO를 이용하는 것이 안전하기 때문에 TodoRepository의 Page..

3. 서비스 계층과 DTO 처리* 엔티티 객체는 단순한 자바의 인스턴스가 아니라 JPA를 통해서 관리되고 있는 객체(영속 객체)이다. 따라서 실제 데이터를 서비스할 때는 엔티티 객체의 내용물을 복사해서 사용하는 DTO를 이용한다. * 프로젝트 내에서 dto 패키지를 생성하고 TodoDTO를 생성한다.package com.unlimited.mallapi.dto; import java.time.LocalDate; import com.fasterxml.jackson.annotation.JsonFormat; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; @Data..

2. TodoRepository 테스트 * 스프링 부트는 기본적으로 테스트 환경을 지원하기 때문에 이미 생성되어 있는 test 폴더를 이용해서 테스트 코드를 작성하고 실행할 수 있다. 프로젝트에서는 Lombok의 로그를 좀 더 적극적으로 활용하기 위해서 테스트 환경에서도 Lombok을 이용할 수 있는 설정으로 변경한다. dependencies { (...) testCompileOnly 'org.projectlombok:lombok' testAnnotationProcessor 'org.projectlombok:lombok' } * build.gradle의 설정은 프로젝트 전체에 영향을 주기 때문에 주의해야 한다. build.gradle 설정을 변경한 후에는 새로운 설정이 반영될 수 있도록 작업 영역을 초기..

* 최근의 애플리케이션 개발 방향은 화면을 구성하는 프론트엔드와 화면에 필요한 데이터를 제공하는 백엔드의 철저한 분리이다. 이런 구조에서 프론트엔드 애플리케이션에 데이터를 전달하는 서버를 API 서버라고 한다. * API 서버는 화면을 구성하는 대신에 데이터를 전달하는 것만을 처리한다. 기존의 GET/POST 전송 방식을 벗어나 PUT/DELETE/OPTIONS 등의 다양한 방식을 활용하고 XML이나 JSON 등을 이용하는데 이처럼 다양한 방식으로 특정한 자원을 처리하는 서비스를 'RESTful'하다고 표현한다. 이번 장에서는 스프링 부트를 이용해서 RESTful한 API 서버를 구성해 보자. * 이번 장의 개발 목표는 다음과 같다.(1) Spring Data JPA를 이용한 데이터 처리 (2) DTO와..

(10) 경로 처리를 위한 useParams()* 위의 화면과 같이 특정 번호의 경로를 사용하는 경우 컴포넌트에서는 주소창에 있는 경로의 일부를 활용해야 한다. React-Router에서는 useParams()를 이용해서 지정된 변수를 추출할 수 있다. ReadPage 컴포넌트에서 tno 변수로 전달되는 값을 추출해서 출력한다.import React from "react"; import { useParams } from "react-router-dom"; const ReadPage = () => { const { tno } = useParams(); return ( Todo Read Page Component {tno} ); }; export default ReadPage;* useParams() 경로의..