chrono는 다양한 형식의 날짜/시간을 처리하고 주어진 텍스트에서 정보를 추출할 수 있도록 설계된 자연어 날짜 파서.

• “Today”, “Tomorrow”, “Yesterday”, “Last Friday” 등의 상대적 날짜 처리
• “17 August 2013 - 19 August 2013”와 같은 날짜 범위 처리
• “This Friday from 13:00 - 16.00”와 같은 시간 포함 날짜 처리
• “5 days ago”, “2 weeks from now”와 같은 상대적 시간 표현 처리
• “Sat Aug 17 2013 18:40:39 GMT+0900 (JST)“와 같은 표준 날짜 형식 처리
• “2014-11-30T08:15:30-05:30”와 같은 ISO 8601 형식 처리

parse()¹²³

parse(text: string, referenceDate?: ParsingReference | Date, option?: ParsingOption): ParsedResult[] {
  // 1. 파싱 컨텍스트 생성
  // 2. 모든 파서를 실행하고 결과 수집
  // 3. 결과를 인덱스 기준으로 정렬
  // 4. 모든 리파이너를 적용하여 결과 개선
  // 5. 최종 결과 반환
}

inclusive-dates는 자연어 입력을 지원하는 사용자 친화적이고 완전히 접근 가능한 데이트피커. 내부적으로 chrono를 사용하여 자연어 날짜 입력을 처리. 이는 두 라이브러리의 장점을 결합한 좋은 예시.

chronoParseDate()⁴

const parsedDate = await chronoParseDate(text, {
  locale: this.locale.slice(0, 2),
  minDate: this.minDate,
  maxDate: this.minDate, // 원 저장소 코드 그대로 — `this.maxDate` 가 맞다
  referenceDate: removeTimezoneOffset(new Date(this.referenceDate)),
  ...chronoOptions,
})

1. chrono의 강력한 자연어 날짜 파싱 능력을 활용.
2. inclusive-dates는 이를 사용자 친화적이고 접근성 높은 UI 컴포넌트로 구현.

이러한 조합을 통해, 개발자들은 사용자에게 직관적이고 유연한 날짜 입력 방식을 제공하면서도 접근성과 사용성을 높일 수 있음.

---

Footnotes

1. executeParser ↩

2. sort ↩

3. refine ↩

4. inclusive-dates.tsx ↩

grid view(또는 datagrid)는 데이터의 표 형식 보기를 제공하는 그래픽 제어 요소입니다.

일반적으로 다음 중 일부 또는 전부를 지원합니다.

• 열 머리글을 클릭하여 그리드의 정렬 순서 변경
• 열 머리글을 끌어서 크기 및 순서 변경
• 보기 데이터의 제자리 편집
• 행과 열 구분 기호 및 행 배경색 번갈아 지정하기

---

• https://github.com/adazzle/react-data-grid
• https://github.com/glideapps/glide-data-grid
• https://github.com/finos/perspective
• https://github.com/teableio/teable

• Cornerstone.js HTML5 canvas를 지원하는 웹 브라우저에서 가벼운 의료 이미지 표시에 사용되는 JavaScript 라이브러리
• OpenSeadragon 데스크톱 및 모바일에서 사용 가능한 고해상도 줌 가능한 이미지를 위한 순수 JavaScript 뷰어
• dicomParser DICOM 파일을 처리하여 의료 이미지 데이터를 JavaScript 객체로 변환하는 라이브러리
• AMI Medical Imaging (AMI) 웹에서 의료 영상을 효과적으로 표시하고 주석을 추가하는 데 사용되는 JavaScript 라이브러리
• OHIF Medical Imaging Viewer
• itk-wasm 의료 영상 처리를 위한 JavaScript 라이브러리
• Brainchop

---

예전에 관련 회사 기술 블로그 보다가 생각나서 찾아본 라이브러리 리스트. 대용량, 의학용 이미지 포멧을 다루기 위한 도구들.

로컬에서만 실행 해야하는 프로젝트가 있길래 아무래도 사전설정 같은 귀찮은 문제가 있으니 pkg를 사용하면 좋을 것 같아서 들어가봤는데 개발이 중단 되었다.

노드 21버젼에서 해당 기능이 지원되는데 재미있는 시도들이 많이 나왔으면 좋겠다.

---

• https://nodejs.org/api/single-executable-applications.html
• https://github.com/nexe/nexe

[data-scope='slider'][data-part='thumb']

[data-scope='slider'][data-part='track']

[data-scope='slider'][data-part='control']

Ark UI의 각 컴포넌트 파트는 data-scope 및 data-part 속성으로 지정됩니다. data-scope 속성은 컴포넌트를 식별하고, data-part 속성은 컴포넌트의 개별 부분을 지정합니다.¹

ark-ui에서 사용하는 방식인데 적용해볼만한 컨셉이라고 생각한다.

---

• https://ark-ui.com/docs/overview/getting-started

Footnotes

1. Styling | Ark UI: “Ark UI components use data-scope and data-part attributes to target specific elements within a component.” ↩

• 상태 설계와 구현

---

• https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob
• https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71
• https://www.lksh.dev/blog/writing-your-own-reactive-signal-library/

요청 본문은 한 번만 읽을 수 있다.¹ 누가 미리 읽었는지는 읽기 메서드를 Proxy 로 감싸서 찾는다.

const bodyReadingMethods = ['arrayBuffer', 'blob', 'formData', 'text', 'json']

bodyReadingMethods.forEach((methodName) => {
  request[methodName] = new Proxy(request[methodName], {
    apply(...args) {
      console.trace(`Premature "request.${methodName}" call!`)
      return Reflect.apply(...args)
    },
  })
})

https://redd.one/blog/debugging-like-a-pro-xy

---

Footnotes

1. Using the Fetch API - MDN: “if any content has been read from the stream, then the stream is disturbed, and nothing else can read from the stream.” / “This means it’s not possible to read the same response (or request) body more than once” ↩

webpack 은 .mjs 를 javascript/esm 으로 고정해 CommonJS 를 막는다¹ — type 을 직접 주면 그 기본 규칙을 건너뛴다².

configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  },

---

Footnotes

1. Module Methods | webpack: “.mjs or .js with "type": "module" in package.json” → “No CommonJS allowed, for example, you can’t use require, module.exports or exports”. webpack 4 기본 규칙: { test: /\.mjs$/i, type: "javascript/esm" } ↩

2. Module | webpack: “Rule.type sets the type for a matching module. This prevents defaultRules and their default importing behaviors from occurring.” ↩

---

• Visual Effect - Interactive Effect Playground
• Effect Solutions

Bottom Sheet 라이브러리 비교

react-modal-sheet 추천:

• 활발한 유지보수 (v5 최근 릴리즈)
• Motion(구 Framer Motion) 기반, Compound component 패턴
• avoidKeyboard, disableDismiss 등 유용한 옵션

import { Sheet } from 'react-modal-sheet'

<Sheet isOpen={isOpen} onClose={() => setOpen(false)}>
  <Sheet.Container>
    <Sheet.Header />
    <Sheet.Content>콘텐츠</Sheet.Content>
  </Sheet.Container>
  <Sheet.Backdrop />
</Sheet>

---

• react-modal-sheet
• vaul - Radix Dialog 기반 대안. 지금은 유지보수 중단¹
• Material Design - Bottom Sheet
• Apple HIG - Sheet

Footnotes

1. vaul README: “This repo is unmaintained. I might come back to it at some point, but not in the near future.” ↩