[장준혁] Sprint12

[CitrusSoda]

요구사항

기본

중고마켓

• ‘상품 등록하기’ 버튼을 누르면 “/additem” 로 이동합니다.
• 각 상품 클릭 시 상품 상세 페이지로 이동합니다.
• 상품 상세 페이지 주소는 “/items/{productId}” 입니다.
  상품 상세
• 내가 등록한 상품일 경우 상품 수정, 삭제가 가능합니다.
• 문의하기 input창에 값을 입력 후 ‘등록’ 버튼을 누르면 댓글이 등록됩니다.
• 내가 등록한 댓글은 수정, 삭제가 가능합니다.
  상품 등록
• 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• 활성화된 ‘등록' 버튼을 누르면 상품 등록이 완료됩니다.
• 등록이 완료되면 해당 상품 상세 페이지로 이동합니다.

주요 변경사항

• React 기반 프로젝트이므로 React-장준혁 브랜치로 통합하였습니다.
• axiosInstance를 따로 만들어 토큰 및 refreshToken을 관리하였습니다.
• 과거 리액트 프로젝트와 마이그레이션 중 시간이 부족하여 로그인은 버튼 클릭시 바로 로그인이 되도록, 수정 삭제는 본인이 작성한 제품 혹은 댓글일 시 따로 드롭다운을 이용하지 않고 수정, 삭제로 표현하였습니다.

스크린샷

스프린트미션 12 배포 사이트

멘토에게

• axios와 react-query를 섞어쓸 때 모든 로직을 react-query로 관리를 하는 것이 좋을까요?
• 실무에서 NextJS와 react-query를 이용할 때 쿼리 함수들은 모두 fetch로 관리하는지, axios를 이용해도 괜찮은지 궁금합니다! (axios로 header 설정, interceptor, baseUrl을 편하게 이용할 수 있으니 사용해도 괜찮은지 궁금합니다)

[lisarnjs]

진짜로 잘하시는데요..
아직 좀 더 봐야겠지만 제가 뭐 코드리뷰 막 달아드릴만한 것도 없을정도로!
axios 도 많이 사용하고 react-query도 많이 사용하는데 각자의 장점을 잘 살려서 적재적소로 사용해보시면 될 것 같아요!
두 개를 혼용해서 사용한다고 전혀 문제되지 않으니 각각의 사용 이유를 잘 파악해보세요 :)
이번주도 화이팅입니다~~

[lisarnjs]

우선 질문에 답을 먼저 하자면,
axios 사용 너무너무 좋아합니다 react-query가 있더라도 axios 많이 사용합니다!
interceptor라는 기능 자체가 너무 유용하기도 하구요 👍

[lisarnjs]

보통 BASE_URL까지 빼는데 이것은 정석이네요 👍 굿굿

[lisarnjs]

로딩중이거나 api를 fetch하는 중일 때의 얼리 리턴이 필요합니다!

[lisarnjs]

await axiosInstance.get('/users/me'); 같은 부분들도 함수로 추출할 수 있곘져
예를 들면

async function fetchMe() {await axiosInstace.get("~~")}

// ItemIntroduction.tsx
const response = await fetchMe()