Mes documents

Barre latérale multi-racine

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

Pour vous
Byeolnaerim
Je vais devenir.

Crée des outils qui relient le frontend et le backend, en se concentrant sur la stabilité des types et la productivité réactive.
Front : RxJS/React/Next · Back : WebFlux/MongoDB
OPEN SOURCE
Frontend · RxJS
@byeolnaerim/typed-rx-http

Client HTTP typé et sécurisé basé sur RxJS

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

Composant de mise en page React pour une vue fractionnée redimensionnable

React
Vue fractionnée
Redimensionnable
npm i @byeolnaerim/flex-layout rxjs react
Frontend · État React
Hooks de division / de glissement

Petit primitive d'état React fournissant un état global nommé singleton basé sur RxJS, un réducteur et une persistance optionnelle

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

Générer des spécifications OpenAPI·AsyncAPI, des squelettes de gestionnaires et des énumérations de champs MongoDB basés sur la source backend pour réduire la duplication avec le frontend

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

DSL pour composer des requêtes·agrégations·recherches·mises à jour atomiques·en masse·Atlas Search·Vector Search avec MongoDB Reactive Streams Driver et Reactor.

MongoDB
Réactif
DSL
implementation("com.byeolnaerim:reactive-mongo-dsl:1.0.0")
Mise en page FLEX
Utilisation de base de FlexLayout

Exemple de configuration d'une vue fractionnée redimensionnable dans sa forme la plus simple.
À gauche, le code, à droite, l'écran d'exécution réel avec la même structure.

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. Tous droits réservés.PrésentationPolitique de confidentialité