FETCH 사용방법 질문드려요

Question

개발 공부중인 학생입니다 신고기능을 만들고 있는 중인데 생각대로 안되서 질문드려요 function submitReport() { const userId &#61; document.getElementById('userId').textContent; const userName &#61; document.getElementById('userName').textContent; const postNo &#61; document.querySelector('input[name&#61;&#34;postNo&#34;]').value; const replyNo &#61; document.querySelector('input[name&#61;&#34;replyNo&#34;]').value; const reportTitle &#61; document.querySelector('input[name&#61;&#34;reportTitle&#34;]').value; const reportContent &#61; document.querySelector('textarea[name&#61;&#34;reportContent&#34;]').value; const reportLogDTO &#61; { userId: userId, userName: userName, postNo: postNo, replyNo: replyNo, reportTitle: reportTitle, reportContent: reportContent }; fetch('/report/reportLog', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(reportLogDTO) }) .then(response &#61;> response.text()) .then(data &#61;> { console.log(data);. alert('신고가 전송되었습니다.'); }) .catch(error &#61;> { console.error('Error:', error); alert('신고 전송중 에러가 발생했습니다.'); }); } FETCH로 컨트롤러에 reportLogDTO를 보내려고 합니다 reportLogDTO가 생성되는거 까지는 확인했고요 컨트롤러는 아래와 같이 구성 돼 있슴니다&#64;PostMapping(&#34;/reportLog&#34;) public ResponseEntity<String> createReportLog(&#64;PathVariable ReportLogDTO reportLogDTO) { reportService.createReportLog(reportLogDTO); return ResponseEntity.ok(&#34;Report log created successfully.&#34;); }이렇게 작성했는데 아무리 전송버튼을 통해 데이터를 보내도 DB에 데이터가 저장이 안돼서 답답한 마음에 질문 드립니다 어느부분이 잘못된건지 알 수 있을까요???사용한 reportLogDTO도 올려드립니다package com.community.dogcat.dto.report; import java.time.Instant; import com.community.dogcat.domain.Post; import com.community.dogcat.domain.Reply; import com.community.dogcat.domain.User; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; &#64;Data &#64;Builder &#64;AllArgsConstructor &#64;NoArgsConstructor public class ReportLogDTO { private Long reportNo; private User userId; private String nickname; private Post postNo; private Reply replyNo; private String reportTitle; private String reportContent; private Instant regDate; }

팩트폭행범 · Answer

컨트롤러에 @PathVariable을 @RequestBody로 변경

HJOW · Answer

그래서,저 DTO 객체가 서비스, DAO까지 가는 건 확인했을까요?(설마 &#34;reportLogDTO가 생성되는것 까지 확인&#34; 의미가 자바스크립트 콘솔 내에서만 확인했다는 건 아니겠죠?)그리고 개발자라면&#34;생각대로 안된다&#34;&#34;안되요&#34;는 그냥 써서는 안 됩니다. &#34;어떻게&#34; 안되는지를 적어야지요.이를테면화면에서 이벤트를 발생시켰다. (버튼 눌러서)브라우저 개발자 도구로 서버에 요청 나간것도 확인했다 or 오류코드 몇이 뜨면서 전송이 안됐다컨트롤러 메소드에 DTO 객체 생성되어 들어오는 것까지도 확인했다(툴의 디버깅 기능을 쓰던 System.out.println 을 쓰던 등등)이후에 ~~ 오류 메시지가 나오며 진행이 안된다 or 오류 메시지가 없이 더 이상 진행이 되지 않는다같이, 현재 내가 확인한 상황을 같이 첨부해 주셔야 해요. 안그럼 추측해서 답변드릴 수밖에 없죠.브라우저 개발자 도구와 툴 디버깅 도구 사용법 알아두면 좋지만, 모르더라도 군데군데 로그 찍어가면서 분석할 방법은 많습니다.

ccat · Answer

@PathVariable, @RequestParam, @RequestBody 세개를 구글에 쳐서 확인해보세욤

더미 · Answer

안녕하세요, 신고 기능 구현 중 어려움을 겪고 계시는군요. 현재 코드와 설명을 기반으로 몇 가지 문제점과 해결 방향을 제시해 드리겠습니다.문제점 분석경로 불일치 (Path Variable 오류):프론트엔드에서 /report/reportLog 경로로 데이터를 보내지만, 컨트롤러에서는 @PathVariable을 사용하여 경로 변수를 기대하고 있습니다. 하지만 실제로는 경로 변수를 사용하지 않고, 요청 본문 (body)으로 데이터를 전달하고 있으므로, 경로 매핑 방식을 수정해야 합니다.데이터 타입 불일치:프론트엔드에서 전송하는 reportLogDTO의 필드 타입과 컨트롤러에서 받는 ReportLogDTO의 필드 타입이 일치하지 않습니다. 예를 들어, userId는 프론트엔드에서는 문자열이지만, DTO에서는 User 객체로 정의되어 있습니다. 이 부분을 수정해야 합니다.ResponseEntity 활용 부족:컨트롤러에서 ResponseEntity를 사용하여 응답을 보내고 있지만, 프론트엔드에서는 response.text()로 응답을 처리하고 있습니다. ResponseEntity를 통해 상태 코드와 함께 JSON 형태의 데이터를 반환하고, 프론트엔드에서 이를 적절히 처리해야 합니다.해결 방안1. 경로 매핑 수정 (컨트롤러):Java@PostMapping("/reportLog") // @PathVariable 제거 public ResponseEntity<?> createReportLog(@RequestBody ReportLogDTO reportLogDTO) { // @RequestBody 추가 reportService.createReportLog(reportLogDTO); return ResponseEntity.ok("신고가 접수되었습니다."); // JSON 응답 } 코드를 사용할 때는 주의가 필요합니다.content_copy2. 데이터 타입 일치 (프론트엔드, DTO):JavaScript// 프론트엔드 (JavaScript) const reportLogDTO = { userId: Number(userId), // 문자열을 숫자로 변환 (userId가 숫자 타입인 경우) userName: userName, postNo: Number(postNo), // 문자열을 숫자로 변환 (postNo가 숫자 타입인 경우) replyNo: Number(replyNo), // 문자열을 숫자로 변환 (replyNo가 숫자 타입인 경우) reportTitle: reportTitle, reportContent: reportContent }; 코드를 사용할 때는 주의가 필요합니다.content_copyJava// DTO (Java) public class ReportLogDTO { // ... (기존 필드) private Long userId; // User 객체 대신 userId 필드 사용 private Long postNo; // Post 객체 대신 postNo 필드 사용 private Long replyNo; // Reply 객체 대신 replyNo 필드 사용 // ... (기존 필드) } 코드를 사용할 때는 주의가 필요합니다.content_copy3. ResponseEntity 활용 (프론트엔드):JavaScriptfetch('/report/reportLog', { // ... (기존 코드) }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok.'); } return response.json(); // JSON 응답 처리 }) .then(data => { console.log(data); alert(data); // JSON 데이터에서 메시지 추출하여 alert }) .catch(error => { // ... (기존 코드) }); 코드를 사용할 때는 주의가 필요합니다.content_copy추가 조언:브라우저 개발자 도구의 네트워크 탭을 확인하여 실제 요청과 응답을 살펴보세요.서버 측 로그를 확인하여 오류 메시지가 있는지 확인하세요.필요하다면, 디버깅 도구를 사용하여 코드 실행 과정을 단계별로 추적해 보세요.참고:@RequestBody는 HTTP 요청 본문을 자바 객체로 변환하는 데 사용됩니다.ResponseEntity는 HTTP 응답의 상태 코드, 헤더, 본문을 설정하는 데 사용됩니다.

FETCH 사용방법 질문드려요

4개의 답변

기술 목록