Mis Documentos

Barra lateral de múltiples raíces

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

Para ti
Byeolnaerim
Esto será.

Creamos herramientas que conectan el frontend y el backend, centradas en la estabilidad de tipos y la productividad reactiva.
Front: RxJS/React/Next · Back: WebFlux/MongoDB
Código ABIERTO
Frontend · RxJS
@byeolnaerim/typed-rx-http

Cliente HTTP seguro basado en tipos de RxJS

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

Componente de diseño de React para vista dividida redimensionable

React
Vista dividida
Redimensionable
npm i @byeolnaerim/flex-layout rxjs react
Frontend · React State
@byeolnaerim/global-rx-state

Pequeño primitivo de estado de React que proporciona estado global nombrado singleton basado en RxJS y reducer, con persistencia opcional

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

Genera OpenAPI·AsyncAPI, esqueleto de manejador y enumeración de campos de MongoDB basado en la fuente del backend para reducir la duplicación con el frontend

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

DSL que compone query·aggregación·lookup·actualización atómica·bulk·Atlas Search·Vector Search en cadena basado en MongoDB Reactive Streams Driver y Reactor.

MongoDB
Reactivo
DSL
implementation("com.byeolnaerim:reactive-mongo-dsl:1.0.0")
DISEÑO FLEXIBLE
Uso básico de FlexLayout

Ejemplo de configuración de una vista dividida redimensionable en su forma más simple.
A la izquierda está el código, a la derecha se muestra la pantalla de funcionamiento real con la misma estructura.

Código

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. Todos los derechos reservados.IntroducciónPolítica de privacidad