최우진 sprint mission 4#65
Conversation
|
✅ |
reach0908
left a comment
reach0908
left a comment
There was a problem hiding this comment.
각 코드의 리뷰들이 다른 파일에서도 동일하게 적용되는 부분들이 있어 같이 개선하면 좋을 듯 싶습니다.
hook 이라는 개념을 통해 비동기 처리 로직을 관리하고 비동기 통신, async await를 사용할때는 항상 try catch와 같이 사용하면 좋습니다. 예상치못한 에러에 사용자가 불편을 겪지않도록 잘 관리할 수 있습니다.
| useEffect(() => { | ||
| const getProducts = async () => { | ||
| const params = new URLSearchParams({ | ||
| page: 1, | ||
| pageSize: 4, | ||
| orderBy: 'recent', | ||
| }); | ||
| const res = await fetch( | ||
| `https://panda-market-api.vercel.app/products?${params.toString()}` | ||
| ); | ||
| const data = await res.json(); | ||
| setProducts(data.list); | ||
| }; | ||
|
|
||
| getProducts(); | ||
| }, []); |
There was a problem hiding this comment.
비동기 API 요청들은 try catch문으로 감싸서 예상치못한 에러를 핸들링하면 좋습니다!
| <div className={styles.bestItemsContainer}> | ||
| <h2 className={styles.bestItem}>베스트 상품</h2> | ||
| <ul className={styles.bestItemsBox}> | ||
| {products.map((product) => ( |
There was a problem hiding this comment.
products 배열의 길이가 0인 경우 혹은 products가 배열이 아닐때를 핸들링하면 좋을 것 같습니다!
products?. 와 같이 옵셔널 체이닝 이란 것을 활용하면 됩니다
| currentPage, | ||
| handlePageChange, | ||
| }) { | ||
| const totalPages = Math.ceil(totalCount / pageSize); |
There was a problem hiding this comment.
totalCount가 숫자가 아니거나 undefined일때를 대비하여 핸들링을 해주면 좋을 것 같습니다!
const totalPages = Math.ceil(totalCount || 0) / pageSize)
| </div> | ||
| <div className={styles.footerBoxEnd}> | ||
| <a | ||
| href="https://www.facebook.com/login.php/?lang=ko" |
There was a problem hiding this comment.
외부 링크에 rel="noopener noreferrer" 속성이 없어 보안 취약점이 존재합니다 (Tabnabbing 공격)
| }, [orderBy, keyword, currentPage]); | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
단일 루트 요소만 있는 경우에는 해당 Fragment는 없어도 괜찮습니다!
DevWoojin97
added
최종제출
3 participants
아직 css 적용 못한 상태입니다