[우아한테크코스] 페이먼츠 1단계 회고

컴포넌트 작성 및 분리

Kepp

• 이번 미션의 목표는 CDD(Component-Driven Developmenet)에 따라 UI를 구성하고 재사용하는 것이다.
• 미션의 목표에 맞게 작은 컴포넌트부터 개발했다. 그리고 컴포넌트의 재사용을 고민하면서 개발했다.

Problem - Try

1. 컴포넌트를 작은 단위로 나누어서 개발했지만 조립해서 잘하지 못했다.

   • 아래는 이번 미션의 입력 폼 부분에 대한 예시 이미지이다.
     

     

   • 입력 타입과 너비 등이 다르지만 모두 Label과 Input 컴포넌트를 조립해서 만든 LabeledInput 컴포넌트를 사용했다.

   • 이런 방식으로 진행하니 컴포넌트를 담고 있는 페이지에서 가독성이 떨어지는 현상이 발견됐다.

   • 따라서 작은 컴포넌트를 조립해서 입력 종류에 따라 컴포넌트를 만들었다면 가독성이 떨어지는 문제가 해결될 거 같다.

예시 코드

• 기존 예시 코드

  // CardAddPage.jsx
  // 카드 번호에 대한 input
  <LabeledInput
  value={convertedCardNumbers.join('-')}
  handleInputChange={handleChangeCardNumbersInput}
  invalidMessage={MESSAGE.INVALID_CARD_NUMBER}
  inputProps={{
    type: 'text',
    width: '318px',
    maxLength: 19,
    placeholder: 'ex. 0000-0000-0000-0000',
    isValid: cardAddCondition.cardNumbers,
  }}
  inputLabelProps={{
    label: '카드 번호',
  }}
  />
  // 만료일에 대한 input
  <LabeledInput
  value={convertedExpiredDate}
  handleInputChange={handleChangeExpiredDateInput}
  invalidMessage={MESSAGE.INVALID_EXPIRED_DATE}
  inputProps={{
    type: 'text',
    width: '137px',
    maxLength: 5,
    placeholder: 'MM / YY',
    isValid: cardAddCondition.expiredDate,
  }}
  inputLabelProps={{
    label: '만료일',
  }}
  />

• 개선 예정 예시 코드

  // CardAddPage.jsx
  // 카드 번호에 대한 input
  // CardNumberInput과 ExpiredDateInput은 각각 하위 컴포넌트인 Label과 Input 컴포넌트를 조립해서 만든 컴포넌트로 가정
  <CardNumberInput />
  // 만료일에 대한 input
  <ExpiredDateInput />

2. stateless하게 작성한 Input 컴포넌트를 테스트하는 방법
   • 이번 미션에서 작성한 Input 컴포넌트는 외부에서 상태 값과 상태 값 변경 함수를 주입받는다.
   • 즉, input 태그의 value와 onChange를 상위에서 주입받는 형태이다.
   • 해당 컴포넌트는 상태 값과 함수를 자유롭게 전달하는 개발 환경에서는 문제없었다. 하지만 컴포넌트를 테스트하는 storybook을 이용할 때 문제가 생겼다.
   • 예를 들어 상태 값 변경 함수에 구현한 입력 값 검증 기능을 storybook에서 테스트를 할 수 없었다.
   • 실제 컴포넌트의 동작과 테스트의 동작이 달라서 storybook을 이용하여 개발하는 의미가 퇴색됐다.
   • 이를 해결하기 위해 storybook에서 상태 값을 주입할 수 있는 방법에 대해 공부하려 한다. 또한 잘 작성된 storybook 예시 코드를 확인하여 적절한 방법을 찾으려 한다.

상태 값 관리

Keep

• 프로젝트를 시작할 때 pages라는 디렉터리에 각 페이지를 구현하도록 설계했다.
• 각 페이지는 해당 페이지에서 필요한 상태 값을 갖도록 구현했다. 페이지와 관련된 상태 값이 한 곳에 있어서 쉽게 상태 값 변경 흐름을 파악할 수 있었다.

Problem - Try

1. 비즈니스 로직과 UI 코드가 잘 분리되지 않았다.(확신은 없지만 그렇게 보인다.)

   • 페이지는 UI 코드이다. 반면 상태 값과 상태 값을 처리하는 함수들은 비즈니스 로직(도메인 영역)이라 생각한다.
   • 때문에 페이지 내부에 상태 값과 관련된 함수들이 존재한다는 것은 비즈니스 로직과 UI 코드가 분리되지 않은 것이라 생각한다. 이는 유지 보수를 어렵게 만든다.
   • 따라서 비즈니스 로직과 UI 코드를 분리하는 방법에 대해 찾아보고 리팩터링해야 한다. 지금 떠오르는 방법은 비즈니스 로직에 관련된 코드를 CustomHook으로 작성하는 것이다.

2. 페이지 별로 상태 값을 공유하는 방법에 대한 고민이 필요하다.

   • 현재 미션에는 하나의 페이지만 존재하기 때문에 페이지 내부에서 상태 값을 관리하는 것이 충분하다.
   • 하지만 추후에 요구사항 추가로인해 새로운 페이지가 추가되면 페이지 간의 상태 값 공유가 필요할 수 있다.
   • 따라서 상태 값을 공유하는 방법에 대해 고민할 필요가 있다. 현재는 Context API의 도입을 생각하고 있다.