[김치영] sprint5

[Chiman2937]

요구사항

기본

중고마켓

• 중고마켓 페이지 주소는 “/items” 입니다.

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

• 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.

• 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.

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

• 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

• 중고마켓 반응형

  • 베스트 상품
    • Desktop : 4개 보이기
    • Tablet : 2개 보이기
    • Mobile : 1개 보이기
  • 전체 상품
    • Desktop : 12개 보이기
    • Tablet : 6개 보이기
    • Mobile : 4개 보이기

심화

• 페이지 네이션 기능을 구현합니다.

주요 변경사항

• 미션1~4 전체 React로 수정

배포

https://sprint-mission-kcy.netlify.app/

스크린샷

네비게이션 바 디자인

• 네비게이션 바 컴포넌트를 공용으로 사용 하다보니 로그인을 해야 정상적으로 보입니다. 일단 이메일, 비밀번호 규칙에만 맞으면 로그인이 되도록 만들었습니다.

로그아웃 상태

로그인 상태

현재 주소 표시(중고마켓)

현재 주소표시(자유게시판)

---

반응형 디자인(PC)

반응형 디자인(TABLET)

반응형 디자인(MOBILE)

반응형 디자인(pageSize 설정)

PC(베스트상품, 전체상품 순)

TABLET(베스트상품, 전체상품 순)

MOBILE(베스트상품, 전체상품 순)

---

상품정렬 - 최신순

상품정렬 - 좋아요순

---

상품검색(Enter입력 시)

---

페이지네이션

다른 디바이스 화면으로 변경 시 보고있던 상품 위치 유지

이전/다음 버튼 불필요 시 비활성화

멘토에게

• request를 보낼 때 offset을 보내는것이 아닌 page번호와 pageSize만 보내다보니, 페이지네이션 구현할 때 디바이스 모드가 바뀌어도 원래 보고있던 데이터를 계속 볼 수 있는 기능을 구현하기 위해 offset과 현재페이지번호 둘다 state로 관리하였는데, 이런 의도의 문제가 맞는지, 더 좋은 해결 방법이 있는지 궁금합니다.

• 코드잇 강의에서는 offset과 cursor를 이용한 request 방식이 나왔었는데 offset, cursor,page번호 중 보통 어떤 방법을 많이 쓰는지 궁금합니다. 그리고 이 3가지 말고 또 다른 방법도 있는지도 궁금합니다.

• 리액트 특성 상 서로 다른 컴포넌트가 서로 다른 css 파일을 참조하더라도 class이름이 같으면 스타일이 겹치는 문제가 있었는데, css module을 사용하는게 가장 최선일까요? 다른 방법이 있다면 어떤 방법이 있는지 궁금합니다.

• 로그인/회원가입 폼의 input필드를 컴포넌트화 시켜서 작업을 해봤는데, 이런식으로 작업을 하는 게 맞을까요?

        <form className="form-container" onSubmit={onSubmitRedirect}>
          <Field
            id={'email'}
            labelText={'이메일'}
            placeholder={'이메일을 입력해주세요'}
            ariaLabel={'이메일 입력 칸'}
            type={'email'}
            autoComplete={'email'}
            value={values['email']}
            valid={valids['email']}
            hint={hints['email']}
            isVisible={isVisibles['email']}
            handleInputChange={handleInputChange}
            handleInputBlur={handleInputBlur}
            handlePasswordIconClick={handlePasswordIconClick}
          />

• 커스텀 훅을 사용해서 기능 구현을 해봤는데, 이런식으로 쓰는게 맞는지 궁금합니다.
• 현재 작업 내용에서 명확하지 않아 보이는 변수명이 있는지 궁금합니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
미션 내용뿐만 아니라 기존 html로 만들었던 페이지들까지 전부 리액트로 작업해보셨군요 👍
덕분에 한번에 리뷰하는 양이 많긴했는데, 치영님의 열정에 감동받아 최대한 리뷰를 꽉꽉 채워드려봤습니다 ㅎㅎㅎ

앞으로도 열심히 학습하시고 코드리뷰 제출해주세요! 🙏

주요 리뷰 포인트

• 관심사 분리 원칙에 따른 컴포넌트 분리
• 재사용 가능한 로직과 UI 분리
• 분산된 상태 업데이트 로직에 대한 중앙 집중화 처리
• useState 초기값 동기적 함수 실행에 대한 피드백

[addiescode-sj]

질문에 대한 답변

멘토에게

• request를 보낼 때 offset을 보내는것이 아닌 page번호와 pageSize만 보내다보니, 페이지네이션 구현할 때 디바이스 모드가 바뀌어도 원래 보고있던 데이터를 계속 볼 수 있는 기능을 구현하기 위해 offset과 현재페이지번호 둘다 state로 관리하였는데, 이런 의도의 문제가 맞는지, 더 좋은 해결 방법이 있는지 궁금합니다.

네! offset을 상태로 유지하는 것은 구현하고자하는 결과를 생각했을때 괜찮은 방법인것같아요!
더 개선해보자면 totalCount(전체 아이템 수) 상태를 따로 추가해서 currentPageNumber, pageNumbers, lastPageIndex와 같은 페이지네이션 표시에 필요한 값들을 offset, totalCount, 그리고 deviceType에서 파생되는 pageSize로부터 직접 계산하여 사용하게되면 좋겠네요!

• 코드잇 강의에서는 offset과 cursor를 이용한 request 방식이 나왔었는데 offset, cursor,page번호 중 보통 어떤 방법을 많이 쓰는지 궁금합니다. 그리고 이 3가지 말고 또 다른 방법도 있는지도 궁금합니다.

보통 일반적인 페이지네이션은 offset과 limit을 사용해 구현하는 편이고,
커서 기반은 일반적인 페이지네이션보다 실시간으로 데이터가 자주 변경되는 경우나 무한 스크롤이 있을때 좀 더 적합한 방식입니다 :)

• 리액트 특성 상 서로 다른 컴포넌트가 서로 다른 css 파일을 참조하더라도 class이름이 같으면 스타일이 겹치는 문제가 있었는데, css module을 사용하는게 가장 최선일까요? 다른 방법이 있다면 어떤 방법이 있는지 궁금합니다.

네, 클래스 이름이 해당 컴포넌트에만 적용되게끔 컴포넌트 단위로 스코프를 한정하고싶다면, 일반적인 css보다는 모듈화된 형태의 css를 사용하시는 방법이 현재로는 가장 깔끔한 방법이 될 것 같네요 :) 추가적으로 사용 목적이 생기면 css-in-js를 사용해도되고 utility first 접근법을 가진 Tailwind를 사용하셔도되는데, 이건 아직 학습하지않으셨을테니 천천히 공부해보셔도 무방합니다!

• 로그인/회원가입 폼의 input필드를 컴포넌트화 시켜서 작업을 해봤는데, 이런식으로 작업을 하는 게 맞을까요?

        <form className="form-container" onSubmit={onSubmitRedirect}>
          <Field
            id={'email'}
            labelText={'이메일'}
            placeholder={'이메일을 입력해주세요'}
            ariaLabel={'이메일 입력 칸'}
            type={'email'}
            autoComplete={'email'}
            value={values['email']}
            valid={valids['email']}
            hint={hints['email']}
            isVisible={isVisibles['email']}
            handleInputChange={handleInputChange}
            handleInputBlur={handleInputBlur}
            handlePasswordIconClick={handlePasswordIconClick}
          />

• 커스텀 훅을 사용해서 기능 구현을 해봤는데, 이런식으로 쓰는게 맞는지 궁금합니다.
• 현재 작업 내용에서 명확하지 않아 보이는 변수명이 있는지 궁금합니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

=> 본문 내에서 자세히 피드백 드렸습니다!