본문 바로가기

springboot14

[스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기] #9 파일 업로드, 다운로드 게시판 스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기 #9 파일 업로드, 다운로드 게시판 다운로드 구현 지난글에서 업로드를 구현할 때 file 테이블에 외래키를 두어 file_board 테이블과 연동하도록 했습니다. 즉, 파일을 업로드 할 때 해당 게시판 번호인 'b_no'를 외래키로 받아 file 테이블에 FileVO 객체를 통해 저장하도록 했습니다. 게시글 상세내용에서 업로드한 파일을 확인하려면, 먼저 mapper를 통해 Database에서 해당 파일을 게시판 번호를 기반으로 조회해서 가져오면 됩니다. 그리고 컨트롤러와 detail.html에서 다운로드를 위한 작업을 해주면 됩니다. FileBoardMapper.java package com.example.demo.mapper; import j.. 2020. 3. 27.
[스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기] #8 파일 업로드, 다운로드 게시판 스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기#8 파일 업로드, 다운로드 게시판 파일업로드 구현 지난번까지 작성한 게시판에 파일첨부 및 다운로드 기능을 추가하겠습니다. 대략적인 흐름은 이렇습니다. 생성을 담당하는 insert.html에 파일첨부기능을 담당하는 태그를 작성하고, 태그의 th:action속성값으로 요청을 한 후, 요청을 받은 곳에서 파일 저장을 해야합니다. 하지만 컨트롤러에서 요청을 수행할 때 그냥 저장하는 코드를 작성하는 것이 아니라, 파일저장을 도와주는 객체(VO, Entity)와 Database에서 Table을 생성한 후 이를 통해 저장해야 합니다. 이제 작성하겠습니다. insert.html DOCTYPE html> 파일게시판 - 글작성 게시글작성 ... ... 지난번에 .. 2020. 3. 27.
[스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기] #7 Thymeleaf로 HTML페이지 작성 - 게시글 상세, 수정, 삭제 (7/n) 스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기#7 Thymeleaf로 HTML페이지 작성 - 게시글 상세, 수정, 삭제 Detail(게시글 상세) 작성 바로 진행하겠습니다. 지난번처럼 컨트롤러를 참고하며 작성하겠습니다. 우선, list.html에서 DB에서 자료를 가져와 출력하는 코드를 작성했습니다. 상세내용을 보기 위해 게시글을 클릭했을 때, 해당 게시글의 'b_no'를 가져오고 /fileBoard/detail/{bno} 이 URL에 'b_no'를 달아 'b_no'로 테이블을 조회해 작업을 요청하도록 코드를 작성했습니다. 그래서 컨트롤러를 다음과 같이 작성했습니다. @RequestMapping("/detail/{b_no}") private String fileBoardDetail(@Pat.. 2020. 3. 25.
[스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기] #6 Thymeleaf로 HTML페이지 작성 - 목록 출력, 게시글 작성 (6/n) [스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기]#6 Thymeleaf로 HTML페이지 작성 - 목록 출력, 게시글 작성 Thymeleaf를 이용해 HTML 페이지를 작성하려 합니다. 먼저 template 폴더에 하위폴더로 fileBoard폴더를 생성하세요. 여기에 Thymeleaf로 작업한 HTML페이지를 넣을겁니다. 이 폴더를 작성한 이유는 Controller에서 이 경로로 요청을 받겠다고 작성했기 때문입니다. 지난글에서 작성한 컨트롤러를 잠깐 확인해볼까요? @Controller@RequestMapping("/fileBoard")public class FileBoardController { @AutowiredFileBoardService fboardService; @RequestMapp.. 2020. 3. 25.
[스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기] #5 Controller 작성 (5/n) 스프링부트, 타임리프(Thymeleaf)로 파일게시판 만들기 #5 Controller 작성 html 페이지에서 요청받아 처리할 Controller를 작성합니다. 코드 내용이 생각보다 길기 때문에 오타에 주의하세요. Controller 패키지 내부에 작성합니다. FileBoardController.java package com.example.demo.controller; import java.util.ArrayList;import java.util.List; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stere.. 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 구현] #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.

티스토리툴바