거니의 velog

* 최근의 애플리케이션 개발 방향은 화면을 구성하는 프론트엔드와 화면에 필요한 데이터를 제공하는 백엔드의 철저한 분리이다. 이런 구조에서 프론트엔드 애플리케이션에 데이터를 전달하는 서버를 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 에 따라서 원하는 화면을 보여..