거니의 velog

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)에서 보여주는 방식으로 작성되기 때문에 기존과는 전혀 다른 접근이 필요하다. 이번 장에서는 기존의 웹페이지와 유사하게 브라우저의 주소창에 따라 다른 화면에 ..

* 이 장에서는 앞으로 작성할 예제 프로젝트 개발을 위한 프로그램의 설치와 환경설정을 진행한다. 예제 프로젝트는 리액트(React)로 단독 애플리케이션을 개발하고 스프링 부트를 이용해서 데이터를 제공하는 API 서버를 구성할 것이다. 코드 개발에 필요한 VS Code를 사용하고 리액트와 스프링 부트 프로젝트를 독립적으로 구성하도록 한다. * 이번 장의 개발 목표는 다음과 같다. 1. 리액트 개발 환경설정 2. 리액트 프로젝트 초기화 3. MariaDB 환경설정 4. 스프링 부트 프로젝트 생성과 실행 확인 1. 리액트 환경설정 * 리액트 개발을 위해서는 node.js를 설치해야 한다. 아래의 주소에서 다운로드 할 수 있으며 LTS 버전이 오랫동안 지원되므로 이를 설치한다. https://nodejs.org..

1. 리액트와 스프링 부트를 이용해 프론트엔드와 백엔드를 분리한다면? * 풀스택 프로젝트에 들어가고자 하는 목적은 '리액트와 스프링 부트를 어떻게 활용할 것인가'이다. 최근 전자정부 프레임워크 4.0 이상부터 스프링 부트와 리액트가 공식적으로 도입되려는 모습을 보이고 있다. 생산성의 향상과 더불어 웹 애플리케이션의 성능 향상에 도움이 되는 프레임워크를 도입하고자 하는 모습은 고무적이라 할 수 있다. * 그 중에서 리액트는 많은 기능을 제공하지만, 그 자체로 프레임워크는 아니기 때문에 설계의 자유도가 높고 활용하는 라이브러리에 따라 구현 방식도 천차만별로 달라진다. 따라서, 기본 웹 개발에서는 예상하지 못했던 문제점들이 종종 나타나곤 한다(예를 들어 REST API 의 URI 에 따라서 원하는 화면을 보여..

[더 할 수 있는 작업 ?] * 이제 프로젝트 개발은 끝났다. 여기서는 앞으로 여러분이 더 할 수 있는 작업을 살펴보자. [1] 코드 스플리팅 * 현재 프로젝트에서 가장 큰 자바스크립트 파일 크기는 약 138KB 이다. 현재는 프로젝트 규모가 그리 크지 않으므로 코드 스플리팅이 반드시 필요한 상황은 아니다. 하지만 프로젝트의 기능이 더 많이 추가되어 500KB를 넘어가기 시작하면 코드 스플리팅을 생각해 보는 것이 좋다. * 코드 스플리팅은 프로젝트 규모가 커졌을 때 도입하는 것이 바람직하기는 하지만, 프로젝트를 장기적으로 유지 보수할 것 같다면 초반부터 도입하는 것을 권장한다. 왜냐하면, 개발을 계속하면서 결국 프로젝트의 규모가 커질 확률이 높기 때문이다. [2] 서버 호스팅 * 여러분이 만든 웹 애플리..

2. 포스트 삭제 * 마지막으로 구현할 프로젝트의 기능은 포스트 삭제이다. 이에 대한 작업을 마치고 나서 프로젝트를 마무리할 것이다. * 삭제 버튼을 누를 때 포스트를 바로 삭제하는 것이 아니라, 사용자의 확인을 한 번 더 요청하고 나서 삭제하려고 한다. 이렇게 하는 이유는 사용자가 실수로 삭제하는 것을 방지하기 위해서이다. * 사용자에게 한 번 더 확인을 요청하기 위해 모달 컴포넌트를 만들 것이다. 모달(modal)이란 페이지에 나타난 내용 위에 새 레이어로 어떠한 창을 보여 주는 것을 말한다. * 이 프로젝트에서는 모달 컴포넌트를 포스트 읽기 페이지에서만 사용하지만, 컴포넌트의 재사용성을 고려하여 common 디렉터리에 만들어 볼 것이다. * AskModal 이라는 컴포넌트를 다음과 같이 만들어 보자..