[Spring] 게시물의 수정과 첨부파일

[Spring] 게시물의 수정과 첨부파일

 

도움이 되셨다면 광고 한 번 클릭 부탁드립니다. 한 번의 클릭이 제게 큰 힘이 된답니다!^^

 

이전 글

2021.08.30 - [Spring] - [Spring] 게시물의 삭제와 첨부파일 삭제

 

게시물 수정에서 첨부파일은 수정이란 개념보단 삭제 후 다시 추가한다는 개념으로 접근합니다. 게시물 수정에는 기존의 게시물 테이블을 수정하는 작업과 변경된 첨부파일을 등록하는 작업으로 이뤄집니다.

 

반응형

---

화면에서 첨부파일 수정

게시물의 수정은 views 폴더 내에 /board/modify.jsp 에서 이루어집니다.

 

첨부파일 데이터 보여주기

modify.jsp 페이지가 로딩되면 첨부파일을 가져오는 작업을 처리합니다. file이 보여질 영역을 먼저 세팅합니다.

 

modify.jsp의 일부

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

jQuery의 $(document).ready( )를 이용해서 첨부파일을 보여주는 작업을 처리합니다.

 

modify.jsp의 일부

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

게시물의 조회화면에서 수정/삭제 화면으로 이동하면 첨부된 파일들을 볼 수 있습니다.

첨부파일을 수정하기 위해서는 게시물을 등록할 때 사용했던 '버튼'과 파일을 교체하기 위한 <input type='file'>이 필요합니다.

 

modify.jsp의 일부

 

실행 결과

<input type='file'> 태그를 추가한 화면입니다.

이미 등록된 첨부파일을 수정하려면 기존의 특정 파일을 삭제할 수 있도록 화면을 변경합니다.

Ajax로 첨부파일의 데이터를 가져온 부분을 수정합니다.

 

modify.jsp의 일부

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

 

화면에서 첨부파일의 이름과 삭제가 가능한 버튼이 보이게 됩니다.

---

첨부파일의 삭제 이벤트

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

첨부파일 처리에서 가장 신경 쓰이는 부분은 사용자가 이미 있던 첨부파일 중 일부를 삭제한 상태에서 게시물을 수정하지 않고 빠져나가는 상황입니다. 사용자가 첨부파일을 삭제했을 때 Ajax를 통해 업로드된 파일을 삭제하게 되면 나중에 게시물을 수정하지 않고 빠져나갔을 때 파일은 삭제된 상태가 되는 문제가 생깁니다. 이를 방지하기 위해 사용자가 특정 첨부파일을 삭제했을 때 화면에서만 삭제하고, 최종적으로 게시물을 수정했을 때 이를 반영하는 방식을 이용합니다.

 

우선 첨부파일의 'x' 버튼을 클릭하면 화면에서 해당 첨부파일이 사라지도록 합니다.

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

화면에서만 삭제하는 파일을 실제로 삭제하기 위해선 해당 파일에 대한 정보를 따로 보관해야 합니다. <li> 태그 내에는 필요한 모든 정보가 들어 있으므로, 이용 이용해서 <input type='hidden'>태그를 생성해둡니다.

 

실제 파일 삭제는 수정 버튼을 누르고 처리합니다. DB 정보와 비교해서 수정된 게시물에 포함된 항목들 중 기존에 존재했으나 수정하면서 빠지는 항목이 있다면 이는 사용자가 삭제를 원하는 파일입니다.

 

첨부파일 추가

첨부파일 추가는 기존 게시물 등록 시 처리와 동일합니다.

 

파일 체크 기능

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

파일 변경 기능

업로드하는 파일 보여주는 기능

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

게시물 수정 이벤트 처리

기존에 작성되어 있던 코드에서 수정 버튼이 눌렸을 때의 처리 코드를 추가합니다.

 

modify.jsp의 일부

<input type='hidden'> 태그를 추가하는 코드

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

---

서버 측 게시물 수정과 첨부파일

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

게시물 수정해서 첨부파일 처리는 복잡합니다. 가장 큰 이유는 기존 파일 중 어떤 파일을 수정했고, 어떤 파일이 삭제되었는지 알아야 하기 때문입니다. 간단한 방법으로 게시물의 모든 첨부파일 목록을 삭제하고, 다시 첨부파일 목록을 추가하는 형태로 처리하는 것입니다.

 

이 경우 실제 파일이 업로드된 폴더에 삭제된 파일이 남아 있는 문제가 생깁니다. 이에 대한 처리는 주기적으로 파일과 데이터베이스를 비교하는 등의 방법을 활용해서 처리할 수 있습니다.

 

BoardService(Impl)의 수정

 

게시물 수정에서 기존 첨부파일 관련 데이터를 삭제하고, 다시 첨부파일 데이터를 추가하는 방식으로 동작합니다.

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

첨부파일은 수정이라기 보다 삭제 후 다시 추가한다는 개념이므로 게시물 수정 전과 후 데이터베이스도 확인하는 것이 필요합니다.

 

테스트 실행

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

T.png 삭제 그리고 apple.txt 추가 (전-왼쪽, 후-오른쪽)

 

 

신고로 인해 일시적으로 광고를 제거합니다.

 

 

 

DB값에도 T.png는 삭제되었고, apple.txt가 추가된 것을 확인할 수 있습니다.

---

오늘은 게시물의 수정과 첨부파일에 대해서 알아보았습니다.

 

도움이 되셨다면 광고 한 번 클릭 부탁드립니다. 한 번의 클릭이 제게 큰 힘이 된답니다!^^