콘솔에러-react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

✅ 스프링부트에서 보내는 값과 리액트에서 받는 값이 다를 경우 오류

[Cotroller.java]

@PostMapping("/upload)
public ResponseEntity<String> insertProfile(@RequestParam("files") MultipartFile[] files,
                                            @RequestParam("username") String username
                                            ){
        serivice.uploadProfile(files,username);
        return ResponseEntity.ok("이미지업로드성공");

return response.json();

▶위와 같이 controller에서는 String으로 보냈는데 리액트에서 json으로 받을 경우 화면은 정상 작동하지만

콘솔창에서 json으로 받지 못한 오류가 뜬다!! 왜냐면 json은 key, value로 받기 때문에 map으로 보낼 경우 정상 작동한다.

또한 아래와 같은 코드로 받을 경우 콘솔 오류가 발생하지 않는다.

return response.text();

 

✅키값이 없어 발생한 콘솔 오류

[에러 코드]

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

[에러 원인]

작성한 파일 내 고유한 키값이 정의 되지 않았다. map을 사용할 때 key값을 주지 않아도 페이지는 문제 없이 작동하지만

콘솔창을 열어보면 key를 부여하라는 메시지가 뜬다.

✔️key 값은 : 엘리먼트 리스트(Element List :여러개의 요소들을 모아놓은 목록)를 만들때 포함해야 하는 특수한 문자열로 

                      key는 리액트가 어떤 항목을 변경,추가 또는 삭제할지 식별하는데 도움을 준다.

(수정 전 코드)

<tr key={item.post_no}>

(수정 후 코드)

<tr key={item.postNo}>

▶ sql db컬럼값은 post_no이지만 스프링부트에서 넘겨주는 값은 dto에 적힌 postNo이기 때문에 키값을 맞춰주어

    콘솔 에러가 해결 되었다.

 

[리액트 코드 이해]

const { postNo } = useParams();

 : 이 코드는 URL에서 'postNo'라는 값을 추출해서 사용하는 역할을 한다. 즉 사용자가 보고 있는 페이지의 URL에 포함된

   특정값을 가져오는데 사용한다

   useParam 훅을 사용하면 현재 URL의 파라미터(매개변수)를 쉽게 가져올 수 있다. URL에 있는 모든 파라미터를 키 - 값 

   쌍으로 담고 있다. useParam() 반환된 객체에서 'postNo'라는 이름의 값을 추출, 즉 'postNo'라는 변수는 현재 URL에서 

   추출한 'postNo'값을 가지게 된다.

 

[자바에서 'void' 와 'Void' 차이]

[에러발생한 구문]
public ResponseEntity<void> incrementViewCount(@PathVariable("postNo")int postNo) {
             postService.incrementViewCount(postNo);
             return ResponseEntity.ok().buld();
   }
 [정상작동한 구문]
 public ResponseEntity<Void> incrementViewCount(@PathVariable("postNo")int postNo) {
             postService.incrementViewCount(postNo);
             return ResponseEntity.ok().buld();
   }

: void는 어떤 값도 반환하지 않는 메서드를 원하는 경우 소문자 void를 사용한다. 기본 자료형으로 반환값이 없으며 

  메서드가 아무런 값을 반환하지 않을 때 사용 한다.

: Void는 참조자료형으로 기본자료형 void의 객체 버전으로 Void는 자바에서 객체로 취급할 수 있는 특별한 자료형이기

  때문에 ResponseEntity<Void>로 사용하는 것이 맞다

 

✅ const navigate = useNavigate();

 : 페이지를 이동할 때 사용. 리액트 라우터 라이브러리에서 제공하는 훅을 사용하여 페이지 간의 이동을 쉽게 할수 있다.

 : 해당 훅을 사용하려면 react-router-dom으로 부터 useNavigate를 import 해온다.

import {useNavigate} from 'react-router-dom';

 : 그리고 navigate를 정의한다.

const navigate = useNavigate();

 :  navigate 함수는 특정 경로로 사용자를 이동 시키는 역할을 한다. 예를 들어 사용자가 폼을 제출한 후에 특정 페이지로

    이동시키거나, 버튼 클릭 시 특정 페이지로 돌아갈때 사용할 수 있다.

[사용예시]

import {useNavigate} frim "react-router-dom";

const navihandle = () => {
 navigate("/CustomerBoard");
}

<button onClick={navihandle}>돌아가기</button>
▶ 위 코드는 돌아가기 버튼을 클릭하면 'CustomerBoard'페이지로 이동된다!

 

✅ 스프링 부트 에러 발생

[오류 코드]

ith path [] threw exception [Request processing failed: org.springframework.dao.DataIntegrityViolationException: 
### Error updating database.  Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Incorrect datetime value: '2024-08-09T12:19:05.109Z' for column 'post_createDate' at row 1
### The error may exist in file [C:\Users\user1\Final\Sixsence\bin\main\mappers\Post-mapper.xml]
### The error may involve com.six.mapper.PostMapper.writeCompleted-Inline
### The error occurred while setting parameters
### SQL: INSERT INTO post (post_title, post_content, post_count, post_createDate)    VALUES (?, ?, ?, ?)
### Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Incorrect datetime value: '2024-08-09T12:19:05.109Z' for column 'post_createDate' at row 1
; Data truncation: Incorrect datetime value: '2024-08-09T12:19:05.109Z' for column 'post_createDate' at row 1] with root cause

 

:  위 오류는 mysql 오류로 Data too long for column 'post_content' 및 Field 'post_count' doesn't have a default value

- 첫번째 오류는  'post_content' 칼럼에 데이터가 너무 길고

- 두번째 오류는 ' 'post_count' 칼럼에 기본값이 없다는 오류로

아래와 같이 mysql구문을 수정 하였다

- ALTER TABLE post MODIFY COLUMN post_content TEXT;

- ALTER TABLE post MODIFY COLUMN post_count INT DEFAULT 0;