Docs
Introduction
System Architecture
Module Convention
Scalar Convention
Codebase
Introduction
System Architecture
Module Convention
Scalar Convention
Codebase
Frontend System
The frontend system is implemented using the App router method of Nextjs 15 version, and also manages each frontend module by database model.
Frontend Module Structure
Each frontend module has a structure of Page ⇒ Component ⇒ Store ⇒ Fetch in that order. A Page that is displayed on the user's screen is designed to render a Component, and a global Store for state management is configured to interact with the Component. A Fetch(GraphQL API) is designed to synchronize the state inside the Store with the server.
PagePage (app/model/page.tsx)
The structure of a data-based page is generally composed of index, (id), new, and edit.
As a basic example, a page for CRUD is configured as follows.
As a basic example, a page for CRUD is configured as follows.
- The index page lists and searches for Units of the corresponding data.
- The new page has a function to create new data.
- The view page has a function to view a single data in detail.
- The edit page has a function to edit already created data.
ComponentComponent (lib/model/model.Unit|Edit|View|Util|Zone.tsx)
A data-model-based component is written in five files according to its purpose: Unit, View, Edit, Util, and Zone.
Unit, View, Edit, Util, Zone components are configured, and Unit and View are server components, and Edit, Util, and Zone are client components.Unit and View components, which display overview and full content respectively, are written as server components, while Edit for creation/modification, Util for special functions, and Zone for server-client state synchronization are written as client components.
Unit, View, Edit, Util, Zone components are configured, and Unit and View are server components, and Edit, Util, and Zone are client components.Unit and View components, which display overview and full content respectively, are written as server components, while Edit for creation/modification, Util for special functions, and Zone for server-client state synchronization are written as client components.
Unit(Server)
Used when displaying multiple data in a summary, and receives Light Type data to render it as html.
View(Server)
Receives a single Full Type data and renders it as html, and is mainly used in view pages.
Edit(Client)
Renders a form-type component used when creating new data or editing created data, and is mainly used in new, edit, and admin pages.
Util(Client)
A component used to connect special functions such as likes and participation, and is used by connecting to state management.
Zone(Client)
Used as a bridge for SSR, and implements a single container area by combining Unit, View, and Util.
Related contents: Backend System, DevOps System, Domain-level modules, State Management System