[황승찬] Sprint9#142
Hidden character warning
Conversation
Irelander
left a comment
Irelander
left a comment
There was a problem hiding this comment.
이번 Sprint9의 핵심 요구사항은 React Query, React-Hook-Form, Axios Interceptors 등 프론트엔드 최신 라이브러리 활용이었는데, 이 세 가지를 전혀 사용하지 않으신 점이 매우 아쉽습니다 ㅠㅠ
이번 스프린트엔 못하셨더라도 꼭꼭! 실제 프로젝트에서는 너무나 많이 쓰이고 유용한 기술이기때문에 적용해보셨으면 좋겠습니다 :)
이번 스프린트도 고생 많으셨어요!
There was a problem hiding this comment.
-
.then((res) => res.data)부분이 잘못됐어요!
API 응답 구조는 { accessToken, refreshToken, user } 인데
res.data를 하면 undefined가 반환됩니다. -
catch에서 에러 메시지(문자열)를 반환하는데,
호출하는 쪽에서 res.accessToken을 기대하면 undefined 에러 발생!
| <div className="inline-flex gap-[8px] "> | ||
| {product.tags.map((tag) => { | ||
| return <div className={styles.tag} key={product.tags.indexOf(tag)}> | ||
| <p>{`#${tag}`}</p> | ||
| </div> | ||
| })} | ||
| </div> |
There was a problem hiding this comment.
key로 indexOf를 사용하면 매번 배열 전체를 순회해요.
tags가 100개면 100 * 100 = 10,000번 연산!
| </ul> | ||
| ) | ||
| } | ||
|
|
There was a problem hiding this comment.
-
useEffect 의존성 배열 문제:
useEffect(()=>{ handleLoad(); }, []);
id가 의존성 배열에 없어서 id가 변경되어도 데이터 재조회가 안될꺼 같아요 ㅎㅎ -
에러 처리 없음:
getProduct(id), getComments(id)가 실패해도 아무 처리 없는데 네트워크 요청은 항상 에러가 발생할 수 있기 때문에 에러처리를 하면 좋을꺼 같아요 ㅎㅎ
| @@ -29,7 +35,12 @@ export default function InputForm({ | |||
| return ( | |||
| <div className={styles.inputForm}> | |||
| <label>{label}</label> | |||
There was a problem hiding this comment.
label에는 for 속성을 통해 접근성을 높힐 수 있어요 :(
2 participants
요구사항
기본 요구사항
공통
=> 코드잇 서버 CORS 설정 때문에 사용이 붏가했습니다.
로그인/회원가입 페이지
로그인 페이지
회원가입 페이지
로그인, 회원가입 페이지 공통
GNB
상품 상세 페이지
PC, Tablet, Mobile 디자인에 해당하는 상품 상세 페이지를 만들어 주세요.
상품 상세 페이지 url path는 "/items/{itemId)"로 설정하세요.
'목록으로 돌아가기' 버튼 클릭 시 중고마켓 페이지 "/items"로 이동합니다.
상품 상세 데이터는 '/products/{productId}' GET 메서드 사용해 불러오세요. 이때, 상품 상세 조회는 인가된 사용자만 이용할 수 있도록 합니다.
상품에 대한 댓글 조회도 가능합니다.
상품 수정 및 삭제 기능을 API를 활용해 구현합니다. 이때, 인가된 사용자만 이용할 수 있도록 합니다.
상품 수정은 '/products/{productId}' PATCH을 사용합니다.
상품 삭제는 '/products/{productId}' DELETE를 사용합니다.
상품 삭제 전, 확인 모달을 띄워주세요.
상품에 대한 좋아요 및 좋아요 취소 기능을 https://panda-market-api.vercel.app/docs에 명세된 '/products/{productId}/favorite' POST & DELETE 활용해 구현합니다. 이때 인가된 사용자만 좋아요 기능을 이용할 수 있도록 합니다.
=> 코드잇 서버 CORS 설정 때문에 사용이 붏가했습니다.
댓글 생성 및 삭제 기능을 API를 활용해 구현합니다. 이때, 인가된 사용자만 이용할 수 있도록 합니다.
댓글 수정은 https://panda-market-api.vercel.app/docs에 명세된 '/comments/{commentId}' PATCH을 사용합니다.
댓글 삭제는 https://panda-market-api.vercel.app/docs에 명세된 '/comments/{commentId}' DELETE를 사용합니다.
=> 코드잇 서버 CORS 설정 때문에 사용이 붏가했습니다. 제가 구현한 백서버를 통해 구현했습니다.
심화 요구사항
로그인 및 회원가입 페이지 공통
PC: 1200px 이상
Tablet: 744px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 743px 이하
375px 미만 사이즈의 디자인은 고려하지 않습니다
유저 기능
리퀘스트 헤더에 인증 토큰을 첨부할 때 axios interceptors를 활용해 주세요. (axios를 사용하지 않는다면 이와 유사한 기능을 활용해 주세요.)
React-Query로 마이그레이션
fetch 혹은 axios로 구현된 기존의 API 요청 코드를 React-Qeury로 마이그레이션 합니다.
로딩 및 에러 핸들링
상품 데이터 캐싱 및 업데이트
주요 변경사항
스크린샷
멘토에게