거니의 velog

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() 경로의..

(6) 하위 경로의 설정과 * 일반적으로 웹에서는 특정한 모듈에 접근했을 때의 기본적인 화면은 대시보드(Dashboard)와 같은 여러 상태를 한 눈에 볼 수 있는 화면이나 목록 페이지를 보여주는 것이다. 예제에서는 '/todo/list' 대신에 '/todo/' 경로의 링크만을 남겨두었는데, 이렇게 하는 이유는 모듈의 이름 자체가 하나의 경로가 된다는 원칙을 세우고 새로운 모듈들의 개발 방식을 통일하기 위함이다. * 프로젝트의 pages 폴더에 todo 폴더를 생성해 두고 위의 경로에는 존재하지 않는 IndexPage.js 파일을 추가한다. IndexPage.js는 BasicLayout을 이용해서 전체적인 레이아웃이 적용된 가운데서 다시 Todo와 관련된 메뉴나 화면을 구성한다. * 개발에 앞서 Basi..

* 웹사이트를 만들 때 중요한 작업 중 하나는 IA(Information Architecture)를 기획하는 것이다. IA는 쉽게 말해서 '메뉴 경로'를 정리한 것이다. 각 페이지 간의 링크나 을 통해서 필요한 정보를 조회하거나 처리하는 작업을 설계한다. * 리액트는 기본적으로 SPA(Single Page Application)이기 때문에 기존의 웹 프로그램과 동작 방식이 다르다. 기존의 웹 애플리케이션이 주로 페이지 단위로 개발되는 것에 비해 리액트는 여러 개의 컴포넌트(Component)를 사용해서 개발하는데, 하나의 페이지(Single Page)에서 보여주는 방식으로 작성되기 때문에 기존과는 전혀 다른 접근이 필요하다. 이번 장에서는 기존의 웹페이지와 유사하게 브라우저의 주소창에 따라 다른 화면에 ..