Upgle의 프로젝트 구조

프로젝트 구조

Upgle의 구조는 다음과 같습니다.

/* Upgle Repository */
📁 .github           // github 템플릿 폴더
📁 .husky            // git hook 폴더
📁 public            // React 앱의 기본 파일
📁 src               // 소스코드 위치
  📁 components      // 재사용 가능한 컴포넌트들이 도메인 별로 분류됨. 웹의 뷰를 담당하며 사용자와의 상호작용 부분을 담당함.  
  📁 containers      // components와 1대1 대응하며 뷰를 랜더링하기 위한 데이터를 스토어에서 가져와 전달하고 데이터를 변경하는 등의 핸들러 함수를 전달함. 
  📁 middlewares     // react-router에 적용할 미들웨어가 있음. 로그인 체크, 채널 가입 체크 등의 미들웨어가 있음.
  📁 modules         // 리덕스 모듈의 정의되어 있음. 리덕스 모듈이란 도메인별로 정의된 리듀서임.
  📁 pages           // react-router의 라우터와 1대1 대응되는 웹페이지로 보여지는 구조를 정의함.
  📁 routers         // react-router의 라우터 집합
  📁 lib             // 코드 작성에 필요한 여러 코드들의 집합
    📁 api           // API 통신 함수들을 도메인별로 정의
    📁 assets        // SVG, PNG 파일
    📁 styles        // 공통 스타일을 위한 color 등 
    📁 util          // 여러 유틸 함수들
  📄 index.js        // 프로그램 시작점
  📄 store.js        // 리덕스 스토어 생성
  📄 App.js          // 리액트 앱의 root 컴포넌트
📄 .eslintrc         // ┐
📄 .prettierrc       // ┷ ESLint 및 Prettier 셋팅
📄 .gitignore
📄 README.md
📄 CONTRIBUTING.md
📄 CODE_OF_CONDUCT.md
📄 LICENSE
📄 yarn.lock         // ┐ 
📄 package.json      // ┷ 의존성 관리

MVP 구조

저희 프로젝트는 MVP 구조를 따르고 있습니다.

• Model: 백엔드 어플리케이션과 연동하여 데이터를 처리하는 모델은 modules에 도메인별로 정의되어 있습니다. 리덕스를 통해 전역으로 상태관리 하고 있습니다.
• View: 웹페이지의 뷰는 compoents의 컴포넌트들을 조합하여 구성되어 있습니다. 실제 사용자에게 보여지는 부분을 담당하고 사용자와의 상호작용을 담당합니다.
• Presnter: Presenter로서 Container들의 컴포넌트는 뷰를 담당하는 Components와 1대1 대응하여 components에게 데이터를 전달하고 모델을 수정하는 핸들러 또는 비즈니스로직을 정의하여 components에 전달합니다.

프로그램 실행 흐름은 다음과 같습니다.

index.js -> App.jsx -> react-router -> page -> container -> components

1. index.js에서 material-ui theme적용, react-helmet적용, redux-store 적용
2. App에서 세션이 남아있을 경우 로그인 처리, react-router 연결
3. react-router에서 해당 라우터에 대한 page 연결
4. page에서 Container들을 조합하여 웹페이지에 보여지는 구조를 결정
5. container에서 뷰 랜더링에 필요한 데이터 전달, 모델 수정등의 비즈니스 로직 전달
6. components에서 사용자에게 보여지는 뷰 랜더링, 사용자 입력등의 상호작용