[원치준] sprint6

[CHIJUNEE]

요구사항

기본 요구사항

공통

• Github에 스프린트 미션 PR을 만들어 주세요.
• React, Express를 사용해 진행합니다.

프론트엔드 구현 요구사항

랜딩 페이지

• HTML과 CSS로 구현한 랜딩페이지를 React로 마이그레이션하세요.
• 랜딩 페이지 url path는 "/"로 설정하세요.

중고마켓 페이지

• 중고마켓 페이지 url path를 "/items"으로 설정하세요.

• 페이지 주소가 "/items" 일 때 상단내비게이션바의 "중고마켓" 버튼의 색상은 "3692FF"입니다.

• 중고마켓 페이지 판매 중인 상품은 본인이 만든 GET 메서드를 사용해 주세요.

• 다만 좋아요 순 정렬 기능은 제외해 주세요.

• 사진은 디폴트 이미지로 프론트엔드에서 처리해주세요.

• 베스트 상품 목록 조회는 구현하지 않습니다.

• '상품 등록하기' 버튼을 누르면 "/registration" 로 이동합니다. ( 빈 페이지 )
  상품 등록 페이지

• PC, Tablet, Mobile 디자인에 해당하는 상품 등록 페이지를 만들어 주세요.

• 상품 등록 url path는 "/registration"입니다.

• 상품 등록은 본인이 만든 POST 메서드를 사용해 주세요.

• 등록 성공 시, 해당 상품 상세 페이지로 이동합니다. (빈페이지)

백엔드 구현 요구사항

중고마켓

• Product 스키마를 작성해 주세요.

  • id, name, description, price, tags, createdAt, updatedAt필드를 가집니다.
  • 필요한 필드가 있다면 자유롭게 추가해 주세요.

• 상품 등록 API를 만들어 주세요.

  • name, description, price, tags를 입력하여 상품을 등록합니다.

• 상품 상세 조회 API를 만들어 주세요.

  • id, name, description, price, tags, createdAt를 조회합니다.

• 상품 수정 API를 만들어 주세요.

  • PATCH 메서드를 사용해 주세요.

• 상품 삭제 API를 만들어 주세요.

• 상품 목록 조회 API를 만들어 주세요.

  • id, name, price, createdAt를 조회합니다.
  • offset 방식의 페이지네이션 기능을 포함해 주세요.
  • 최신순(recent)으로 정렬할 수 있습니다.
  • name, description에 포함된 단어로 검색할 수 있습니다.

• 각 API에 적절한 에러 처리를 해 주세요.

• 각 API 응답에 적절한 상태 코드를 리턴하도록 해 주세요.

• . env 파일에 환경 변수를 설정해 주세요.

• CORS를 설정해 주세요.

• render.com로 배포해 주세요.

• MongoDB를 활용해 주세요.

심화 요구사항

프론트엔드 구현 요구사항

상품 등록 페이지

• 모든 입력 input box에 빈 값이 있을 경우, 등록 버튼이 비활성화됩니다.
• 태그를 입력한 후 엔터키를 누르면, 그 태그가 칩 형태로 쌓입니다.
• 상품명, 상품 소개, 판매 가격, 태그에 대한 유효성 검사 Custom Hook을 만들어주세요. 유효성 검사를 통과하지 않을 경우, 각 input에 빨간색 테두리와, 각각의 Input 아래에 빨간색 에러 메시지를 보여주세요.
  • 유효한 조건
    • 상품명: 1자 이상, 10자 이내
    • 상품 소개: 10자 이상, 100자 이내
    • 판매 가격: 1자 이상, 숫자
    • 태그: 5글자 이내

스크린샷

멘토에게

• 판다마켓 서버 POST 권한 문제가 발생해서 로컬에서 진행했습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[Irelander]

치준님 코드 전체적으로 정말 훌륭했어요. 솔직히 실무에서 바로 써도 될 정도로 완성도가 높았습니다. 아키텍처도 체계적으로 잘 잡혀 있고, UX나 접근성까지 챙긴 부분이 특히 인상적이었어요. 성능 최적화나 에러 처리도 꼼꼼하게 해주셔서 보는 내내 “아, 이건 진짜 신경 많이 썼구나” 싶었습니다.

아쉬운 점을 굳이 꼽자면, 백엔드 코드를 별도 레포지토리로 분리하지 않은 게 조금 아쉽긴 했어요.( BE 레포지토리가 있는데 혹시 뭔가 이유가 있는걸까요 ? ) 프론트랑 분리해서 관리했으면 더 좋았을꺼 같아요 ㅎㅎ

에러처리에 디테일만 더 챙기시면 진짜 어디서든 자신 있게 내놓을 수 있는 수준이라고 생각합니다. 지금도 이미 초급 단계를 훌쩍 넘어선, 중급 이상 역량을 충분히 보여주셨어요. 👍

[Irelander]

실제 운영에서는 복수 ( products ) 단수 ( product ) 엔드포인트를 적절하게 나눠서 작성하는게 유리합니다.

[Irelander]

오류 처리할때 네트워크 오류와 서버 오류를 구분해서 다른 메세지를 보여주면 더 좋을것 같아요!
그리고 성공 했을경우 토스트 메세지나 확인 모달과 같은 피드백처리를 하면 UX가 향상될 것 같습니다 :)

( 중요한건 아니지만 추가로, 로딩 상태중 사용자가 페이지를 벗어날때 처리같은걸 추가해주면 좋습니다 )

[Irelander]

오 ㅎㅎ 모든 비동기 함수의 에러를 일관되게 처리하려고 한 시도 좋은데요 ? ㅎㅎ