Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[양성경] Sprint5 #120

Conversation

KR-Programmer-SKY
Copy link
Collaborator

요구사항

기본

공통

  • Github에 스프린트 미션 PR을 만들어 주세요.
  • React를 사용해 진행합니다.

중고마켓

  • PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
  • 중고마켓 페이지 url path는 별도로 설정하지 않고, '/'에 보이도록 합니다.
  • 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.
  • 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products" 를 활용해주세요.
  • 상품 목록 페이지네이션 기능을 구현합니다.
  • 드롭 다운으로 "최신 순" 또는 "좋아요 순"을 선택해서 정렬을 구현하세요.
  • 상품 목록 검색 기능을 구현합니다.
  • 베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products"의 정렬 기준 favorite을 사용해주세요.

심화

공통

  • 커스텀 hook을 만들어 필요한 곳에 활용해 보세요.

중고마켓 페이지

  • 중고 마켓의 카드 컴포넌트를 반응형으로 만드세요.
  • 페이지네이션 기능을 반응형으로 구현하세요.

주요 변경사항

스크린샷

  • 아직 다 못 만들어서 주말에 작업하고 올리겠습니다.

멘토님께

질문

  1. 미션4까지 썼던 html, css, js 파일들은 해당 브랜치에서 지우고 일단 html 파일들만 옮겨둔 상황입니다. 하지만 로그인, 회원가입 페이지 등은 남아있어야 할 것 같은데(연결 필요), 이전에 리액트를 안 쓰고 만들었던 파일들은 어떻게 정리해야 할까요? (예시: 폴더를 만들어서 옮김, 지움, etc.)
  2. 예전에 썼던 파일들이 필요하다면, 예전 index.html을 public 디렉토리에 넣고 수정해야 할까요? 그러면 현재 index.html은 market.html 등으로 이름을 바꿔야 할 것 같은데… 예전 파일 관련해 전반적으로 설명해 주셨으면 합니다. 그리고 확장해서, 실무에서 이런 일 - 바닐라 자바스크립트만 쓰다가 갑자기 리액트 환경으로 바꾸는 일 - 이 종종 생기는지 여부도 궁금합니다. 만약 이런 일이 발생한다면 어떻게 처리하는지도요.

미션 수행 관련

  • 제가 현재 react 문법 절반 정도와 자바스크립트 일부 개념을 이해하지 못한 상태라(ㅜㅜ), 더 공부해야 할 것 같습니다. 공부하고 주말에 마저 작업해서 올리겠습니다.

@KR-Programmer-SKY
Copy link
Collaborator Author

  • 아직 진행 중이지만, 딱 봐도 코드가 잘못된 게 있다! 싶다면 말씀해 주시면 감사합니다.

@dokdo2013
Copy link
Collaborator

질문

  1. 미션4까지 썼던 html, css, js 파일들은 해당 브랜치에서 지우고 일단 html 파일들만 옮겨둔 상황입니다. 하지만 로그인, 회원가입 페이지 등은 남아있어야 할 것 같은데(연결 필요), 이전에 리액트를 안 쓰고 만들었던 파일들은 어떻게 정리해야 할까요? (예시: 폴더를 만들어서 옮김, 지움, etc.)
    -> 복잡하지 않다면 react로 옮겨보는 것도 좋은 경험이 될거라고 저는 생각하는데요, 만일 시간이 부족하고 양이 많으면 public 폴더에 html 파일을 넣는게 좋은 해결책이 될 수 있습니다.

  2. 예전에 썼던 파일들이 필요하다면, 예전 index.html을 public 디렉토리에 넣고 수정해야 할까요? 그러면 현재 index.html은 market.html 등으로 이름을 바꿔야 할 것 같은데… 예전 파일 관련해 전반적으로 설명해 주셨으면 합니다. 그리고 확장해서, 실무에서 이런 일 - 바닐라 자바스크립트만 쓰다가 갑자기 리액트 환경으로 바꾸는 일 - 이 종종 생기는지 여부도 궁금합니다. 만약 이런 일이 발생한다면 어떻게 처리하는지도요.
    -> 실무에서는 두 환경을 동시에 살려두지 않고 react로 통으로 옮기는게 제일 많은 것 같구요. 리액트 신규 프로젝트와 기존 레거시 코드가 한 레포지토리에 보통 섞여있지 않아서, 서로 분리되어 유지보수하고 분리되어 배포하는게 일반적입니다. (이런 케이스가 거의 없긴 합니다)

Copy link
Collaborator

@dokdo2013 dokdo2013 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 리액트 세팅할 때 사용한 것은 Create React App인데요, 이제 지원 종료된다고 합니다. React 공식 홈페이지에서도 추천 세팅방법에서 빠진지 꽤 되었고, 요즘은 Vite나 Next.js 기반으로 세팅하는게 가장 일반적인 듯 합니다. 참고 부탁드립니다.

https://news.hada.io/topic?id=19242

Copy link
Collaborator

@dokdo2013 dokdo2013 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다! 아직 미완이라 페이지 구현부가 누락되어있는 걸로 이해했고, 나중에 작업해주시면 다음 리뷰에서 보충해서 리뷰드리겠습니다.

Comment on lines +23 to +40
const fetchProducts = async () => {
try {
const response = await fetch(
`https://panda-market-api.vercel.app/products?pageSize=${pageSize}`
);
const data = await response.json();
if (Array.isArray(data.list)) {
setProducts(data.list);
setSortProducts(
data.list.sort((a, b) => b.favoriteCount - a.favoriteCount)
);
} else {
console.error("API 응답 오류:", data);
}
} catch (error) {
console.error("데이터 반환 오류:", error);
}
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

API 문서에 있는 옵션을 잘 활용해보면 좋겠습니다. 현재는 pageSize만 활용하고 있지만, 베스트 상품을 표시할 때는 orderBy 옵션을 쓸 수도 있겠죠. 아직 미완이라 구현되지 않은 것으로 이해되고 추가 작업하실 때 고려해보시면 좋겠습니다!

스크린샷 2025-03-12 오후 10 18 47

Comment on lines +12 to +15
const sortByFavorite = (items) => {
if (!Array.isArray(items)) return [];
return [...items].sort((a, b) => b.favoriteCount - a.favoriteCount);
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아래 리뷰와 같이 데이터를 먼저 가져온 뒤 정렬하지 말고, API의 쿼리 파라미터를 이용해 정렬해주세요

@KR-Programmer-SKY KR-Programmer-SKY closed this by deleting the head repository Mar 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants