[Spring] 영화 리뷰 프로젝트 적용하기

in Study on Spring, Web
[Spring] 영화 리뷰 프로젝트 적용하기

파일 업로드 기능을 활용해 영화에 대한 정보를 등록하고, 사용자들이 영화 리뷰를 기록하는 프로젝트를 작성해 봅니다.


프로젝트 구현을 위해 이전에 다루었던 Thymeleaf 레이아웃 기능들을 활용해 화면을 구성합니다.
화면 구성을 위해 필요한 패키지 및 파일을 복사해 프로젝트에 추가합니다.


1. MovieController 생성


1

controller 패키지에 MovieController 클래스를 추가하고 영화 등록에 사용할 ‘/movie/register’를 추가합니다.

2. register.html - 폼 작성


2

register.html은 레이아웃을 적용한 구조로 작성하고 내부에 <form> 태그를 이용해 영화 데이터를 등록할 수 있는 화면을 구성합니다.

3. MovieDTO 생성


3

엔티티 클래스의 처리는 이미 완료되었기 때문에 DTO와 서비스 계층을 구성하는 작업을 수행합니다.
MovieDTO는 Movie 엔티티를 기준으로 작성합니다.
MovieDTO는 조회화면에서 보여질 영화의 번호, 제목, MovieImageDTO를 요소로 가지는 List를 가집니다.

4. MovieImageDTO 생성


4

MovieDTO 내부에는 업로드된 영화 이미지 파일들의 정보를 포함해야 하기 때문에 MovieImageDTO 클래스도 작성합니다.
MovieImageDTO는 이미지의 uuid, 이미지명, 저장경로를 요소로 가지고 이미지의 URL을 반환하는 getImageURL()과 섬네일의 URL을 반환하는 getThumbnailURL() 메소드를 가집니다.

5. MovieService 생성


5

프로젝트 내에 service 패키지를 추가하고 MovieService 인터페이스를 작성합니다.
MovieService에는 우선 영화를 등록한 뒤 mno를 반환하는 register()를 선언합니다.

6. MovieServiceImpl 생성


6

MovieService를 구현할 MovieServiceImpl을 생성합니다.
서비스계층에서 영화에 관한 JPA를 처리하기 위해 MovieRepository를 주입합니다.
앞서 선언한 register()는 우선 null값만을 반환하도록 작성해둡니다.

7. MovieServiceImpl - dtoToEntity() 작성


7

MovieDTO를 Movie 엔티티 객체로 변환하기 위한 dtoToEntity()를 추가합니다.
이전 예제들과 달리 Movie 객체뿐 아니라 MovieImage 객체들도 같이 처리해야 합니다. 때문에 두 종류의 자료형을 반환해야 하므로 Map 타입을 사용해 ‘movie’라는 키의 값에 movie 객체를, ‘imgList’라는 키의 값에 movieImage 객체를 담아 반환하도록 작성합니다.

8. MovieServiceImpl - register() 작성


8

MovieServiceImpl()은 MovieRepository와 MovieImageRepository를 주입받도록 구성한 뒤 register()를 구현합니다.
먼저 movieDTO를 매개변수로 받아 이를 dtoToEntity()에 넘겨 Movie 엔티티와 MovieImage 엔티티를 담고있는 entityMap를 반환받습니다. 그 후 Map에서 movie라는 키값의 value를 Movie 엔티티를 movie 변수에 담고 이를 save()를 통해 데이터베이스에 저장합니다.
맵에 저장된 imgList라는 키값의 value를 movieImageList에 담고 이를 하나씩 save()를 통해 저장합니다.
그 후 영화의 mno를 반환합니다.

9. MovieController - register() 작성


9

MovieController는 POST 방식으로 전달된 파라미터들을 MovieDTO로 수집해서 MovieService 객체의 register()를 호출하도록 작성합니다.
영화를 등록한 후 목록 페이지로 리다이렉트 되도록 리턴값은 “redirect:/movie/list”를 반환합니다.

10. register.html - custom-file-input 작성 1


10

등록 화면에서는 첨부파일 업로드를 먼저 작성합니다.
작성된 <input type=”file” class=”custom-file-input files”> 버튼의 이벤트를 구현합니다.
우선 화면이 갱신될 때 업로드된 파일의 유효성 검사를 수행하는 코드를 작성합니다. 파일의 확장자와 크기를 검사한 뒤 유효하지 않을 경우 false를 반환하도록 합니다.
첨부파일의 업로드는 별도의 버튼 없이 파일을 선택할 때 자동으로 이루어지도록 change 이벤트로 처리합니다.

11. register.html - custom-file-input 작성 2


11

업로드할 이미지 리스트의 이미지에 대한 유효성 결과의 결과값을 확인한 뒤 업로드합니다.
이미지를 업로드 후 콘솔창을 통해 결과를 확인할 수 있도록 성공과 실패에 log를 작성합니다.

12. register.html - css 작성


12

업로드가 정상적으로 처리된 후 화면에서 섬네일 이미지를 보여줄 영역에 섬네일이 보여지도록 css를 작성합니다.
<form> 태그 아래쪽 스타일과 <div>를 추가합니다.

13. register.html - showResult() 작성


13

업로드가 완료된 후 앞서 작성한 <div> 영역에 섬네일이 보여지도록 showResult()를 작성합니다.
Ajax의 호출 결과로 데이터를 가져오면 showResult()를 통해 가져온 데이터들의 섬네일 경로를 가져오고 각각의 섬네일마다 x 버튼이 생성되도록 합니다.

14. register.html - showResult() 확인


14

화면을 통해 결과를 살펴보면 이미지를 업로드한 뒤 <form> 태그 아래쪽 <div> 영역에 정상적으로 선택한 이미지의 섬네일과 x 버튼이 보여지는 것을 확인할 수 있습니다.

15. register.html - 섬네일 삭제 이벤트 작성


15

업로드된 섬네일을 삭제하도록 x 버튼을 눌렀을 때의 이벤트를 작성합니다.
Ajax를 통해 removeFile을 호출하도록 작성합니다.

16. register.html - 섬네일 삭제 이벤트 결과


16

업로드된 섬네일의 x 버튼을 누른 결과 정상적으로 화면에서 보이지 않고, 개발자 도구의 log가 정상적으로 출력되는 것을 확인할 수 있습니다.

17. register.html - submit 처리 작성


17

Submit 버튼을 눌렀을 때 각 이미지의 data-name, data-path, data-uuid 속성들을 읽어내 imageDTOList[i]에 담아내고 hidden타입의 <input> 태그를 통해 이를 POST 방식으로 전송하도록 합니다.

18. register.html - submit 처리 결과


18

위의 그림은 업로드된 이미지의 태그를 개발자 도구를 통해 확인한 것입니다.
업로드된 두 장의 이미지에 대한 imgName, path, uuid가 모두 hidden타입의 <input> 태그에 담겨져있는 것을 확인할 수 있으며 submit 버튼을 클릭한다면 구현되지 않은 목록 화면인 /movie/list로 이동하는 것을 확인할 수 있을 것입니다.

19. 데이터베이스 업로드 결과 확인


19

submit 버튼을 누른 뒤 데이터베이스를 통해 확인한 결과 정상적으로 movieImage에 업로드한 사진의 정보들이 올라간 것을 확인할 수 있습니다.

© 2022. All rights reserved.