Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Archives
Today
Total
관리 메뉴

한바다

console로 에러찾기 본문

React

console로 에러찾기

한바다진화 2024. 8. 6. 21:43

PropertySource 경로발생 오류

[수정 전 코드]
@PropertySource("classpath:/configs.properties")
[수정 후 코드]
해당어노테이션 경로에서 바라보고 있는 config설정 파일명이 mybatis-config.xml이기 때문에
@PropertySource("classpath:/config.properties")로 올바른 경로를 지정해줘야 한다.

경로에 . 누락 -hikari로 시작하는 모든정보 가져오기 구문 오류

[수정 전 코드]
@ConfigurationProperties(prefix="spring datasource.hikari")
[수정 후 코드]
@ConfigurationProperties(prefix="spring.datasource.hikari")
▶ spring.datasource.hikari 에서 시작하는 모든 정보를 가져와야 하기에 스프링과 데이타베이스에 뛰어쓰기가 아니라 .을 찍어줘야 한다!

 

✅ 매퍼 xml 문법 오류

(수정 전)
VALUES(#{title, #{content},#{imageUrl})
(수정 후)
VALUES(#{title},#{content},#{imageUrl})

 

✅ SeviceImpl에 @Service 누락

 

정의되지 않은 오류 속성

처음에 리액트 즉 프론트만 작성 하였을때는 정의되지 않았다는 오류가 뜨지 않았는데 DB를 불러오면서 아래 코드에서

toLowerCase()가 정의되지 않았다고 떳다. 그래서 console로 찍어본 후 에러 원인을 파악 해보았다.

const filteredItems = data.filter(item => 
   item.post_Title.toLowerCase().includes(searchTerm.toLowerCase())
    console.log("item : ",item);
    }
  );

[콘솔로 확인 한 화면]

[에러 파악 후 해결]

데이터 베이스에서 넘어온 컬럼 값은 postTitle이 였다. 즉 DB를 연결하기전 작성한 코드에서 post_Title이 였고 화면단에도 문제가 없었는데 db랑 연결하면서 DB에서 넘어온 컬럼값과 리액트에서 작성한 컬럼명이 다르기 때문에 정의되지 않은 것으로 나온 것이다! 이렇듯 콘솔로 찍어서 어떤 DB값을 갖고 오는지 어느 단계에서 에러가 발생하는지 찬찬히 뜯어보고 분석해보고 하나하나 찍어보면서 에러를 찾아가 본다!!

[수정된 코드]

 const filteredItems = data.filter(item => 
   item.postTitle.toLowerCase().includes(searchTerm.toLowerCase())
   
   );

✅ SeviceImpl 은 상세기능을 작성한며 controller는 되도록 간단하게 작성하도록 한다!

@Value("${file.upload-dir}") 해당 구문에서 $를 사용하는 이유

: 해당구문에서 '$'는 설정파일에 있는 값 (  application.properties구문에 file.upload-dir=C:/Users/user1/Desktop/saveImage)  을 자바클래스의 필드나 메서드에 넣어주는 역할

: application.properties 파일에 정의된 'file.upload-dir'속성의 값을 가져와서 uploadDir필드에 주입한다.

: ${} 중괄호 안에 있는 표현식은 스프링프레임워크에서 사용하는 표현식의 언어(spEL)의 일부이다.

  즉 '$' 와 {}는 Spring에서 프로퍼티 파일에 있는 값을 참조하기 위해 사용되는 특별한 표기법이다.

-  application.properties에 작성된 file.upload-dir=C:/Users/user1/Desktop/saveImage 구문에 . 과 - 이 들어 

간 것은 개발자가 만든 변수명으로 나중에 불러와서 사용할 수 있다.

- 서비스 임플은 시작 구문이

@Service

public class PostServiceImpl implements PostService {} 으로 시작한다. 앞서 작성한 servic필드에 간단하게 작성한 것을

오버라이딩하므로 단축 키는 ctrl + space + enter 이다!

따라서 다음으로 나오는 구문은 서비스는 매퍼에서 오기 때문에 오토와이드 구문은 아래와 같다.

@Autowired

private PostMapper postMapper;

[UUID 이미지 이름 저장 중복없이 저장할 수 있도록 설정]

List<String> fileNames = null;
try{
   fileNames = List.of(files).stream().map(file -> {
         String fileName1 = UUID.randomUUID().toString();
          //UUID를 이용해서 저장 = 파일 이름이 겹치지 않도록 랜덤으로 이름 생성
    }).collect(Collectors.toList());   
   }
   
   //List.of(files) file = 파일들 배열을 리스트(목록)로 변환
   //.stream() = 리스트나 배열과 같은 데이터를 하나씩 처리하는 기능
   //.collect(Collectors.toList()); stream으로  가져온 이미지 데이터를 리스트로 정렬
   //이미지들 이미지를 한개 씩 담아오기 map -> 이미지를 하나씩 가져올 때 stream을 이용해서 가져오기