[조규진] Sprint5

[gjrefa9139]

요구사항

기본

중고마켓

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

중고마켓 반응형

• 베스트 상품
• Desktop : 4개 보이기
• Tablet : 2개 보이기
• Mobile : 1개 보이기
• 전체 상품
• Desktop : 10개 보이기
• Tablet : 6개 보이기
• Mobile : 4개 보이기

심화

• 페이지 네이션 기능을 구현합니다.

주요 변경사항

스크린샷

멘토에게

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

[201steve]

수고많으셨습니다!!

마이그레이션이 남아있는 컴포넌트들도 차근차근 해보시면 금방 될꺼에요! 화이팅!!!

[201steve]

Suggested change

	<ItemCard item={item} key={`best-item-${item.id}`} />
	<ItemCard item={item} key={`best-item-${item.id}`} />

중복되지 않은 고유한 key로 잘 해주셨습니다!
react에서 map에 사용되는 key는 고유한 값이고, 요소마다 중복되지않으면 됩니다.
하드코딩 되어있는 best-item- 부분은 계속 같은 값이라 영향을 주지않고, item.id만 key값으로 쓰더라도 문제없이 잘 동작합니다. :-)

[201steve]

Suggested change

	<p className='itemPrice'>{item.price.toLocaleString()}원</p>
	<p className='itemPrice'>{item.price.toLocaleString("ko-KR")}원</p>

꿀팁 공유~
number.toLocaleString에 첫번째 인자로 "ko-KR"을 넘겨주면 천 단위마다 자동으로 콤마를 찍어주는 기능이 있어요!:-)

[201steve]

지금도 물론 잘해주셨는데,
함수는 하나의 일만 하도록 만들면 좋습니다.

products를 불러오는일,
state를 업데이트 하는일 이렇게 두 함수로 나눠서 관리하면 디버깅하거나 유지보수 하는데에 도움이 됩니다.

//products를 fetching 하는일
const fetchProducts = async ({ orderBy, page, pageSize } => {
  return await getProducts({ orderBy, page, pageSize });
};
//state를 업데이트 하는일
const updateItemList = (products) => {
    setItemList(products.list);
    setTotalPageNum(Math.ceil(products.totalCount / pageSize));
  };


useEffect(()=>{
const handleResize = ()=>{}
..
.. 
생략

//분리된 함수를 정의한 함수
const loadData = async () => {
      const products = await fetchProducts({ orderBy, page, pageSize });
      updateItemList(products);
    };
//useEffect 안에서 실행
    loadData();
   
    return ()=>{}
생략
...
},[])

[201steve]

className이나 변수 이름짓는건 항상 어렵죠.. 어느선까지 구체적으로 해야할지 애매모호해서 더 자세하게 붙이다보면 본의아니게 길어지곤 합니다.
저는 이름이 길어지면 일단 의미는 지킬 수 있으면서 줄일 수 있는 단어가 있는지 찾는편이에요.

예를들면

Suggested change

	<div className='sortButtonWrapper'>
	<button className='sortDropdownTriggerButton' onClick={toggleDropdown}>
	<div className='sortWrapper'>
	<button className='sortButton' onClick={toggleDropdown}>

이렇게요 :-)

[201steve]

Suggested change

	const maxVisiblePages = 5;
	const MAX_VISIBLE_PAGES = 5;

잘 해주셨습니다! 어떤 숫자인지 변수로 잘 처리해주셨어요!
이렇게 변하지 않는 값을 의미하는 네이밍 컨벤션은 UPPER_SNAKE_CASE로 보통 이름짓습니다 참고해 주세요~