[남만재] sprint5 #218

10000jaeN · 2025-07-06T08:16:28Z

요구사항

기본

중고마켓 페이지 주소는 “/items” 입니다.
페이지 주소가 “/items” 일때 상단네비게이션바의 “중고마켓" 버튼의 색상은 “3692FF”입니다.
상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
[] ‘상품 등록하기’ 버튼을 누르면 “/additem” 로 이동합니다 ( 빈 페이지 )
카드 데이터는 제공된 백엔드 API 페이지의 GET 메소드인 “/products”를 사용해주세요
미디어 쿼리를 사용하여 반응형 view 마다 물품 개수를 다르게 보여줍니다 (서버로 요청하는 값은 동일)
베스트 상품
Desktop : 4개 보이기
Tablet : 2개 보이기
Mobile : 1개 보이기
전체 상품
Desktop : 10개 보이기
Tablet : 6개 보이기
Mobile : 4개 보이기

심화

페이지 네이션 기능을 구현합니다.
반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.

주요 변경사항

스크린샷

좋아요순

검색 좋아요순

검색 최신순

멘토에게

최적화가 필요한 부분을 이유와 함께 알고싶습니다
모바일 사이즈에서 ListTools를 플렉스로 구현해서 뷰포인트에 따라 너비가 늘어나면 한줄로 합쳐지기에 최대너비를 고정해주었는데 반응형을 뷰포인트에 맞게 자연스럽게 늘어나게 하려면 제가 사용한 플렉스 방식은 알맞지 않을걸까요?
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

… 방식)

style: ProductList 스타일 추가

addiescode-sj

수고하셨습니다!
첫 리액트 미션인데, 미션 구현도 어렵지않게 하시고 깔끔하게 잘 짜시네요 👍
리팩토링 해보시면서 최적화나 유지보수를 고려해 개발해보는 시야도 넓혀봅시다! ㅎㅎ

주요 리뷰 포인트

App 컴포넌트에서 관심사 분리가 필요한 이유
deps list 최적화로 불필요한 effect 실행 방지하기
구조분해할당 (destruction)으로 코드 간소화하기
직관적인 네이밍 사용하기, 재사용될 수 있는 로직은 커스텀 훅으로 분리하기
svg 컴포넌트화해서 property 자유자재로 다루기
resize 이벤트 debounce 적용해 최적화하기

addiescode-sj · 2025-07-08T05:31:17Z

src/App.js

+  useEffect(() => {
+    if (width < BREAK_POINT.md) {
+      setBestPageSize(1);
+      setPageSize(4);
+    } else if (width < BREAK_POINT.lg) {
+      setBestPageSize(2);
+      setPageSize(6);
+    } else {
+      setBestPageSize(4);
+      setPageSize(10);
+    }
+  }, [width]);


deps list에 있는 width가 바뀔때마다 effect가 실행되게하기보다는,
브레이크포인트별 md, lg 값이 true인지 아닌지(deviceType 계산) 먼저 계산한 후,
실제 이 값이 바뀔때에만 effect가 실행될수있도록 만들어주는편이 불필요한 작업을 줄일 수 있겠네요 :) 지금 구조대로라면 width가 1px이라도 바뀐다면 effect가 실행될테니까요!

이렇게 개선해보는건 어떨까요?

// 디바이스 타입 계산 const getDeviceType = (width) => { if (width < BREAK_POINT.md) return 'mobile'; if (width < BREAK_POINT.lg) return 'tablet'; return 'desktop'; }; const deviceType = getDeviceType(width); useEffect(() => { if (deviceType === 'mobile') { setBestPageSize(1); setPageSize(4); } else if (deviceType === 'tablet') { setBestPageSize(2); setPageSize(6); } else { setBestPageSize(4); setPageSize(10); } }, [deviceType]);

getDeviceType 함수 추가해, width를 인자로 받아서 'mobile', 'tablet', 'desktop' 중 하나를 반환하는 함수를 만들고 이 함수를 사용해 deviceType 의 값을 계산합니다.

그리고 useEffect 의존성 배열을 deviceType으로 변경해주면, 실제로 디바이스 타입이 바뀔 때만 effect가 실행되도록 개선해보는 코드인데요!

이렇게 해주면 width가 바뀌어도 같은 디바이스 타입 범위 내에서는 불필요한 effect 실행을 방지할 수 있고, 디바이스 타입이 좀 더 명확하게 구분되어 코드의 의도를 더 명확하게 드러낼 수 있어 로직 분리 및 유지보수도 쉬워지겠죠? :)

안그래도 1px 마다 리렌더링 되는것에 있어서 고민이 있었는데 마음이 급해서 깊게 생각하지 못했네요,, 이렇게 단순 명료한 방법이 있었다니...감사합니다~!

addiescode-sj · 2025-07-08T05:35:53Z

src/App.js

+        const result = await getBestProducts();
+        setBestProducts(result.list);


Suggested change

const result = await getBestProducts();

setBestProducts(result.list);

const { list } = await getBestProducts();

setBestProducts(list);

이렇게 구조분해할당을 활용하시면 좀더 간소화되겠네요!

그럼 밑에 전체상품 fetch 함수도 try...catch 문으로 수정해서 구조분해 할당으로 list와 totalCount를 받아와서 사용하는게 더 나은 방법일까요?

ㅎㅎ 나중에 타입스크립트를 사용하게되면 조금 상황이 달라질거예요.

setBestProducts에 담기는 데이터의 타입이 undefined인 경우도 허용이 된다면 구조분해할당으로 바로 넣으셔도되고,
허용하고싶지않다면 optional chaining을 활용하기 위해 setBestProducts(result?.list); 로 유지해주시는게 좋습니다 :)

addiescode-sj · 2025-07-08T05:39:00Z

src/App.js

+  const [products, setProducts] = useState([]);
+  const [bestProducts, setBestProducts] = useState([]);
+  const [bestPageSize, setBestPageSize] = useState(1);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(4);
+  const [orderBy, setOrderBy] = useState("recent");
+  const [keyword, setKeyword] = useState("");
+  const [totalCount, setTotalCount] = useState();


App.js파일에서 data fetching 및 state & effect 관리를 하고계시네요 :)
해당 컴포넌트는 리턴문에서 리턴되는 모든 컴포넌트를 렌더링할때 쓰입니다.

즉, 이 컴포넌트에서 data fetching을 시도하게되면 해당 자원이 필요없는 컴포넌트에서는 필요하지도 않은 자원이 요청되고, 초기 로딩이 지연되는 상황이 발생하겠죠?

따라서 해당 data fetching 로직은 필요한 컴포넌트에서만 (Products 컴포넌트에서) 직접 데이터를 가져오도록 옮기시는게 더 나은 구조를 위한 관심사 분리 원칙에서도, 성능을 위해서도 좋은 선택입니다.

state 관리 & data fetching 로직을 관련된 컴포넌트에서 직접 하도록 옮겨봅시다!

pr 후에 발견해서 Items 페이지 컴포넌트로 변경해주었습니다!

addiescode-sj · 2025-07-08T05:43:27Z

src/components/Buttons.js

+  const totalPages = Math.ceil(totalCount / pageSize);
+  const groupSize = 5;
+  const currentGroup = Math.floor((page - 1) / groupSize);
+  const startPage = currentGroup * groupSize + 1;
+  const endPage = Math.min(startPage + groupSize - 1, totalPages);
+
+  const handlePageClick = (newPage) => {
+    if (newPage >= 1 && newPage <= totalPages) {
+      setPage(newPage);
+    }
+  };
+
+  const pageNums = [];
+  for (let i = startPage; i <= endPage; i++) {
+    pageNums.push(i);
+  }


src > components 아래 있는 컴포넌트들은 보통 공용 컴포넌트 역할을 하는데요!
해당 로직은 페이지네이션을 위한 로직처럼 보여요.
만약 페이지네이션 버튼을 재사용할 목적이었다면, 재사용될수있는 로직 (페이지네이션 기능 부분)을 커스텀훅으로 분리해주는게 좀더 재사용성을 높이면서도 코드 중복을 줄여줄 수 있는 좋은 방법이 될 수있고, 해당 컴포넌트의 이름 또한 PaginationButton과 같이 이름만 봐도 역할을 알 수 있는 직관적인 네이밍으로 변경해주는게 좋을것같네요 :)

폴더 구조에 대한 이해가 부족한 듯 합니다... 알려주셔서 감사합니다!
그럼 커스텀 훅으로 리팩토링 한다 하였을 때 productList 컴포넌트에서 해당 훅을 사용한는 것이 일반적일까요?

네, 커스텀 훅으로 페이지네이션 로직을 리팩토링 한다 가정한다면 필요한 컴포넌트에서 직접 훅을 호출하시면됩니다.
페이지네이션 로직이 필요한 UI가 있겠죠?

addiescode-sj · 2025-07-08T05:44:22Z

src/components/Dropdown.js

+  useEffect(() => {
+    const onClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, []);


이렇게 outside click을 감지해 isOpen state을 처리하는 로직도 재사용 가능성이 있으니 커스텀훅으로 분리해보는건 어떨까요? :)

addiescode-sj · 2025-07-08T05:51:48Z

src/components/Header.js

+  useEffect(() => {
+    if (width > BREAK_POINT.md - 1) {
+      setNavLogo(iconLogo);
+    }
+    if (width < BREAK_POINT.md) {
+      setNavLogo(logo);
+    }
+  }, [width]);


아까와 비슷하게 width를 deps list로 사용하고있는 문제가 발생했고, 코드 구조도 비슷하네요! 반복되는 코드들이 있고, 값을 사용하는 패턴도 동일하다면 아예 커스텀 훅으로 만들어보는게 좋을것같은데요? :)

useResponsiveValue

import { useMemo } from "react"; import useViewportWidth from "./useViewportWidth"; export default function useResponsiveValue(breakpoint, desktopValue, mobileValue) { const width = useViewportWidth(); const value = useMemo(() => { return width >= breakpoint ? desktopValue : mobileValue; }, [width, breakpoint, desktopValue, mobileValue]); return value; }

사용할 때

const navLogo = useResponsiveValue(BREAK_POINT.md, iconLogo, logo);

이렇게해주면 불필요한 effect 실행도 줄이면서 코드 중복을 효율적으로 줄일 수 있겠네요 :)

불필요한 effect 줄이기에 대한 더 자세한 예시는 아래 아티클 참고해보세요!
참고

오 그럼 단순 반응형만을 위해 만든훅이고 useViewportWidth 훅은 따로 개별 사용될 여지가 없을거라 생각되는데 그렇다면 이걸 하나의 훅으로 묶어버리는게 더 나을수도 있겠네요 ㅎㅎ 감사합니다!

앗 제가 로직을 잘못 읽었군요 이렇게 사용하면 반응형으로 이미지 로드하는 방식을 더 간소화 할 수 있겠네요 감사합니다!

addiescode-sj · 2025-07-08T06:01:42Z

src/components/ProductItem.js

+      />
+      <div>{product.name}</div>
+      <div css={productPrice}>{product.price.toLocaleString() + "원"}</div>
+      <div css={productCount}>{`♡ ${product.favoriteCount}`}</div>


ㅎㅎㅎ 나중에 like 기능도 붙여야하니까 svg 아이콘으로 미리 바꿔봅시다!
이 경우에는 인터렉션을 처리하며 like버튼이 채워지거나 색깔이 바뀌는등 property를 활용해야하니 컴포넌트화하는게 좋을것같아요.

관련해서 아티클 참고해보시면 도움되실것같네요!
참고

addiescode-sj · 2025-07-08T06:03:55Z

src/hooks/useViewportWidth.js

resize 이벤트가 너무 빈번하게 일어날수있으니, debounce를 적용해서 최적화해보는건 어떨까요?
참고

addiescode-sj · 2025-07-08T06:17:18Z

질문에 대한 답변

멘토에게

최적화가 필요한 부분을 이유와 함께 알고싶습니다
네, 본문 내용에 상세히 답변드렸는데 더 궁금한 부분 있으시면 질문 주세요! :)

모바일 사이즈에서 ListTools를 플렉스로 구현해서 뷰포인트에 따라 너비가 늘어나면 한줄로 합쳐지기에 최대너비를 고정해주었는데 반응형을 뷰포인트에 맞게 자연스럽게 늘어나게 하려면 제가 사용한 플렉스 방식은 알맞지 않을걸까요?

최대 너비를 고정값으로 고정하게되면 뷰포트가 늘어나도 너비가 고정되어 자연스럽게 늘어나지않습니다.
뷰포트에 맞게 자연스럽게 늘어나는게 원래 의도가 맞다면 최대 너비 고정값을 사용하지않고 이런식으로 활용해주시는게 좋습니다:

 width: 100%;
 max-width: 344px;

그리고, 요소가 남은 공간을 모두 차지하고싶게 만들고싶다면 flex:1; 을 쓰거나, 지정된 비율로 차지하게 만들고싶다면 flex-basis 혹은 %를 사용해 주시면 좀 더 유연하게 설정이 될거예요 :)

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

10000jaeN added 11 commits July 1, 2025 10:31

프로젝트 초기 세팅, 패키지 다운로드, Header 컴포넌트

0a328b5

음...기본 틀,,? 커밋 깜빡했어요,,

b90ebbd

style: mobile 사이즈에서 기본 스타일 적용

2582d15

feat: Buttons 컴포넌트 추가

da721f6

feat: productList 페이지네이션 구현, refact: BestProducts 렌더링 방식 변경(query받아오는…

5bc98e2

… 방식)

feat: 화살표 버튼에 onClick 추가, 조건부 스타일 추가, active 스타일 추가

7fcdbbc

feat: 오류시 기본이미지 추가, 이미지 undefined일 경우에도 기본 이미지로 대체

889d0d3

feat: 상태 추가

4b703df

style: ProductList 스타일 추가

feat: Dropdown 컴포넌트 추가

9b830df

style: 반응형

7864eb4

feat: 검색기능 추가

a6f19c2

10000jaeN added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jul 6, 2025

addiescode-sj self-requested a review July 8, 2025 04:11

addiescode-sj approved these changes Jul 8, 2025

View reviewed changes

		const result = await getBestProducts();
		setBestProducts(result.list);

[남만재] sprint5 #218

Are you sure you want to change the base?

[남만재] sprint5 #218

Uh oh!

Conversation

10000jaeN commented Jul 6, 2025

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

addiescode-sj left a comment

Choose a reason for hiding this comment

주요 리뷰 포인트

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

addiescode-sj Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

addiescode-sj commented Jul 8, 2025

질문에 대한 답변

멘토에게

Uh oh!

Uh oh!

addiescode-sj Jul 10, 2025 •

edited

Loading