Conversation
| <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <meta | ||
| name="description" | ||
| content="Web site created using create-react-app" | ||
| /> | ||
| <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> | ||
| <!-- | ||
| manifest.json provides metadata used when your web app is installed on a | ||
| user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ | ||
| --> | ||
| <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> | ||
| <!-- | ||
| Notice the use of %PUBLIC_URL% in the tags above. | ||
| It will be replaced with the URL of the `public` folder during the build. | ||
| Only files inside the `public` folder can be referenced from the HTML. | ||
|
|
||
| Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will | ||
| work correctly both with client-side routing and a non-root public URL. | ||
| Learn how to configure a non-root public URL by running `npm run build`. | ||
| --> |
There was a problem hiding this comment.
아에 과감하게 다 지워버리셨군요ㅋㅋ
기본값으로 제공되는거라 있으면 좋은것도 있고 (meta viewport, manifest 등)
아에 내용을 바꿔주어야 하는 부분도 있고 (description, icon 등)
기존에 og 태그 넣으셨던거 가져와서 여기에 넣어주는것도 좋을것같아요ㅎㅎ!
There was a problem hiding this comment.
아 그래도 사용하지 않는 리소스 파일을 삭제해주는건 매우 좋아요ㅎㅎ!
| <BrowserRouter> | ||
| <Header /> | ||
| <Routes> | ||
| <Route path="/" element={<MainPage />} /> | ||
| <Route path="/items" element={<UsedMarketPage />} /> | ||
| <Route path="/additem" element={<PostProductPage />} /> | ||
| </Routes> | ||
| </BrowserRouter> |
src/asset/판다 얼굴.png
Outdated
There was a problem hiding this comment.
이거는 파일명만 바꾸면 좋을것같아요ㅋㅋ
한글 파일을 쓰는 경우에 가끔 인코딩 문제같은게 생길떄가 있어서ㅠㅠㅠ
| const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`; | ||
| const response = await fetch( | ||
| `https://panda-market-api.vercel.app/products?${query}` | ||
| ); | ||
| const data = await response.json(); | ||
| return data; |
There was a problem hiding this comment.
오~ 이거 진짜 잘만드셨네요!
디폴트값도 처리하시구...!
위에 있는것도 충분히 잘 짠 코드긴 한데, 문제가 있어요ㅠ
- query params가 추가될떄마다 query가 지저분해 질꺼에요.
- query params가 없는 경우는 사용할 수 없어요.
그래서 이렇게 고쳐볼 수 있어요!
export async function getProduct({
page = 1,
pageSize = 4,
orderBy = "favorite",
}) {
// 기본 URL 설정
const baseURL = "https://panda-market-api.vercel.app/products";
// URL 객체 생성
const url = new URL(baseURL);
// URLSearchParams를 사용해 쿼리 파라미터 추가
url.searchParams.set("page", page);
url.searchParams.set("pageSize", pageSize);
url.searchParams.set("orderBy", orderBy);
// API 호출
const response = await fetch(url.toString());
const data = await response.json();
return data;
}| const [orderBy, setOrderBy] = useState("recent"); | ||
| const [page, setPage] = useState(1); | ||
| const handleLoad = async (value) => { | ||
| let result = await getProduct(value); |
There was a problem hiding this comment.
매우 짜치긴 하지만...ㅋㅋ;;
상수는 const 를 쓰는 습관을 들이면 좋아요ㅎㅎ!
const result = await getProduct(value);There was a problem hiding this comment.
보니까 component 폴더에 각각 css 랑 js 를 같은 폴더에 모아둔것같아요...!
그럼 혹시 각 컴포넌트를 폴더에 넣고 js랑 css를 쌍으로 넣으면 어떨까요?
📦 components
┣ 📂 AllProduct
┃ ┣ 📜 AllProductItem.js
┃ ┣ 📜 AllProductItem.css
┃ ┣ 📜 AllProductList.js
┃ ┗ 📜 AllProductList.css
┣ 📂 BestProduct
┃ ┣ 📜 BestProductItem.js
┃ ┣ 📜 BestProductItem.css
┃ ┣ 📜 BestProductList.js
┃ ┗ 📜 BestProductList.css
┣ 📂 Navigation
┃ ┣ 📜 Header.js
┃ ┣ 📜 Header.css
┃ ┣ 📜 NavBar.js
┃ ┗ 📜 NavBar.css
┗ 📂 Pagination
┣ 📜 PageButton.js
┗ 📜 PageButton.css
| <NavBar handleOrder={handleOrder} /> | ||
| <div className="allproduct-list"> | ||
| {items.map((item) => { | ||
| return <AllProductItem key={item.id} item={item} />; |
There was a problem hiding this comment.
오? key까지 잘 써주셨네요ㅋㅋ!
잘 하셨네여ㅎㅎ
| setItems(list); | ||
| }; | ||
| useEffect(() => { | ||
| handleLoad({ page, pageSize: 10, orderBy }); |
There was a problem hiding this comment.
여기에 pageSize 도 상태값으로 관리하면 어떨까요??
| handlePage(page + 1); | ||
| }; | ||
|
|
||
| const PageGroup = [1, 2, 3, 4, 5]; |
There was a problem hiding this comment.
페이지가 6이 넘어갔을때 처리는 여기서 하면 되겠네요ㅎㅎ!
지금은 1~5까지 고정으로 보이는데, 이 숫자들은 props로 내려오는 page 값에 따라서 바꿔주면 되겠네요!
page값을 기준으로 5개가 나오도록이요
React에서도 BEM 로 물론 할 수 있습니다! 그래서 사실 지금까지 해오셨던것처럼 전역에 적용되는 import "./component.css" 처럼 가져오는게 아니라 아래와 같이 module css 방식을 많이 사용해요! import style from './Button1.module.css'
export default function Button({size}) {
if (size==='big') {
return <button className={`${style.button} ${style.big}`}>큰 버튼</button>
} else {
return <button className={`${style.button} ${style.big}`}> 작은 버튼</button>
}
}이밖에도 css in js 같이 jsx 코드에 css 코드를 삽입하기도 하구요ㅎㅎ!
이부분은 위에 리뷰에도 남겨두긴 했는데, props로 넘어오는 page 를 이용해서 앞위로 숫자 5개가 나오게끔 처리하면 아마 하실 수 있을거에요! 참고로 함수를 호출해서 가져오는것도 가능해요!ㅎㅎ 이런식으루요ㅎㅎ! 전체적으로 깔끔하게 잘 작성하신것같습니다ㅎㅎ |
요구사항
기본
중고마켓
중고마켓 반응형
베스트 상품
Desktop : 4개 보이기
Tablet : 2개 보이기
Mobile : 1개 보이기
전체 상품
Desktop : 12개 보이기
Tablet : 6개 보이기
Mobile : 4개 보이기
심화
주요 변경사항
스크린샷
멘토에게