Conversation
| "react-scripts": "5.0.1", | ||
| "react-slick": "^0.30.2", | ||
| "slick-carousel": "^1.8.1", |
There was a problem hiding this comment.
케러셀 ui가 어느 부분에서 필요하다고 생각을 하셨나요?
| <nav> | ||
| <ul> | ||
| <li> | ||
|
|
||
| 자유게시판 | ||
|
|
||
| </li> | ||
| <li> | ||
| <div className="usedmarket"> | ||
| 중고마켓 | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </nav> |
There was a problem hiding this comment.
nav와 ul 태그를 잘 써주셨습니다. 자주 쓰이는 태그이고 시멘틱하게 잘 사용 할 수 있어요 !
|
|
||
| function MarketPage() { | ||
| return( | ||
| <div className="MarketPage"> |
There was a problem hiding this comment.
body아래에 제일 최상단이므로 main 태그가 더 어울려보입니다.
| useEffect(() => { | ||
| const fetchAndProcessData = () => { | ||
| const data = API; | ||
| const topFavoriteItems = getTopFavoriteItems(data, 4); | ||
| setItemList(topFavoriteItems); | ||
| }; | ||
|
|
||
| fetchAndProcessData(); | ||
| }, []); |
There was a problem hiding this comment.
api 사용대신에 임시 데이터를 사용하셨군요 아마 시간이 많이 없으셨나봅니다 !
혹시 api를 이용해 데이터를 가져오는 방법은 강의에서 보셨나요?
아래와 유사하게 작성해주시면 됩니다.
아래 코드의 바로쓰면 안되고 좀 더 작성을 하긴해야합니다 ㅎㅎ
const getItem = async ({ page, pageSize, orderBy, keyword }) => {
const query = `?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
const response = await fetch(
`https://panda-market-api.vercel.app/products` + query
);
};| key={item.id} | ||
| images={item.images} | ||
| name={item.name} | ||
| price={item.price} | ||
| favoriteCount={item.favoriteCount} |
There was a problem hiding this comment.
현재처럼 BestAllCard에서 사용하는 데이터 하나하나 props에 넣어주는것도 방법이지만
props가 많아 질 경우 컴포넌트의 수정이 번거롭다는 단점이 있습니다.
props로 item 객체를 통째로 넘겨서 쓸 수도 있습니다.
| key={item.id} | |
| images={item.images} | |
| name={item.name} | |
| price={item.price} | |
| favoriteCount={item.favoriteCount} | |
| item={item}} |
| <div className='Allcard-container'> | ||
| <img src={images[0]} alt="card이미지" /> | ||
| <h2>{name}</h2> | ||
| <h3>{price}원</h3> | ||
| <HeartIcon/> | ||
| <span>{favoriteCount}</span> | ||
| </div> |
There was a problem hiding this comment.
이 부분은 마크업이 완벽하네요 !
h2~h3 구분도 잘 되어있고 alt 속성도 빠짐없이 적어주셨네요 !
|
|
||
|
|
||
| function BestCard() { | ||
| const [itemList, setItemList] = useState([]); |
There was a problem hiding this comment.
useState에 디폴트값으로 빈 배열을 잘 넣어주셨습니다. 데이터 형식이 복잡 할 경우 객체도 디폴트값으로 사용 될 수 있습니다. 데이터가 없을 경우에 undefined로 인한 에러를 어느정도 방지 할 수 있습니다.
| {/* 캐러셀 버튼들 */} | ||
| <div className="paginationBarWrapper"> | ||
| <PaginationBar/> | ||
| </div> | ||
|
|
||
|
|
||
| </div> |
There was a problem hiding this comment.
캐러셀로 페이지네이션을 구현하려고 시도하셨군요 !
페이지네이션은 데이터를 불러오는 파라미터를 컨트롤해서 데이터를 새로 불러오는 작업을 합니다.
반면에 캐러셀은 이미 불러 와 있는 이미지 데이터를 어떤 UI를 보여주는 것입니다. ㅎㅎ
혹시 어떤점때문에 캐러셀이라고 생각하셨을까요?
| const handleSortSelection = (sortOption) => { | ||
| setOrderBy(sortOption); | ||
| setIsDropdownVisible(false); | ||
| }; // 정렬 옵션 선택시 옵션설정, 드롭다운 숨김 |
There was a problem hiding this comment.
이 부분 로직이 거의 맞는것 같은데 혹시 시간이 없으셨나요? ㅠㅠ
|
캐러셀을 통해서 어떤식으로 페이지 이동을 해야하는지 감이 안와서 참고 할만한 자료가 있을까요?? 제가 피드백에도 작성을 하긴했는데, 페이지네이션은 사용자가 입력하는 상태(useState)값에 따라서 데이터 페칭하는 url ( https://some-url.com/api?page=${page}&pageSize=${pageSize} ... ) 을 달리하여 다른 데이터를 가져와야합니다. 리액트 페이지네이션으로 검색했을때 페이지네이션을 직접 구현한 블로그 중 상위에 노출된 블로그들인데 https://imdaxsz.tistory.com/37 |
|
스프린트 미션하느라 수고많으셨습니다 ! 언제든지 질문주세요 ! |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
api를 가지고 와서 구현을 제대로 하지 못했습니다. -> 처음 데이터를 가져오는 부분을 전체 데이터를 긁어오다보니 js 파일을 만들때 수정해야 할 부분들이 많은것 같습니다..ㅠ 해당 부분은 다음주에 추가 수정하겠습니다..!
캐러셀을 통해서 어떤식으로 페이지 이동을 해야하는지 감이 안와서 참고 할만한 자료가 있을까요??
셀프 코드 리뷰를 통해 질문 이어가겠습니다.