Conversation
There was a problem hiding this comment.
현재 루트의 .gitignore에 node_module 폴더를 추가하셨지만 이미 git에서 추적되고 있는 것 같습니다!
이 경우 git의 cached를 삭제 후 다시 컴밋해 보시면 changes에서 node_moules가 제외된걸 확인하실 수 있습니다!
git rm -r --cached .
git add .
git commit -m "fix untrack files"
There was a problem hiding this comment.
리액트 프로젝트는 루트 폴더에 설정해 주셔야 합니다!
| export const ItemCard = ({ item }) => { | ||
| return ( | ||
| <div className="itemCard"> | ||
| <img className="itemCardImg" src={item.images[0]} alt={item.name} /> |
There was a problem hiding this comment.
이미지의[0]이 없는 경우를 상정해 방어 코드가 추가되면 좋을 것 같습니다!
| import facebook from "../../sprint/img/ic_facebook.png"; | ||
| import twitter from "../../sprint/img/ic_twitter.png"; | ||
| import youtube from "../../sprint/img/ic_youtube.png"; | ||
| import instagram from "../../sprint/img/ic_instagram.png"; |
There was a problem hiding this comment.
이미지 파일을 상대 경로로 설정해 주셨는데 프로젝트 규모가 커지고 복잡해질수록 상대 경로 사용이 어려워 질 수 있습니다. 한 번 절대 경로로 작성해 보시는걸 연습해 보시는건 어떠실까요?
| const dataLoad = async ({ orderBy, page, pageSize, keyword }) => { | ||
| const products = await getProducts({ orderBy, page, pageSize, keyword }); | ||
| setItems(products.list); | ||
| setMaxPage(Math.ceil(products.tatalCount / pageSize)); |
There was a problem hiding this comment.
tatalCount는 오타인 것 같습니다!
| useEffect(() => { | ||
| dataLoad({ orderBy, page, pageSize, keyword }); | ||
| }, [orderBy, page, pageSize, keyword]); |
There was a problem hiding this comment.
useEffect 를 사용하여 의존성 값을 확인하고 있으므로 다른 이벤트 핸들러에서 dataLoad를 호출할 필요가 없습니다!
| <img src={SearchIcon} alt="Search Icon" /> | ||
| <input | ||
| placeholder="검색할 상품을 입력해 주세요" | ||
| value={keyword} |
There was a problem hiding this comment.
현재 구현상 keyword에 입력될 때 마다 API를 호출하게 됩니다. 이는 서버에 불필요한 부하를 주고, 유저는 마지막 입력 전 까지 검색결과가 없다는 창을 보게 되 사용성을 떨어트립니다. 별도의 검색 버튼을 만들거나, debounce라는 방식을 도입해 보시면 더욱 좋을 것 같습니다!
| const [maxPage, setMaxPage] = useState(); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [keyword, setKeyword] = useState(""); | ||
| const [pageSize, setPageSize] = useState(10); |
There was a problem hiding this comment.
pageSize는 변경하는 함수가 없는 것 같습니다!
coldplay126
merged commit ba707d5
into
codeit-sprint-fullstack:react-심유빈
react-심유빈-sprint5
스프린트미션 5 작업입니다.
주요 변경사항
요구사항
기본요구사항
공통
중고마켓 페이지
심화 요구사항
공통
중고마켓 페이지
최대한 할 수 있는 부분까지 했습니다...