소개

얼마 전, 한 클라이언트가 나에게 요청했습니다: 그들의 데이터를 반응형 그리드로 보여달라고요.

문제는? 열의 수가 동적이라는 것이었습니다. 데이터셋에 따라 변경되었죠. 게다가, 일부 열에는 매우 긴 텍스트가 포함되어 있어서 내가 시도한 모든 레이아웃을 망가뜨렸습니다. 그리고 결정적인 점은 — 우리는 사전에 정확한 열을 알지 못했고, 오직 그들의 타입 (텍스트, 숫자, 이메일, 날짜, 날짜 및 시간)만 알고 있었습니다.

기존의 몇 가지 그리드 및 테이블 라이브러리를 테스트해봤지만, 너무 무겁거나, 너무 경직되어 있거나, 모든 열을 명시적으로 선언해야 했습니다. 이 동적 열과 긴 텍스트의 조합을 우아하게 처리하는 라이브러리는 없었습니다.

그래서 나는 나만의 솔루션을 만들기로 결정했습니다. 그렇게 AutoFitGrid가 탄생했습니다.

문제

동적 데이터는 예측할 수 없습니다. 레이아웃을 하드코딩할 수 없고, 모든 곳에서 짧은 텍스트를 가정할 수 없습니다 — 때때로 여러 문장으로 된 설명이 나올 수 있습니다.

그것을 일반 HTML 테이블에 넣으면:

  • 열이 넘쳐서 수평 스크롤이 발생합니다.
  • 숫자와 같은 작은 값들이 공간을 낭비하게 됩니다.

그것이 바로 내 클라이언트의 사용 사례와 정확히 일치했습니다.

해결책: AutoFitGrid

AutoFitGrid는 두 가지를 보고 그리드를 만듭니다:

  1. 각 열의 선언된 타입 (텍스트, 숫자, 이메일, 날짜, 날짜 및 시간).
  2. 셀 안의 실제 값 (짧은 내용 vs. 긴 내용).

그로부터 자동으로 너비를 계산하고, 정렬을 적용하며, 콘텐츠가 감싸져 그리드가 반응형으로 유지되도록 합니다. 너비를 설정하거나 열의 수를 미리 알 필요가 없습니다 — 라이브러리가 이를 처리합니다.

긴 텍스트 처리 방법 (어려운 부분)

이 문제의 가장 어려운 부분은 열의 수가 동적이고 알 수 없을 때 긴 텍스트를 그리드에 맞추는 방법을 찾는 것이었습니다.

나는 각 열을 직사각형으로 취급함으로써 이를 해결했습니다. 도전 과제는 텍스트가 레이아웃을 깨지 않고 깔끔하게 흐르도록 적절한 너비-높이 비율을 찾는 것입니다.

여기 논리가 있습니다:

  1. 텍스트의 단어 수를 세십시오.
  2. 짧은, 중간, 또는 긴 텍스트로 분류하십시오.
  3. 카테고리에 따라 목표 비율을 선택하십시오 (짧은 텍스트 = 더 좁은 직사각형, 긴 텍스트 = 더 넓은 직사각형).
  4. 너비와 높이를 계산하여 텍스트가 깔끔하게 감싸지도록 합니다.

이렇게 하면 이름과 같은 짧은 값들이 공간을 낭비하지 않고, 긴 설명은 읽기 쉽고 잘 정리됩니다.

HTML/JavaScript로 초기화하기

HTML에서 그리드를 선언하는 방법은 다음과 같습니다. 너비가 없다는 점에 주목하세요 — 오직 타입만 있습니다.

HTML

<div class="grid-container">
  <div class="grid-header" data-type="text">작업 설명</div>
  <div class="grid-header" data-type="text">담당자</div>
  <div class="grid-header" data-type="email">이메일</div>
  <div class="grid-header" data-type="datetime">시작 날짜</div>
  <div class="grid-header" data-type="datetime">마감 날짜</div>
  <div class="grid-header" data-type="number">우선 순위</div>
  <div class="grid-header" data-type="number">예상 시간</div>

  <div class="grid-item">
    그리드 레이아웃이 어떻게 조정되는지 테스트하기 위해 매우 긴 설명을 구현합니다.
    텍스트가 여러 줄에 걸쳐 동적으로 감싸지는지 확인합니다.
  </div>
  <div class="grid-item">제인 도</div>
  <div class="grid-item">jane.doe@example.com</div>
  <div class="grid-item">2024-01-15 08:30:00</div>
  <div class="grid-item">2024-07-15 17:00:00</div>
  <div class="grid-item">1</div>
  <div class="grid-item">100</div>
</div>

JavaScript

마크업이 준비되면, 한 번의 초기화 호출로 그리드에 지능을 부여합니다.

new AutoFitGrid({
  container: document.querySelector('.grid-container'),
  defaultMinWidth: 50,
  defaultMaxWidth: Infinity,
  adjustmentThreshold: 200,
  headerSelector: '.grid-header',
  columnSelector: '.grid-item',
  showDebug: false
});

showDebug: true로 설정하면, AutoFitGrid가 열을 측정하고 맞추는 방법을 보여주는 로그를 볼 수 있습니다.

React에서 사용하기

import React, { useEffect, useRef } from 'react';
import AutoFitGrid from 'auto-fit-grid';

function MyGrid() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      new AutoFitGrid({
        container: ref.current,
        headerSelector: '.grid-header',
        columnSelector: '.grid-item'
      });
    }
  }, []);

  return (
    <div className="grid-container" ref={ref}>
      <div className="grid-header" data-type="text">이름</div>
      <div className="grid-header" data-type="email">이메일</div>
      <div className="grid-header" data-type="number">점수</div>

      <div className="grid-item">앨리스 원더랜드</div>
      <div className="grid-item">alice@example.com</div>
      <div className="grid-item">88</div>

      <div className="grid-item">밥 밥슨</div>
      <div className="grid-item">bob@example.com</div>
      <div className="grid-item">95</div>
    </div>
  );
}

설치 및 사용해보기

npm에서 AutoFitGrid를 설치할 수 있습니다:

npm install auto-fit-grid

또는 라이브 예제와 문서를 탐색해보세요: