[1단계 - 페이먼츠] 마루(박규한) 미션 제출합니다.

[rbgksqkr]

안녕하세요 하루! 리액트 첫 미션 잘부탁드립니다 😁
리액트는 이전에 여러번 써봤는데 이번 미션에서는 공통 컴포넌트를 만들면서 범용성있는 컴포넌트를 만들기 위해 노력하였습니다.
사용자의 다양한 시나리오들을 생각해보면서 타입과 props를 유연하게 받을 수 있도록 구현하였습니다.

프로젝트 배포 : 프로젝트 배포 링크 (재배포)
storybook : storybook 배포 링크 (재배포)

실행 방법

npm i
npm run dev

✅ 구현 사항

공통 컴포넌트

• Input
  • 에러가 발생할 때 다른 스타일을 적용하기 위해 isError만 props로 전달 하고, 나머지는 rest 파라미터 를 이용하여 input 태그 자체 attributes도 자유롭게 props로 받기
• RegistrationLayout
  • 카드 번호, 유효 기간, 소유자명을 입력하는 폼 형태를 공통 컴포넌트로 구현

도메인 컴포넌트

• App
  • 모든 state를 관리하는 부모 컴포넌트
  • 해당 컴포넌트에서 useInput, useInputs 훅을 호출해 input 상태 관리
• CardPreview
  • 사용자가 입력하는 카드 정보들을 실시간으로 보여주는 preview 컴포넌트
  • 카드번호, 유효기간, 소유자명을 props로 받아 렌더링
• CardNumberContainer
• CardholderNameContainer
• CardExpiryDateContainer

custom hooks

• useInput
  • 단일 state 관리
  • expiryMonth, expiryYear, cardholderName
• useInputs
  • 객체 state 관리
  • ex) cardNumbers

💭 질문 사항

유효성 검증 로직

입력값에 대한 유효성 검증 로직을 어떻게 구현할 지에 대한 고민이 많았습니다. 현재 inquiry라는 계층을 만들어 유효성 검사와 에러 메세지를 반환 하는 2가지 작업을 처리하고 있습니다. 에러가 날 경우 에러 메세지를 반환하는데, 에러가 발생하지 않을 경우 빈 string을 반환하여 이를 정상적인 케이스로 판단하였습니다. 이 때 Error를 throw해서 try-catch로 에러를 처리하는 게 적절한 지, 현재 에러 처리 로직이 구조적으로 어떻게 느껴지는 지 궁금합니다!

스타일링 라이브러리 (CSS Module, styled-components, emotion)

첫 번째 선택은 CSS Module과 CSS in JS 였습니다. 둘 중에 CSS in JS를 선택한 이유는 스타일링을 컴포넌트 방식으로 묶어줌으로써 네이밍으로 의도를 밝힐 수 있고, 직관적으로 보여 개발자 경험이 향상된다고 생각하였습니다. 또한 특정 값에 따라 다른 스타일을 적용시킬 때 클래스 자체를 변경하지 않고 속성만 변경할 수 있다는 점에서 더 편리다고 생각합니다. 번째 선택은 styled-components와 emotion 입니다. styled-components 를 사용한 이유는 팀원의 숙련도 또는 러닝커브도 중요한 선택 이유라고 생각하는데, 사용해본 경험이 있는 스타일링을 사용하는 게 적합하다고 생각했습니다. 이러한 흐름이 적절한 지와 하루는 어떻게 라이브러리 선택을 결정하는 지 궁금합니다!

[rbgksqkr]

안녕하세요 하루! 여러 고민들을 하다가 리뷰 반영이 늦었네요ㅠ 코멘트마다 반영사항과 질문들을 추가하였는데 요약하면 다음과 같습니다.

• Input 공통 컴포넌트에 React.InputHTMLAttributes<HTMLInputElement> 타입 적용
• useCardInfo 훅을 구현하여 App 컴포넌트 역할 분리
• 반복되는 rename 제거하고 rest 패턴으로 구조분해할당
• ValidationStatus 인터페이스 활용하여 에러 반환값 처리, errorMessage로 에러 여부 확인 로직 제거
• HTML 태그 의미, 규칙에 맞게 수정( h1 → div(aria-level), p → span)
• InputField 스토리북 추가
• 유효성 검사 함수 inquire → validate 네이밍 수정
• 공통 레이아웃 RegistrationLayout → InputField 네이밍 수정

[365kim]

마루, 페이먼츠 1단계 미션 완료 축하드립니다 🥳

피드백 하나하나 깊이 고민하고 마루의 생각까지 곁들여 더 좋게 반영해주신게 느껴졌어요 👍 감사합니다.
이만 다음 단계로 넘어가도 좋을 것 같아요! 마루가 질문해주신 부분에 코멘트 남겨두었으니, 혹시 더 의견 나눠보고싶은 부분이 있다면 2단계에서 이어가 보아요 :)

2단계 작업도 기대하고 있을게요 고생하셨습니다 👏