Dok Perpustakaan Saya

Sidebar Multi-root

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

Untuk Anda
Byeolnaerim
Akan menjadi.

Membuat alat yang menghubungkan frontend dan backend dengan fokus pada stabilitas tipe dan produktivitas reaktif.
Front: RxJS/React/Next · Back: WebFlux/MongoDB
SUMBER TERBUKA
Frontend · RxJS
@byeolnaerim/typed-rx-http

Klien HTTP yang aman tipe berbasis RxJS

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

Komponen tata letak React untuk tampilan terpisah yang dapat diubah ukurannya

React
Tampilan Terpisah
Dapat Diubah Ukurannya
npm i @byeolnaerim/flex-layout rxjs react
Frontend · React State
@byeolnaerim/global-rx-state

Primitive status React kecil yang menyediakan status global named singleton berbasis RxJS dan reducer, dengan persistence opsional

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

Mengurangi penulisan ulang dengan menghasilkan OpenAPI·AsyncAPI, kerangka handler, dan enum field MongoDB berdasarkan sumber backend

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

DSL yang menyusun query·agregasi·lookup·pembaruan atomik·bulk·Atlas Search·Vector Search dengan MongoDB Reactive Streams Driver dan berbasis Reactor.

MongoDB
Reaktif
DSL
implementation("com.byeolnaerim:reactive-mongo-dsl:1.0.0")
TATA LETAK FLEX
Panduan dasar penggunaan FlexLayout

Contoh menyusun Split View yang dapat diubah ukuran dalam bentuk paling sederhana.
Kiri adalah kode, kanan menunjukkan layar operasi nyata dengan struktur yang sama.

Kode

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. Semua hak dilindungi.PengenalanKebijakan Penanganan Data Pribadi