QnA & Comment

생성일

2023/09/17 11:30

태그

담당 도메인

Notice : 질문 게시판은 우리 웹사이트의 핵심 기능 중 하나입니다.

우리 웹사이트의 회원 사용자들은 질문 게시판을 통해 기부에 관련된 질문 사항, 기부를 받기 위한 질문 사항 등의 글을 작성할 수 있습니다. 또한 댓글로 회원간의 소통을 할 수 있습니다.

세부 목차

목차는 다음과 같습니다.

•

#1. 구현 계획

•

#2. 기능 시연

•

#3. 구현 중에 발생한 이슈

•

#4. 이슈 해결

•

#5. 구현 완료 이후 디버깅

•

#6. 해결 해야 할 남은 문제

#1. 구현 계획

질문 게시판의 핵심 :

•

오직 회원만 게시글을 등록, 읽기를 할 수 있고 본인의 글만 수정, 삭제 할 수 있습니다.

•

오직 회원만 댓글 등록을 할 수 있고 본인의 댓글만 수정, 삭제 할 수 있습니다.

이유 : 주로 책을 기부 하고 싶은 사람과 책을 기부 받고 싶은 사람만 저희 페이지를 사용 할 것이라 예상되기 때문에 특정 비회원이 게시판을 어지럽히는 일을 방지하고자 회원만 게시글을 작성 할 수 있도록 했습니다.

•

이를 위해 회원이 아니면 게시글 작성 & 게시글 읽기 시 로그인을 먼저 권유하는 로직을 짜기로 했습니다.

#2. 기능 시연

이제 웹사이트에 직접 접속하여 질문 게시판의 주요 기능들을 시연해 보겠습니다.

시연 순서)

비회원 상태로 게시글 작성 → 로그인 화면 → 로그인 후 게시글 등록 및 수정, 삭제 → 댓글 등록 및 수정, 삭제

#3. 구현 중에 발생한 이슈

이슈 #1 : vue-quill-editor 사용시 imageFileList(formData)가 null인 사항

이슈 #2 : vue-quill-editor 사용하면 이미지 업로드시 무조건 base64 인코딩이 되는 사항

이슈 #2 - 참고 사진

#4. 이슈 해결

해결 :

먼저 선생님의 말씀대로 이미지 업로드시 가장 이상적인 방법은 아래와 같습니다.

•

해당 이미지의 경로가 이미지 엔티티에 경로로서 저장되어야 한다.

•

백으로 전달 받은 이미지는 실제로 이미지 파일로서 로컬에 저장 되어야 한다.

•

저장되는 이미지 파일은 파일명이 중복되지 않게 해야한다. (ex : UUID)

위의 방식으로 작동하도록 구상하고, null을 해결하기 위해 아래의 코드를 적용 했습니다.

•

querySelectorAll을 사용하여 quill-editor 내에 존재하는 <img> 태그를 검색

•

해당 이미지를 파일 객체로 변환 후, 백에 이미지를 파일 객체로서 전달하는 것

사용 되어진 코드 - 참고 사진

이렇게 imageFileList가 null인 이슈 #1을 해결 하였습니다.

하지만 formData 중 qnaInfo의 content에 이미지가 base64로 인코딩 되어 여전히 DB에 <p><img /></p>의 형태로 저장되고 있었습니다.

위와 같은 이슈 #2를 해결 하고자 아래의 코드를 적용 했습니다.

•

content의 <p><img /></p>를 replaceAll로 제거한다.

사용 되어진 코드 - 참고 사진

base64로 인코딩 되어진 것을 단순히 replace 후 DB에 저장하는 것으로 완전히 해결한 것은 아닌 것 같습니다. 시간적 여유가 있을때 base64를 조금 더 공부 할 예정입니다.

#5. 구현 완료 이후 디버깅

버그 :

•

질문 게시판 등록 (QnARegisterView)에서, 제목과 내용이 비어있어도 작성이 되는 것

•

질문 게시판을 URL로 무단 액세스 할 시, 해당 페이지가 보여지게 되는 것

디버그 :

•

첫번째

◦

if문을 추가하여 null일 경우 alert “제목과 내용을 모두 입력해주세요”를 실행

•

두번째

◦

beforeEnter 사용하여 로그인 페이지를 먼저 보여줄 수 있게 수정

#6. 해결 해야 할 남은 문제

해결 해야 할 남은 문제 (Additional Work and debug) :

•

글 수정(modify)에서 beforeEnter를 사용하여 로그인 되지 않는 사용자는 로그인 페이지로 이동하게 되어 있습니다.

하지만 구상 했던 것은 아래와 같은 방법이었습니다. 무단 액세스시 if(’로컬 스토리지 닉네임 === ‘해당 게시글 작성자’)를 추가하여

false일 경우 no-acc-view 페이지로 이동하게 만들 생각이었습니다.

no-acc-view 예시

프로젝트 마감이 얼마 남지 않아서 일단 로그인 페이지로 보내는 것으로 결정했습니다.

•

이미지 ‘1’이 저장된 게시물을 이미지 ‘2’로 수정 시, DB에 이미지 ‘1’이 지워져야 합니다.

•

댓글의 대댓글을 작성하는 기능이 없습니다.

•

사용자가 게시글 작성시 혹은 사용자가 게시글을 읽을때, 내용의 폰트 크기가 작습니다.

•

AWS S3 TEST 및 구현을 해야합니다.

•

게시글이 등록되는 순서를 ASC로 변경 해야합니다.

•

게시글 등록시 가끔 새로고침을 해야 게시글이 추가되는 경우를 수정 해야합니다.

•

게시글 등록시 이미지 업로드 규칙을 지킨채로 본문의 순서를 기억해서 순서대로 출력이 되어야합니다. (캐러셀 삭제) (ex : 글, 이미지, 글 이미지) 

•

본문의 문자열이 좌측 정렬로 수정 되어야 합니다.

•

이미지가 없는 게시글에 빈 캐러셀(empty carousel borderline)을 제거 해야합니다.