Meine Bibliothek-Dokumente

Multi-Root-Seitenleiste

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

Für dich
Byeolnaerim
Das wird es sein.

Wir erstellen Werkzeuge, die Frontend und Backend verbinden, mit Fokus auf Typensicherheit und reaktive Produktivität.
Front: RxJS/React/Next · Back: WebFlux/MongoDB
OPEN SOURCE
Frontend · RxJS
@byeolnaerim/typed-rx-http

Typensicherer HTTP-Client basierend auf RxJS

HTTP
RxJS
Client
npm i @byeolnaerim/typed-rx-http rxjs
Frontend · React UI
@byeolnaerim/flex-layout

React-Layout-Komponente für anpassbare Split-Ansichten

React
Split-Ansicht
Anpassbar
npm i @byeolnaerim/flex-layout rxjs react
Frontend · React State
@byeolnaerim/global-rx-state

Kleine React-Zustandsprimitive, die benannten Singleton-Globalzustand und Reducer sowie optionale Persistenz bietet, basierend auf RxJS

React
RxJS
Zustand
npm i @byeolnaerim/global-rx-state rxjs react
Backend · WebFlux
com.byeolnaerim:webflux-fe-dev-assistant

Erzeugt OpenAPI·AsyncAPI, Handler-Skelette und MongoDB-Feld-Enums basierend auf Backend-Quellen, um redundante Schreibarbeit mit dem Frontend zu reduzieren

WebFlux
OpenAPI
AsyncAPI
implementation("com.byeolnaerim:webflux-fe-dev-assistant:<version>")
Backend · MongoDB
com.byeolnaerim:reactive-mongo-dsl

DSL zur Verkettung von Abfragen, Aggregationen, Lookups, atomaren Updates, Bulk, Atlas-Suche und Vektor-Suche basierend auf MongoDB Reactive Streams Driver und Reactor.

MongoDB
Reaktiv
DSL
implementation("com.byeolnaerim:reactive-mongo-dsl:1.0.0")
FLEX LAYOUT
Grundlegende Verwendung von FlexLayout

Ein Beispiel für die einfachste Form einer resizebaren Split-Ansicht.
Links ist der Code, rechts wird der tatsächliche Bildschirm mit der gleichen Struktur angezeigt.

Code

import { FlexLayout, FlexLayoutContainer } from "@byeolnaerim/flex-layout";

<FlexLayout direction="column" layoutName="column-layout">
  <FlexLayoutContainer containerName="top-container" isResizePanel>
    <FlexLayout direction="row" layoutName="top-layout">
      <FlexLayoutContainer containerName="top-left" isResizePanel grow={1.3}>
        ...
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="top-right" grow={0.7}>
        ...
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="bottom-container">
    <FlexLayout direction="row" layoutName="bottom-layout">
      <FlexLayoutContainer containerName="bottom-left" isResizePanel grow={0.3}>
        ...
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="bottom-right" grow={1.7}>
        ...
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>
</FlexLayout>
© 2026 Byeolnaerim. Alle Rechte vorbehalten.EinführungDatenschutzrichtlinie