AI Convergence

리액트 프로젝트를 위해 조사해봐야할 항목에 대해서 정리해 본다. 하기 구성에 대해 소스레벨의 준비과정을 작성해 본다.

개발환경

• micro-frontend를 지원하는 환경
• mono-repo기반 multi application을 개발할 수 있는 환경
• Nx.dev for React
  • 멀티 애플리케이션 개발 및 애프리케이션별 번들링
  • 라이브러리의 위치 투명성 보장 및 배포

구조 설계

• 1Layer: 애플리케이션
  • Layout: Feature 를 다루는 영역을 분할
  • Feature: UI + Data-Access 를 조합하여 업무 단위 화면을 구성
• 2Layer: 업무 라이브러리
  • UI: Layout, Feature의 부분을 담당하는 업무 컴포넌트
  • Data-Access: API 호출 및 Data Caching
  • Data-Type: Frontend - Backend간 데이터 타입 및 vadliation
  • State: UI 상태 저장 및 전파
• 3Layer: 공용 라이브러
  • Component: 사용자 정의 요소 컴포넌트 및 랩퍼
  • Chart: 차트 및 랩퍼
  • Utils: 유틸리티들
• 4Layer: package.json 
  • AntD, PrimeReact, MaterialUI, Boostrap와 같은 CSS + Component Framework
  • Redux, Mobx, Recoil 과 같은 state
  • moment, date-fns 같은 date
  • immer 같은 immutable state 
  • react-use 같은 Hooks
  • react-query 같은 data api
  • rxjs 같은 reactiv library

고려 사항

• Elagant Code Base 유지
  • Code Convention
  • TSLint
  • Typescript
• Unit Test Code 
  • commit 전에 Unit Test 수행
• Loose Coupling을 위한 UI Biz Feature, UI Componnet, Library 관계 정립

to be continue...