System Overview

사용자, Frontend, Backend, Database를 하나로 연결한 PWA 기반 시스템입니다.

각 구성 요소는 명확한 역할을 가지며, API를 통해 독립적으로 동작하도록 설계했습니다.

Data Flow

사용자의 요청은 Frontend에서 시작되어 API를 통해 Backend로 전달되며, 필요한 데이터는 Database에 저장됩니다.

각 단계는 명확한 역할을 가지며 서로 직접 의존하지 않도록 설계했습니다.

Frontend

사용자가 가장 자주 사용하는 영역으로, 하나의 코드베이스를 기반으로 설계했습니다. 모든 데이터 처리는 API를 통해 이루어지며, 비즈니스 로직은 Backend와 분리했습니다.

ReactTypeScriptService Worker

Backend

서비스의 핵심 로직과 데이터를 관리합니다. 모든 기능은 API를 통해 제공되며, 클라이언트는 내부 구현을 알 필요가 없습니다.

Node.jsNestJSTypeScript

API Layer

Frontend와 Backend는 직접 연결되지 않습니다. 모든 요청과 응답은 API Layer를 통해 처리되며 서비스 간의 역할을 명확하게 분리합니다.

REST APIJWT

Data Storage

서비스 데이터는 서버에서 관리되며 필요한 경우 브라우저 저장소를 함께 사용합니다. 네트워크 환경에 따라 데이터를 유연하게 관리할 수 있도록 설계했습니다.

PostgreSQLBrowser Storage

Architecture Principles

• 역할을 명확하게 분리한다.
• 공통 인터페이스를 통해 연결한다.
• 구현보다 계약을 우선한다.
• 각 구성 요소는 독립적으로 발전할 수 있도록 설계한다.