HOUSSG 프로젝트 리엑트 사소한 에러 기록 0829~~

1. Nav 컴퍼넌트 styled-component 관련 에러
@react-refresh:160  Warning: Received `true` for a non-boolean attribute `active`.

If you want to write it to the DOM, pass a string instead: active="true" or active={value.toString()}.

Nav 컴퍼넌트에서 styled-components 사용방식이 틀려서 난 에러이다.
props부분에 $를 붙여주면 해결된다. ( 몇 달전에 사용법이 바꼈는데, 기존 방식 써서 뜬 에러)

	font-size: ${({ $active }) => ($active ? '1.3rem' : '1rem')};
	// 기존 font-size: ${({ active }) => (active ? '1.3rem' : '1rem')};

2. redux 직렬화.
리덕스(+툴킷)에서는 직렬화 할 수 없는 값을 저장하려고 하면 에러가 뜸.
이를 해결하기 위해서 특정 케이스에 무시하는 방법도 있찌만, 기본적으로 직렬화 할 수 없는 값 저장시 오류가 생길 수 있으므로 안하는게 좋음.. 

 

3. antd upload

mocky라고 쉽게 api만들 수 있는 웹사이트가 있는데 이를 활용해서 antd가 이미지 미리보기가 구현되어있다. 근데
5개중 2~3개는 실패한다,, 통제할 수 없는 에러라 생각해서 사용하지 않기로 햇다.

4. null+ "

 

암묵적 타입 변환으로 null을 ""으로 바꾸고 싶었는데 "null"로 바뀜

console.log(imgFile);
	console.log(businessImg, '비지니스');
	console.log(!!businessImg, '비지니스');
	console.log('테스트', businessImg ? businessImg : ownerRegiImg);
	console.log('테스트2', ownerRegiImg);

조건문으로 처리함

 

5.  props 로 true false가 들어오는걸  jsx영역에 attribute로 줄 때,

적다보니 1번이랑 같은 문제라서 $를 붙임.. 근데 그냥 pending+"" 로 문자를 암묵적 타입변환해도 되고, error 메시지의 추천방법은 참일떄만 값을 보내기다

 

6.  배열 비교시 에러

   console.log(roomImgFiles, resistImgs, room.imgs, resistImgs == room.imgs);

        console.log(

            roomCategoryValue === room.roomCategory,

            roomCountValue === room.roomAvailability + '',

            roomPriceValue === room.roomPrice + '',

            resistImgs === room.imgs,

            !roomImgFiles,

            checkedList === room.service,

        );

배열을 비교할 떄 ,배열은 다른 것과 다르게 빈값일 때  true가   나옴,, 그리고  배열끼리 비교할 때 주소값이 다르면 같은 값이라도 다르게 나옴..

--> 해결법 어차피 파일 수정시 이미지 유지되는지 비교하는거라서 배열의 길이를 비교하여 구분함

 

7. 날짜 객체비교

const endDate = new Date('2023-10-18');

    const today = new Date();

    today.setHours(9, 0, 0, 0);

    console.log(endDate);

    console.log(today);

    console.log(today === endDate, '오늘 false나와야함');

참조값이라서 다르게 나옴. 근데 >= 은 제대로 먹음 크기비교라서