본문 바로가기

스프링부트14

[리액트, 스프링부트 연동하여 CRUD 구현] #5 - Routing Component 생성 및 파일 정리 (5/10) 리액트, 스프링부트 연동하여 CRUD 구현하기#5 Routing Component 생성 및 파일 정리 이번엔 우리가 작성하고있는 리액트 앱에 라우팅을 적용하려 합니다. 리액트에서는 자체적으로 라우팅 라이브러리를 지원해주지 않습니다. 그래서 react-router-dom 이라는 3rd-party 라이브러리가 필요합니다. 이 라이브러리를 터미널(혹은 명령프롬포트)에서 명령어로 다운받겠습니다. 현재 리액트 프로젝트를 작성하고 있는 경로에서 다운받아주셔야 합니다. $ yarn add react-router-dom 위 명령어를 입력한 후 아래와 같이 설치가 진행됩니다. 설치가 완료되었나요? 그렇다면 우리는 이제 라우트를 지정할 수 있습니다. 컴포넌트에 주소를 부여해 해당 주소로 접속하면 해당 컴포넌트를 보여줄 수.. 2020. 1. 18.
[리액트, 스프링부트 연동하여 CRUD 구현] #4 - Add/Edit User Component 생성 (4/10) 리액트, 스프링부트 연동하여 CRUD 구현하기#4 Add/Edit User Component 생성 지난시간엔 CRUD에서 R(Read, 리스트 불러오기)과 D(Delete, 삭제)를 작성했다면, 이번에는 나머지를 작성하려 합니다. 들어가기 전, 프로젝트 구조를 잡기 위해 오늘 작성할 파일들을 아래와 같이 생성합니다. 파일을 생성했다면, 이젠 컴포넌트를 작성해볼까요. Add User Component 이전글에서 작성한 UserListComponent.jsx 파일을 다시 확인할까요? 유저를 추가하기 위해 "Add User" 버튼을 누르면 에서 설정한 onChange()가 실행이 되면서 "/add-user"로 이동하도록 했습니다. 우리는 route에서 "/add-user"로 이동하면 이제 곧 작성할 AddUs.. 2020. 1. 17.
[리액트, 스프링부트 연동하여 CRUD 구현] #3 - User List Component 생성 및 Delete 구현 (3/10) 리액트, 스프링부트 연동하여 CRUD 구현하기#3 User List Component 생성 및 Delete 구현 이번 글에서 CRUD에서 R과 D를 담당하고 있는 Read와 Delete를 생성하겠습니다. 위키디피아에서 CRUD를 다음과 같이 설명합니다. "대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다." - 위키디피아 즉, 게시판의 기본이자 핵심 기능인 글 목록보기, 생성, 수정 그리고 삭제를 일컫는 말이다.글 게시 순서는 읽기, 생성, 갱신 및 삭제 순으로 할 것이다. 왜 이렇게 하냐 하면.. 2020. 1. 16.
[리액트, 스프링부트 연동하여 CRUD 구현] #2 - 리액트 프로젝트 생성 및 기본개념 설명 (2/10) 리액트, 스프링부트 연동하여 CRUD 구현하기#2 리액트 프로젝트 생성 및 기본개념 설명 들어가기 앞서, 저의 구축 환경은 이렇습니다. OS - macOS Catalina (버전 10.15.2)React JS - Visual Studio Code (npm 6.9.0)Spring Boot - Spring Tool Suite 4 (4.4.1. RELEASE)Database - MySQL (Ver 8.0.18) 리액트 환경 구성 리액트 프로젝트를 생성하고 실행하려면 CLI(Command Line Interface, 명령줄 인터페이스)로 진행해야 합니다. CLI는 간단히 말해서 윈도우의 명령프롬포트(커맨드), 리눅스의 터미널이라 생각하시면 됩니다. 먼저 진행하기 위해선 npm을 설치해야 합니다. 저의 npm 버.. 2020. 1. 15.
[리액트, 스프링부트 연동하여 CRUD 구현] #1 - 구상 (1/10) 리액트, 스프링부트 연동하여 CURD 구현하기#1 구상 이 튜토리얼에서 리액트(React Js)와 스프링부트(Spring-boot)를 연동하여 간단한 CRUD를 구현하고자 합니다. 스프링부트를 사용하면서 타임리프나 JSP를 사용했었는데, 대세(?)에 따라 프론트앤드에서 리액트와 뷰를 사용하고 싶었습니다. 보통 리액트와 뷰를 사용하면 서버를 Node JS를 사용하는데, 저는 자바밖에 배운게 없어서 백앤드를 스프링부트로 진행할 수 밖에 없었습니다. "Node JS를 배우면 되지 않느냐!" 라고 하겠지만, 그러기에는 프로젝트를 진행할 시간이 부족하기에 과감히(?) 포기하기로 했습니다. 프론트앤드를 리액트, 백앤드를 자바로 사용하기로 결정하고 나서 이를 어떻게 구현해야 할지 구글링을 엄청 해보았습니다. 여러 방.. 2020. 1. 14.