React 임경민 미션 6

[play-ancora-gyungmin]

미션 6 요구사항

기본 요구사항

공통

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

프론트엔드 구현 요구사항

랜딩 페이지

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

중고마켓 페이지

• 중고마켓 페이지 url path를 "/items"으로 설정하세요.
• 페이지 주소가 "/items" 일 때 상단내비게이션바의 "중고마켓" 버튼의 색상은 "3692FF"입니다.
• 중고마켓 페이지 판매 중인 상품은 본인이 만든 GET 메서드를 사용해 주세요.
  • 다만 좋아요 순 정렬 기능은 제외해 주세요.
  • 사진은 디폴트 이미지로 프론트엔드에서 처리해주세요.
  • 베스트 상품 목록 조회는 구현하지 않습니다.
• '상품 등록하기' 버튼을 누르면 "/registration" 로 이동합니다. ( 빈 페이지 )

상품 등록 페이지

• PC, Tablet, Mobile 디자인에 해당하는 상품 등록 페이지를 만들어 주세요.
• 상품 등록 url path는 "/registration"입니다.
• 상품 등록은 본인이 만든 POST 메서드를 사용해 주세요.
• 등록 성공 시, 해당 상품 상세 페이지로 이동합니다. (빈페이지)

심화 요구사항

프론트엔드 구현 요구사항

상품 등록 페이지

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

배포 주소

https://sprint-fs9-fe-8711b7.netlify.app/

[devbini]

🎉 고생하셨습니다!

딱히 뭔가 더 손 댈 필요를 못 느낄 정도로 좋은 코드였습니다.
지난번에 말씀드렸던 디바운싱 관련 내용도 새로운 커스텀 훅으로 처리했고,
기능별 파일/폴더 구분도 완벽한 것 같습니다.

다만 그래서인지, 더 욕심 나는 부분이 있네요.
일부 코드에서 발견되는 오타 (DEFULT_PAGE, isFromVaild)나,
HTML 형태로 작성 되어 react 형태로 변경 해 주어야 하는 부분도 잡아주면 좋을 것 같습니다.

아, 그리고.. Summit 부분을 보면

 <form action="" className={styles.itemRegistForm}>
        <section className={styles.formTop}>
          <h2 className={styles.formTitle}>상품 등록하기</h2>
          <input
            type="submit"
            onClick={handleSubmit}
            className="s-btn compact"
            value="등록"
            disabled={!isFromVaild}
          />
        </section>

이런 코드가 있는데,
form 태그 안에 onSummit이란 옵션이 있답니다.
이 방식으로 하면,, 사용자가 Enter를 눌렀을 때 자동으로 인식하게 한다던가, 웹 표준에 맞게 개발할 수도 있어요)

https://jacobgrowthstory.tistory.com/59
한번 읽어보시면 좋을 것 같아요 :D😁

[devbini]

🪛 Fix Point

다른 부분도 마찬가지로, 전체적으로 HTML의 class 속성을 그대로 쓰고 있네요.
React에서는 class가 아니라, className을 사용해야 한답니다!

https://ko.legacy.reactjs.org/docs/faq-styling.html

[devbini]

☕ Thinking

현재 기준 최신 버전에서는 모두 react-router를 써야 한다고 몇몇 분들과 개발자들이 이야기합니다.
다만, 실제 취업 시장이나 레거시 등, 기존에 개발되어 오던 다양한 react 프로젝트는 react-router-dom를 사용하는 경우가 많습니다.
일반 react-router는 React DOM을 사용하지 않았고, 최신 v7 이후부터 논의되고 있는 주제이지만.. 그런 게 있다~ 라고 알고 넘어 가 주시면 됩니다.

https://www.reddit.com/r/react/comments/1i4tj58/what_is_the_difference_between_reactrouter_and