/working-space-front

[디프만 8기/7조] 작업공간 (작업하기 좋은 주변 카페 추천 서비스)

Primary LanguageJavaScript

디지털 노마드들을 위한 위치 기반 주변 카페 알리미

작업공간

FrontEnd Architecture

  • Mobx(3Layer Architecture)
  • React(Dumb Component, Container Component, Page Component)
  • React-Router

Component

Page Component

  • 라우팅의 단위가 될 페이지 컴포넌트, 단순 랩핑으로써 역할만 한다.

Container Component

  • UI컴포넌트(Dumb Component)를 컨트롤 하는 역할
  • Mobx Store의 데이터를 주입받아 Dumb Component에게 내려주는 역할
  • Dumb Component의 UI로직이 아닌 라우팅, 데이터 Fetching등의 이벤트 핸들러는 이곳에서 처리함.
  • 라우팅은 컨테이너 컴포넌트에서 처리하도록 한다.

Dumb Component === Presentational Component === UI Component

  • 순수하게 UI로직만 들어가야 하며 UI상태만을 관리해야함. 도메인에 대한 상태는 반드시 컨테이너 컴포넌트로 부터 주입 받아 사용해야함.
  • 마찬가지로 UI의 상태를 바꾸기 위한 이벤트 핸들링만 해야함.
  • 데이터를 fetch한다던지 UI로직과 관련 없는 mobx의 store를 건드리면 안됨.
  • 이 컴포넌트는 반드시 독립적으로 설계되어야함. (다른 프로젝트에서도 가져다 사용할 수 있을 정도의 완전 독립)

Mobx

Repository

  • 데이터에 접근하는 레이어
  • API호출

Store

  • 비즈니스 로직을 처리하는 핵심 레이어
  • Repository와 Model을 사용하여 비즈니스 로직을 처리한 후에 그 결과를 Mobx Observable State로 Store내부에서 관리합니다.

Model

  • 도메인 데이터를 담을 모델