Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This reverts commit e46d37a.
kich555
approved these changes
Dec 4, 2024
src/Api.js
Outdated
Comment on lines
1
to
11
| export async function productList({ orderBy = "recent" }) { | ||
| const query = `page=1&pageSize=10&orderBy=${orderBy}`; | ||
| const response = await fetch( | ||
| `https://panda-market-api.vercel.app/products?${query}` | ||
| ); | ||
| if (!response.ok) { | ||
| throw new Error("제품목록을 가지고 오는데 실패했습니다."); | ||
| } | ||
| const date = await response.json(); | ||
| return date; | ||
| } |
There was a problem hiding this comment.
export async function productList({
orderBy = "recent",
page = 1,
pageSize = 10,
} = {}) {
try {
// Query parameters 구성
const params = new URLSearchParams({
page: String(page),
pageSize: String(pageSize),
orderBy,
});
// API 호출
const response = await fetch(
`https://panda-market-api.vercel.app/products?${params}`
);
// 응답 상태 확인
if (!response.ok) {
throw new Error(
`Failed to fetch product list: ${response.status} ${response.statusText}`
);
}
// JSON 데이터 파싱
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching product list:", error);
throw error; // 필요시 상위 호출부에서 에러 핸들링
}
}이렇게 바꿔보시는건 어떤가요? ㅎ orderBy를 파라미터로 받는데 page와 pageSize를 받지 않을 이유는 없을것 같아요 ㅎ
추가로 에러에 대해 보다 유연한 처리등을 도입하면 더 좋을것 같습니다 ㅎ
throw new Error("제품목록을 가지고 오는데 실패했습니다."); 는 직관적이기는 하나 서버에서 내려주는 에러를 버리고 프론트엔드에서 에러를 다시 구성한다는 치명적인 단점을가지고 있어요
api request에서 발생하는 에러에 대한 이해도는 서버가 항상 더 많이 가지고 있기때문에 최대한 서버의 response를 활용하는것이 좋답니다
src/components/App.js
Outdated
Comment on lines
12
to
19
| const loadAllItems = async () => { | ||
| try { | ||
| const { list } = await productList({ orderBy: "recent" }); | ||
| setAllItems(list); | ||
| } catch (error) { | ||
| console.error("전체 상품 데이터를 불러오는 중 오류 발생:", error.message); | ||
| } | ||
| }; |
There was a problem hiding this comment.
async await 사용하신것 좋습니다 ㅎㅎ
다만 Try catch는 productList 함수 내부에서 처리하는게 좀더 목적성을 명확히 나누는 코드가 될 것 같네요 ㅎ
src/components/App.js
Outdated
Comment on lines
36
to
39
| useEffect(() => { | ||
| loadAllItems(); | ||
| loadBestItems(); | ||
| }, []); |
There was a problem hiding this comment.
개인적인 추천인데 useEffect를 사용하실 땐 왜 사용하는지에 대해서 주석을 남겨주면 좋아요!
src/components/ItemList.js
Outdated
| return ( | ||
| <ul> | ||
| {items.map((item) => { | ||
| console.log(item); |
There was a problem hiding this comment.
이건 아마 개발하다 끼어들어간 console.log인것 같은데 PR올릴때 이런건 다 지워주세요!
추후 미래를위한 좋은 습관으로 ㅎㅎ
src/App.jsx
Outdated
| path="/" | ||
| element={<Navigate to="/items" replace></Navigate>} | ||
| ></Route> | ||
| <Route path="/items" element={<Home></Home>}></Route> |
src/pages/Home/Home.jsx
Outdated
Comment on lines
50
to
67
| <form className="all-products__search-container"> | ||
| <input | ||
| type="text" | ||
| placeholder="검색할 상품을 입력해주세요" | ||
| className="all-products__input" | ||
| /> | ||
| <Link to="/additem" className="all-products__add-button"> | ||
| 상품 등록하기 | ||
| </Link> | ||
| <select | ||
| value={selectedOption} | ||
| onChange={handleOptionClick} | ||
| className="dropDown-products" | ||
| > | ||
| <option value="최신순">최신순</option> | ||
| <option value="인기순">인기순</option> | ||
| </select> | ||
| </form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게