Tài liệu của tôi

Thanh bên đa gốc

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

Dành cho bạn
Byeolnaerim
Sẽ trở thành như vậy.

Tạo ra các công cụ kết nối frontend và backend với trọng tâm là tính ổn định kiểu và năng suất phản ứng.
Front: RxJS/React/Next · Back: WebFlux/MongoDB
MÃ NGUỒN MỞ
Frontend · RxJS
@byeolnaerim/typed-rx-http

HTTP client an toàn kiểu dựa trên RxJS

HTTP
RxJS
Khách hàng
npm i @byeolnaerim/typed-rx-http rxjs
Frontend · React UI
@byeolnaerim/flex-layout

Thành phần bố cục React cho chế độ xem chia tách có thể thay đổi kích thước

React
Chế độ xem chia tách
Có thể thay đổi kích thước
npm i @byeolnaerim/flex-layout rxjs react
Frontend · Trạng thái React
Các hook chia / kéo

Trạng thái React nhỏ cung cấp trạng thái toàn cục named singleton và reducer, với khả năng lưu trữ tùy chọn dựa trên RxJS

React
RxJS
Trạng thái
npm i @byeolnaerim/global-rx-state rxjs react
Backend · WebFlux
com.byeolnaerim:webflux-fe-dev-assistant

Giảm thiểu việc viết lại giữa frontend và backend bằng cách tạo OpenAPI·AsyncAPI, khung handler và enum trường MongoDB dựa trên nguồn backend

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

DSL cấu trúc query·aggregation·lookup·atomic update·bulk·Atlas Search·Vector Search dựa trên MongoDB Reactive Streams Driver và Reactor.

MongoDB
Reactive
DSL
implementation("com.byeolnaerim:reactive-mongo-dsl:1.0.0")
BỐ TRÍ LINH HOẠT
Cách sử dụng cơ bản của FlexLayout

Ví dụ cấu hình Split View có thể thay đổi kích thước ở dạng đơn giản nhất.
Bên trái là mã, bên phải là màn hình hoạt động thực tế có cấu trúc tương tự.

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. Bảo lưu mọi quyền.Giới thiệuChính sách xử lý thông tin cá nhân