댓글을 조회하고 삭제하려고 하는데 문제가 발생하였다.
등록및 조회는 정상적으로 진행되는데
백엔드에서 제공한 엔드포인트로 연결을 진행하는데 400에러가 발생하였다.
// 댓글 삭제하기
const deleteComment = async (cmtIdx) => {
try {
// DELETE 요청으로 삭제
const deleteResponse = await axios.delete(`/api/comment/delete/${cmtIdx}`,{
userEmail: userEmailData,
// cmtIdx: cmtIdx
});
console.log('댓글 삭제 완료:', deleteResponse.data);
// 댓글 목록 다시 가져오기
fetchCommentData();
} catch (error) {
console.error('댓글삭제 중 오류 발생:', error);
}
};
이렇게 작성을 진행하였고 해당문제를 해결하려고
// 댓글 삭제하기
const deleteComment = async (cmtIdx) => {
try {
// DELETE 요청으로 삭제
const deleteResponse = await axios.delete(`/api/comment/delete/${cmtIdx}`, {
headers: {
'Content-Type': 'application/json', // 요청 헤더에 Content-Type을 추가
},
data: { userEmail: userEmailData }, // 삭제 요청에 필요한 데이터를 data 속성에 추가
});
console.log('댓글 삭제 완료:', deleteResponse.data);
// 댓글 목록 다시 가져오기
fetchCommentData();
} catch (error) {
console.error('댓글삭제 중 오류 발생:', error);
}
};
데이터를 담아줄떄 헤더를 추가해서 타입명시를 통해서 해결을 하였다.
사용자경험을 위해서 alert말고 react환경에서 사용할 수 있는 react-toastify를 사용하기로 하였다.
npm install --save react-toastify
해당 토스트를 이용해서 alert창을 대체하는데 기존에 로그가 두번찍히던 문제도 있었는데 토스트창이 세번씩 출력되었다.
해당 문제를 해결하기위해서 검색을 해보았는데 main.jsx에 있는 <React.StrictMode>가 문제였다.
해당코드는 개발단계에서 사용하기위해서 로그를 두번출력하는 기능이 있다고 한다..
무한스크롤을 구현해서 게시판데이터를 가져오면서 글을 작성하면 바로 갱신이 되지않는 문제가 생겼다.
해당문제를 해결하기위해서
컨트롤러에서
// 게시판 전체 목록
@GetMapping("/listdata")
public List<BoardResponseDTO> boardList(){
return boardService.boardList();
}
@GetMapping("/list")
public List<BoardResponseDTO> boardList(@RequestParam("page") int page, @RequestParam("pageSize") int pageSize) {
// page와 pageSize를 이용하여 적절한 범위의 데이터를 가져와 응답합니다.
return boardService.getBoardListPaged(page, pageSize);
}
이렇게 스크롤시 가져오는 데이터와 전체데이터중 인덱싱하여 가져올 수 있게 엔드포인트를 두개로 설정하여서
// 새로운글이 작성되었을때
const NewBoardData = () => {
if (newPostAdded) {
axios
.get(`/api/board/listdata`)
.then((res) => {
console.log(res.data);
const newData = res.data[0];
setBoardData((prevData) => [newData, ...prevData]);
})
.catch((err) => { console.log(err) });
}
};
useEffect(() => {
NewBoardData();
}, [newPostAdded]);
이렇게 설정하여 신규데이터를 비동기로 호출하였다.
게시판에 사진데이터를 집어넣는데 기존에 글을 작성하는 부분은 헤더가 json형태이고 해당 데이터에 사진데이터를 추가하여 form 데이터로 전송하는 방법이었다.
해당 부분을 수정하기 위해서 기존의 데이터를 보내기 이전에 데이터를 형식을 지정하여 담아주는 과정을 진행하였다.
// 게시물 작성 제출 처리
const handleSubmit = async (e) => {
e.preventDefault();
try {
const formData = new FormData();
const jsonData = JSON.stringify({
bdContent : bdContent,
userEmail : userEmail
})
const jsonBlob = new Blob([jsonData], {type: "application/json"})
formData.append('BoardRequestDTO', jsonBlob);
console.log(formData);
formData.append('bdContent', bdContent);
formData.append('userEmail', userEmail);
console.log('Keys:', formData.keys());
console.log('All entries:', Array.from(formData.entries()));
console.log(formData.entries());
console.log('bdContent:', formData.get('BoardRequestDTO[bdContent]'));
console.log('userEmail:', formData.get('BoardRequestDTO[userEmail]'));
console.log('boardPhoto:', formData.get('boardPhoto'));
if (uploadedImage) {
formData.append('boardPhoto', uploadedImage);
}
const config = {
headers: {
'Content-Type': 'multipart/form-data', // 이 부분을 추가해보세요
},
};
console.log('axios config:', config);
const response = await axios.post('/api/board/create', formData, config);
setBoardWriteData(response.data);
setBoardData((prevData) => [response.data, ...prevData]);
console.log('글 작성이 성공했습니다:', response.data);
setNewPostAdded(true);
} catch (error) {
console.error('글 작성 중 오류 발생:', error);
if (error.response) {
console.error('서버 응답 오류:', error.response.data);
} else if (error.request) {
console.error('서버 응답이 없음:', error.request);
} else {
console.error('요청 전 오류 발생:', error.message);
}
} finally {
setUploadedImage(null);
formRef.current.reset();
}
};
