/react-payments

⚛️ React 모바일 페이먼츠 애플리케이션 💳

Primary LanguageTypeScript

Level2 - 페이먼츠

React 모바일 페이먼츠 애플리케이션

💳 페이먼츠 페이지 링크

페이먼츠 실행 화면

📍 학습 목표

Component-Driven Development 에 따라 UI를 구성하고 재사용 가능한 Component를 작성합니다.

  • 모바일 타겟의 웹 앱을 구현하며 사용하기 편리한 모바일 UI/UX에 대해 고민해봅니다.
  • 다른 라이브러리나 프레임워크 없이 오로지 React만으로 상태를 관리하고 컴포넌트를 설계합니다.
  • 재사용 가능한 Component를 직접 작성하고 사용합니다.

🚀 Step1 - Component-Driven Development

🙏 페어(페어프로그래밍)

쿠마(박영진) 프로필 레고(박정규) 프로필
쿠마(박영진) 레고(박정규)

📝 필수 요구 사항

카드 등록을 위한 form을 CDD로 구현한다. Storybook으로 UI 컴포넌트 렌더링 REQUIREMENTS.md에 요구 사항 도출 재사용 가능한 Component 작성 ✅ 프로그래밍 요구사항 이전 미션의 프로그래밍 요구사항은 기본으로 포함한다.

Readability

  • API 요청을 처리하는 공통 함수나 커스텀 훅을 작성하여 재사용 가능하게 만든다.
  • 페이지 간 공통 스타일이 있는 경우 스타일 컴포넌트를 분리하여 재사용한다.

Reusability

  • 서버와의 통신을 담당하는 코드와 UI를 렌더링하는 코드를 분리하여 관심사를 분리한다.
  • 에러 처리 로직을 명확하게 작성하여 코드의 가독성을 높인다.

Performance

  • 불필요한 상태 관리를 최소화하고, 상태 업데이트를 최적화한다.
  • 컴포넌트의 리렌더링을 최소화하기 위해 memoization을 적용한다.

📁 라이브러리

tailwindcss와 유틸성이 강한 라이브러리를 제외하고는 미션 해결을 위해 사용해도 괜찮습니다. ex) styled-components, react-router-dom 등 하지만 미션의 요구 사항 문제를 해결하기 위한 용도가 아닌, 욕심을 위한 라이브러리라면 레벨2에는 참아주세요~!