[TIL] 20240131 개발일지 (22일 - 31일)

알고리즘 강의

Java에서 Python으로 코딩테스트용 언어를 변경하기로 하였다.

 

다시 처음부터 공부 필요..

 

 

 

 

Front-End

글자 줄 넘어가면 ... 처리하기

    /* 3줄이상 나오지 않게 하기 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    height: auto;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

 

참고자료 : https://nh0404.tistory.com/43

 

한줄이 넘어가는 경우 ellipsis를 사용하는 것은 알고 있었으나, 여러 줄이 넘어가는 경우 조건을 주는 것은 처음이었다.

 

 

 

 

숫자 자릿수 맞춰 쉼표 찍기 기능

const [money, setMoney] = useState();

// 숫자 자릿수 찍기 기능
useEffect(() => {
    const addCommasToNumber = number => {
        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    };

    // money 상태 업데이트 시 쉼표 추가
    setMoney(addCommasToNumber(price));
}, [price]);

다양한 방법이 있는 것 같은데 replace를 통한 쉼표 찍기가 가장 편리할 것 같아서 사용하였다.

 

useEffect를 통해서 쉼표를 찍을 변수가 변경되면 자동으로 적용되도록 구현하였다.

 

 

 

 

React Query

참고자료

https://www.nextree.io/react-query/

https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2

https://velog.io/@himprover/React-query-%EC%97%90%EC%84%9C-isLoading%EC%9D%B4%EB%9E%91-isFetching%EC%9D%80-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B4%EC%A7%80

react query 사용 이유

1) 캐싱 (속도 향상, 중복 요청 제거)

2) 자동 get

 

 

 

 

useMutation

useQuery()를 사용해서 데이터를 받아온 데이터가 staleTime으로 캐시되어 있으면 업데이트 된 것이 반영되지 않음

화면에 최신 데이터 반영을 위해서는 useMutation을 통해 업데이트 하라는 코드를 작성해야 함

 

 

 

 

React Query를 위한 커스텀 hook 사용하기

useQuery를 사용하는 코드가 일반 컴포넌트 안에 있으면 복잡하고, 재사용성이 떨어진다.

또한 staleTime과 mutation을 사용한 invalidateQueries 설정도 어렵다.

 

따라서 코드를 한 곳에서 관리할 수 있는 커스텀 훅을 생성하고 관리하도록 구현한다. 

 

 

 

 

sweetalert2 (swal)

원래는 swal을 재사용할 수 있게 분리하려고 했었다.

 

하지만 return하는 화면이 없는 swal이기 때문에 jsx보다는 js로 구현하였고, 출력도 잘 이루어지지만, 버튼을 생성하고 버튼 클릭시 useNavigate을 이용해서 화면 이동(CSR) 구현이 되지 않았다.

 

일단은 별도의 코드 분리 없이 사용하는 것으로 구현을 하지만 다른 방법이 있을까 고민이 필요하다.  

// 분리하려고 만든 showSwal.js
import Swal from 'sweetalert2';

export function showSwal(status, data = 'default') {
    if (status === 'newitem__success') {
        Swal.fire({
            icon: 'success',
            html: `
        <strong>제품 등록이 완료되었습니다.</strong>
        `,
            //     showCloseButton: true,
            //     showCancelButton: true,
            //     // focusConfirm: true,
            //     confirmButtonText: `
            //   장바구니 보기${status}
            // `,
            //     cancelButtonText: `
            //   제품 다시보기
            // `,
        }).then(result => {
            // 확인 버튼이 클릭되었을 때 카트로 이동
            if (result.isConfirmed) {
            	// ※ 여기가 문제
                // navigate('/mycart');
            }
        });
    }
}

 

 

 

 

정렬 기능 구현

firebase로 받아온 결과를 정렬하여 사용자에게 출력하는 기능을 구현하고자 하였다.

 

처음에는 realtime firebase의 기능 중 하나인 정렬 후 반환 기능을 사용하려고 하였으나, 매번 데이터를 호출해야 하기 때문에 비효율적이었고, 화면 출력에서 어려움을 겪었다.

 

이 같은 문제 해결을 위해서  useState를 통해 데이터를 저장하고, 조건에 맞게 배열을 정렬 후 사용자 출력하도록 구현하였다.

const handleCategoryChange = e => {
    const { value } = e.target;

    if (value === 'priceup') {
        const sortByPriceDescending = (b, a) => a.price - b.price;

        const sortData = items.sort(sortByPriceDescending);

        setItems([...sortData]); // 새로운 배열로 업데이트
    }
};

 

 

 

 

setState()에러

ItemDetail.jsx:107 Warning: Cannot update a component (`RouterProvider`) 
while rendering a different component (`ItemDetail`). To locate the bad 
setState() call inside `ItemDetail`, follow the stack trace as described 
in https://reactjs.org/link/setstate-in-render

데이터가 없을 때 다른 화면으로 throw하는 기능을 구현하던 도중 warning을 마주하였다.

 

우선 위 에러는 useState()를 통한 데이터 업데이트가 다른 작업과 동시에 수행될 때 발생하는 문제라고 한다.

 

참고로 useState()의 데이터 업데이트는 useEffect()에서 일어나고 있었다.

 

 

if (data === null) return navigate('/notfound');

기존 코드는 위와 같이 data가 null이면 navigate를 통해서 다른 페이지로 보내버리는 것이었는데, 컴포넌트 내에서 useEffcet() 등으로 감싸지 않고 바로 사용하고 있었다.

 

 

    useEffect(() => {
        if (data === null) {
            navigate('/notfound');
        }
    }, [data]);

    if (data === null) return navigate('/notfound');

이를 navigate() 역시 useEffect()를 감싸서 수행하도록 변경하였고, useEffect()간 비동기적 실행을 보장하기 때문에 위에 발생했던 에러는 발생하지 않았다.