블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

'리액트 개발환경'에 해당되는 글 1

  1. 2021.08.25 [React HH-1] 시작하는 개발자를 위한 히치하이커
2021. 8. 25. 10:48 React/Start React

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

 

개발환경

  • 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...

posted by 윤영식
prev 1 next