[유선향]-Sprint5

[grimza99]

요구사항

기본

####중고마켓

• 중고마켓 페이지 주소는 “/items” 입니다.
• 페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
• 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
• 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
• '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
• 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

####중고마켓 반응형

• 베스트 상품

• Desktop : 4개 보이기
• Tablet : 2개 보이기
• Mobile : 1개 보이기

• 전체 상품

• Desktop : 12개 보이기
• Tablet : 6개 보이기
• Mobile : 4개 보이기

심화

• 페이지 네이션 기능

주요 변경사항

• 셀렉트 박스 react-select 라이브러리 사용

스크린샷

멘토에게

• 이번에 react- select 라이브러리를 사용해봤는데, 너비가 제맘대로 잘 조정되지 않아 많이 힘들었습니다. 불러온 padding 값이 자동으로 설정되어있었는데, 모든 요소에 padding값을 지정해 보았지만 적용이 되지 않아서 참 아쉬웠습니다.
• 어느 한부분의 문제가 전혀 다른 부분에 영향을 끼치는 경우가 많아서 당혹스러웠습니다... 렌더링이 자주 일어나면 스타일드 컴포넌트에서 영향을 끼치는 경우가 생기다니...

[kiJu2]

스프리트 미션 하시느라 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

[kiJu2]

이번에 react- select 라이브러리를 사용해봤는데, 너비가 제맘대로 잘 조정되지 않아 많이 힘들었습니다. 불러온 padding 값이 자동으로 설정되어있었는데, 모든 요소에 padding값을 지정해 보았지만 적용이 되지 않아서 참 아쉬웠습니다.

아핳 select 라이브러리를 경험해보셨군요. 기능이 많이 들어가있는 라이브러리는 커스텀하기 어려울 수 있지요 😢

어느 한부분의 문제가 전혀 다른 부분에 영향을 끼치는 경우가 많아서 당혹스러웠습니다... 렌더링이 자주 일어나면 스타일드 컴포넌트에서 영향을 끼치는 경우가 생기다니...

그치요 ㅠㅠ 사이드 이펙트라고도 합니다. 그럴 경우 디버깅하기 정말 힘들죠 ㅠㅠ

[kiJu2]

크으 👍👍👍👍 커스텀 훅으로 만드셨군요 !

해당 기능은 여러 페이지와 여러 컴포넌트에서 필요한 페이지이지요 ! 굿굿 ! 좋은 아이디어예요 👍

[grimza99]

감사합니다!

[kiJu2]

handleResize는 useEffect 내부에 선언하는게 어떨까요?

Suggested change

	const handleResize = () => {
	if (window.matchMedia("(max-width: 767px)").matches) {
	setDeviceType("mobile");
	} else if (window.matchMedia("(max-width: 1199px)").matches) {
	setDeviceType("tablet");
	} else {
	setDeviceType("desktop");
	}
	};
	useEffect(() => {
	handleResize();
	window.addEventListener("resize", handleResize);
	return () => {
	window.removeEventListener("resize", handleResize);
	};
	}, []);
	useEffect(() => {
	const handleResize = () => {
	if (window.matchMedia("(max-width: 767px)").matches) {
	setDeviceType("mobile");
	} else if (window.matchMedia("(max-width: 1199px)").matches) {
	setDeviceType("tablet");
	} else {
	setDeviceType("desktop");
	}
	};
	handleResize();
	window.addEventListener("resize", handleResize);
	return () => {
	window.removeEventListener("resize", handleResize);
	};
	}, []);

useEffect 내부에 함수를 선언하면, 해당 함수가 useEffect의 클로저 컨텍스트 안에 들어가기 때문에, 최신 상태와 데이터를 참조할 수 있으며, 리렌더링에 의한 불필요한 리렌더링을 방지할 수 있습니다 !
또한, 서로 필요한 로직이 가까이 있어 가독성도 향상될 수 있어요 😊

[kiJu2]

디바운싱/쓰로틀링을 통하여 성능 최적화를 시켜볼까요?

Suggested change

	const handleResize = () => {
	if (window.matchMedia("(max-width: 767px)").matches) {
	setDeviceType("mobile");
	} else if (window.matchMedia("(max-width: 1199px)").matches) {
	setDeviceType("tablet");
	} else {
	setDeviceType("desktop");
	}
	};
	const handleResize = () => {
	console.log("Hello !", Date.now()); // 👈👈
	if (window.matchMedia("(max-width: 767px)").matches) {
	setDeviceType("mobile");
	} else if (window.matchMedia("(max-width: 1199px)").matches) {
	setDeviceType("tablet");
	} else {
	setDeviceType("desktop");
	}
	};

해당 이벤트에 console.log를 호출해보면 리사이징이 될 때마다 정말정말 많은 호출하는 것을 볼 수 있을거예요 !
그만큼 성능에 좋지 못하다는 이야기겠지요?
따라서, 프론트엔드 개발자들은 이렇게 잦은 이벤트가 발생할 때(리사이징, 스크롤, 타이핑 등) 디바운싱/쓰로틀링을 통하여 최적화를 시키곤 합니다.

쓰로틀링(Throttling): 일정 시간 동안 하나의 함수만 호출되도록 하는 기법입니다. 예를 들어, 사용자가 스크롤을 할 때, 매번 이벤트를 처리하지 않고 일정 간격으로 한 번만 처리하게 합니다. 이를 통해 성능을 향상시킬 수 있습니다.

디바운싱(Debouncing): 여러 번 발생하는 이벤트 중 마지막 이벤트가 발생한 후 일정 시간이 지난 다음에 한 번만 실행되도록 하는 기법입니다. 예를 들어, 사용자가 검색어를 입력할 때, 입력이 끝난 후 일정 시간 동안 추가 입력이 없으면 검색 요청을 보냅니다.

[kiJu2]

예를 들어서 다음과 같은 코드가 있습니다:

function Container() {
    useEffect(() => {
      window.addEventListener('resize', handleResize);
      return () => {
        window.removeEventListener('resize', handleResize);
      }, []);
// ... Some code
}

디바운싱으로 다음과 같이 최적화를 시킬 수 있습니다 !:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

function Container() {
  const handleResize = () => {
    console.log('Window resized');
  };

  useEffect(() => {
    const debouncedHandleResize = debounce(handleResize, 300);
    window.addEventListener('resize', debouncedHandleResize);
    return () => {
      window.removeEventListener('resize', debouncedHandleResize);
    };
  }, []);

  // ... Some code
}

이렇게 하면 연속된 이벤트가 끝난 후 0.3초마다 호출하게 되어 기존보다 훨씬 최적화된 기능이 될 수 있습니다 !

[kiJu2]

같은 함수를 매번 작성하기 번거롭지요. 선향님께서 하신 것처럼 이것도 훅으로 만들 수 있습니다 !

번거롭죠.. (사실 저도 위 코드는 GPT한테 맡긴 코드입니다 하하하핳ㅎ 그래서 될지는 장담못함..)
디바운싱, 쓰로틀링은 정말 흔한 기법이어서 참조할 수 있는 문서가 많습니다 !

useHooks

해당 라이브러리를 사용한 코드로 볼까요?

import { useRef, useState } from 'react';
import { useDebounceCallback } from 'usehooks-ts';

function useDebounceValue(initialValue, delay, options) {
  const eq = options?.equalityFn ?? ((left, right) => left === right);
  const unwrappedInitialValue = typeof initialValue === 'function' ? initialValue() : initialValue;
  const [debouncedValue, setDebouncedValue] = useState(unwrappedInitialValue);
  const previousValueRef = useRef(unwrappedInitialValue);

  const updateDebouncedValue = useDebounceCallback(setDebouncedValue, delay, options);

  // Update the debounced value if the initial value changes
  if (!eq(previousValueRef.current, unwrappedInitialValue)) {
    updateDebouncedValue(unwrappedInitialValue);
    previousValueRef.current = unwrappedInitialValue;
  }

  return [debouncedValue, updateDebouncedValue];
}

export default useDebounceValue;

그리고 사용 방법:

import React, { useState } from 'react';
import useDebounceValue from './useDebounceValue';

const ExampleComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const [debouncedValue] = useDebounceValue(inputValue, 500);

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} placeholder="Type something..." />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
};

export default ExampleComponent;

[kiJu2]

쿼리는 URLSearchParams로 손쉽게 사용할 수 있어요 !

(new URLSearchParams({hello: 1})).toString();
// 결과값: 'hello=1'

객체로 구성할 수 있어 가독성이 좋고, URL 인코딩을 자동으로 처리하여 특수 문자나 공백이 포함된 값에서도 안전하게 동작합니다 !

URLSearchParams: URLSearchParams 인터페이스는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의합니다.

[kiJu2]

말씀주신 react-select 군요 !

라이브러리를 경험하셨군요 ! 좋습니다 ! 👍
다음에는 드롭다운을 직접 만들어보는 것도 좋은 학습 경험이 될 수 있을 것 같아요. 😊

[kiJu2]

수고하셨습니다 선향님 !
나날이 빠르게 학습하시는게 느껴지네요 ㅎㅎㅎ
특히 커스텀 hook을 만드신 부분이 인상깊습니다 👍👍👍
학습 진도를 잘 따라가고 계셔서 조금 응용과 팁 위주로 리뷰하였습니다 ! 시간 되실 때 디바운싱도 한 번 적용해보세요 😊

스프린트 미션 수행하시느라 정말 정말 수고 많으셨습니다 !
이번 기초프로젝트에서 선향님의 역량은 팀에 크게 기여 되실거라고 확신합니다. 🤩

[grimza99]

감사합니다! 이번 팀프로젝트때 다른 팀원분들 경험을 저도 많이 흡수 할수 있는 좋은기회인것 같아서 희진님을 열심히 괴롭히고 있습니다!

[kiJu2]

감사합니다! 이번 팀프로젝트때 다른 팀원분들 경험을 저도 많이 흡수 할수 있는 좋은기회인것 같아서 희진님을 열심히 괴롭히고 있습니다!

ㅋㅋㅋㅋ 열심히 괴롭혀서 많이 빼먹으세요 😊👍