본문 바로가기

crud9

[스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기] #3 VO, Mapper, Service 작성 (3/n) 스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기 #3 VO, Mapper Service 작성 (3/n) 아래 사진은 지난번에 작성한 프로젝트 구조입니다. 이번에는 VO와 Mapper, 그리고 Service를 작성하겠습니다. VO(Entity) 작성 먼저 게시판에 필요한 객체를 생성합니다. 저는 게시글에 게시글 고유번호, 작성자, 제목, 내용, 작성일 이렇게 5가지를 넣으면 되지 않을까 생각했습니다. 그러면 이를 바탕으로 객체를 작성하겠습니다. bean 패키지 내에 FileBoardVO.java 파일을 생성하고 다음 코드를 작성합니다. Lombok을 이용해 @Data를 입력해서 setter()/getter(), toString() 등 귀찮은 작업을 자동으로 생성해주도록 합니다. @NoArgsC.. 2020. 3. 25.
[리액트, 스프링부트 연동하여 CRUD 구현] #10 - VO, Controller, Config, Mapper 작성 (10/10) 리액트, 스프링부트 연동하여 CRUD 구현#10 - VO, Controller, Config, Mapper 작성 이제 마지막입니다. 이번 글에서는 VO, Controller, Configuration, 그리고 Mapper를 작성할겁니다. 각자의 역할을 알아보겠습니다. 우리는 리액트에서 유저를 등록 할 때 "user"라는 객체에 정보를 담았고, ApiService를 통해 스프링부트에게 URL로 작업을 요청했습니다. 리액트 언어와 자바의 언어는 다르기 때문에 자바 언어로 객체를 받아주어야 합니다. 이를 VO(Value Object)라고 합니다. 그리고 URL로 들어온 요청을 처리해주는 곳이 Controller입니다. Controller에서는 요청한 URL과 method(get, post, delete 등)로.. 2020. 1. 23.
[리액트, 스프링부트 연동하여 CRUD 구현] #9 - MySQL에서 Database와 Table 생성하기 (9/10) 리액트, 스프링부트 연동하여 CRUD 구현#9 - MySQL에서 Database와 Table 생성하기 MySQL에서 스프링부트와 연동할 Database와 Table을 생성하도록 하겠습니다. 저는 mac에서 homebrew를 통해 MySQL을 설치했습니다. mac에서 MySQL을 실행할 때 서버를 수동으로 열고 닫아야 하더라구요. 터미널에서 아래 명령어로 서버를 실행하겠습니다. 윈도우에서는 안해주셔도 됩니다. $ mysql.server start 서버가 실행됐나요? 그렇다면 application.properties 파일에서 작성한 username과 password값으로 MySQL에 접속하겠습니다. 저는 application.properties 파일에서 username을 root로 적었고, password는.. 2020. 1. 22.
[리액트, 스프링부트 연동하여 CRUD 구현] #8 - 스프링부트에서 환경설정하기 (8/10) 리액트, 스프링부트 연동하여 CRUD 구현#8 - 스프링부트에서 환경설정하기 자, 드디어 자바에서 작업할 시간입니다. 작업하기 이전에 지난 글까지 우리가 작업한 리액트 앱의 위치를 조금 바꿔주겠습니다. 바꾸려고 하는 이유는 우리가 back-end(자바)와 front-end(리액트)를 구분하여 작업하고, back-end와 front-end의 언어와 이를 작업하는 에디터가 달라 명확히 구분해주어야 할 필요가 있기 때문입니다. 나중에 헷갈리지 않고 파일을 잘 정리한 상태에서 작업하기 위해 정리를 한다고 생각하시면 될 것 같습니다. 먼저, 기존 test 폴더의 이름을 React CRUD with SpringBoot 로 변경했습니다. 그리고 back-end, front-end 폴더를 2개 생성했습니다. 우리가 작.. 2020. 1. 21.
[리액트, 스프링부트 연동하여 CRUD 구현] #7 - 리액트 앱에 Material UI 적용하기 (7/10) 리액트, 스프링부트 연동하여 CRUD 구현#7 리액트 앱에 Material UI 적용하기 React Material UI는 리액트 앱을 빠르고 쉽게 디자인할 수 있는 프레임워크입니다. 자세한 내용은 공식 홈페이지를 참고하세요. 보통 CSS, Styled-Components, 혹은 BootStrap을 사용합니다. 하지만 우리는 리액트를 공부하고 있기에, 리액트 프레임워크 중 하나인 Material UI를 사용하겠습니다. Material UI의 장점으로는 쉽고 빠르게 앱을 꾸밀 수 있다는 겁니다. 그리고 레이아웃, 내비게이션 등 다양한 요소들을 컴포넌트 형식으로 지원합니다. Material UI를 사용하기 위해서는 Material UI를 CLI, 즉 터미널이나 명령프롬포트를 통해 다운받아야 합니다. 아래의 .. 2020. 1. 20.
[리액트, 스프링부트 연동하여 CRUD 구현] #6 - Axios로 Service 생성 (6/10) 리액트, 스프링부트 연동하여 CRUD 구현하기#6 Axios로 Service 생성 이번엔 지금껏 미뤄왔던 ApiService를 작성하겠습니다. ApiService는 스프링부트 서버(보통은 'http://localhost:8080/' 으로 열립니다.)와 연결해주는 역할을 합니다. 즉, 리액트에서 무언가 요청을 하면 이를 스프링부트에서 받아 MySQL에서 데이터를 가져오거나 처리합니다. 전형적인 MVC 패턴이라고 할 수 있겠네요. 리액트에서 이를 구현하기 위해선 Axios를 사용합니다. 기존 HTML이나 JSP에서 사용한 AJAX의 역할을 한다고 생각하시면 될 것 같습니다. Axios 또한 리액트에서 공식으로 지원해주지 않습니다. 지난번에 설치한 라우터처럼 3rd-party 라이브러리 형식으로 사용합니다. .. 2020. 1. 19.
[리액트, 스프링부트 연동하여 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 구현] #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.