Conversation
| window.removeEventListener("resize", updatePageSize); | ||
| }; | ||
| }, []); | ||
|
|
There was a problem hiding this comment.
useDevice 로 custom hook을 따로 빼 주세요!
| handleError(e); | ||
| } | ||
| }; | ||
|
|
There was a problem hiding this comment.
프론트앤드에서는 service라고 이름을 작성하지 않습니다.
| const res = await instance.get("/", { | ||
| params: { orderBy, page, pageSize, keyword }, | ||
| }); | ||
|
|
There was a problem hiding this comment.
validation 로직 작성은 너무 잘 하셨어요!!!! 프론트에서 인풋 로직 검사할 때 쓰이는거 아시죠??
| <div className="top-sell-product"> | ||
| <p className="sub-title">판매 중인 상품</p> | ||
| <div className="sell-product-contents"> | ||
| <SearchProduct onSearch={setSearchKeyword} /> |
There was a problem hiding this comment.
자동 검색 기능을 구현하신 아이디어는 매우 훌륭합니다. 현재는 데이터 양이 적어 입력할 때마다 필터링이 원활하게 이루어지지만, 데이터가 많아지면 입력할 때마다 서버에 요청을 보내는 방식은 서버 부하를 증가시키고, 사용자 인터페이스의 반응 속도를 저하시킬 수 있습니다.
이러한 문제를 해결하기 위해 lodash 라이브러리의 debounce 함수를 사용하여 입력이 일정 시간 동안 멈출 때까지 함수 호출을 지연시키는 방법을 권장드립니다. 이렇게 하면 불필요한 서버 요청을 줄여 성능을 최적화할 수 있습니다.
예를 들어, 다음과 같이 debounce를 적용할 수 있습니다.
import _ from 'lodash';
const handleInputChange = (event) => {
// 입력 변경 시 호출되는 함수
const query = event.target.value;
// 서버에 요청 보내기 또는 데이터 필터링 로직
};
// 입력 변경 함수에 debounce 적용 (500ms 지연)
const debouncedHandleInputChange = _.debounce(handleInputChange, 500);
// 이벤트 리스너에 debounced 함수 사용
inputElement.addEventListener('input', debouncedHandleInputChange);이렇게 하면 사용자가 입력을 멈춘 후 500밀리초 후에 함수가 호출되어 불필요한 호출을 방지할 수 있습니다.
| // } catch (e) { | ||
| // handleError(e); | ||
| // } | ||
| // }; |
There was a problem hiding this comment.
저의 개인적인 의견으로 공부용으로 이렇게 주석처리 하시는건 무방한다고 생각합니다만, 보통 현업에서 PR을 올릴 경우 주석은 지우는게 보통입니다.
There was a problem hiding this comment.
하지만 왜 주석처리를 하셨는지 명확히 하시기 위해 // TODO: will be depricated 등을 명시하는게 좋습니다.
| ); | ||
| } | ||
|
|
||
| export default App; |
There was a problem hiding this comment.
사실 저는 custom hook을 무작정 쓰는 것보다 프로젝트가 커져서 비슷한 로직이 반복될 때 리팩토링 하시는걸 더 추천하긴 합니다!
| </div> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
이 파일은 왜 jsx가 아니라 js이죠? js에서는 이렇다고 해서 문제가 발생하진 않습니다만 typescript로 넘어가면 ts랑 tsx 구분 없이는 syntex 에러가 발생합니다.
| @@ -0,0 +1,15 @@ | |||
| import "./BestProduct.css"; | |||
There was a problem hiding this comment.
import styles from .... 한번 알아보세요!
요구사항
기본 요구사항
공통
중고마켓 페이지
PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
중고마켓 페이지 url path는 별도로 설정하지 않고, '/'에 보이도록 합니다.
상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.
상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products" 를 활용해주세요.
상품 목록 페이지네이션 기능을 구현합니다.
드롭 다운으로 "최신 순" 또는 "좋아요 순"을 선택해서 정렬을 구현하세요.
상품 목록 검색 기능을 구현합니다.
베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products"의 정렬 기준 favorite을 사용해주세요.
심화 요구사항
공통
중고마켓 페이지
주요 변경사항
배포 링크
https://6-sprint-mission-fe-vhfh-9intrwx9i-choi-mks-projects.vercel.app/
스크린샷
멘토에게