JavaScript로 아름다운 터미널 UI(TUI)를 구축하는 방법!

저처럼 CLI와 터미널 UI에 완전히 푹 빠져 계시다면 이 게시물이 도움이 될 것입니다!

안타깝게도 JavaScript로 아름다운 터미널 UI를 구축할 수 있는 기본 방법은 없습니다. 적어도 제가 아는 한은 없습니다! 이것이 제가 스스로 직면한 문제였고, 이로 인해 결국 가장 멋진 TUI 라이브러리 중 하나인 Charm 직원이 만든 Lipgloss를 포팅하게 되었습니다.

내 말을 못 믿으시나요? 다음을 확인하세요:

멋지죠?

중요한 점은 립글로스가 Go로 작성되었다는 것입니다. 저는 주로 Go로 작업하다가 최근 Node.js로 웹 모니터링 도구를 작성해야 했습니다. 매끄럽고 아름다운 UI를 포기할 수 없어서 고전적인 개발자 챌린지 모드에 들어갔습니다.

코드에 깊이 빠져 있을 때 예상치 못한 일이 발생하는 마법같은 순간을 알고 계시나요? 이것이 제가 Lipgloss의 일부를 WebAssembly(Wasm)로 이식하게 된 방법입니다. 그렇게 매력이 탄생했습니다.

캐즘이란 무엇입니까?

Charsm은 Charm CLI Wasm의 줄임말입니다. 멋지죠? 이를 사용하여 JavaScript로 멋진 TUI를 구축하는 방법을 살펴보겠습니다.

---

시작하기

간단한 npm 명령으로 charsm을 설치합니다.

npm install charsm

---

간단한 테이블 만들기

시작하려면 charsm을 가져와서 스크립트에서 초기화하세요.

import { initLip, Lipgloss } from "charsm";

(async function () {
  const ini = await initLip();
})();

initLip 함수는 Wasm 파일을 로드하여 렌더링할 모든 것을 준비합니다. 테이블을 인쇄해 보겠습니다.

const rows = [
  ["Chinese", "您好", "你好"],
  ["Japanese", "こんにちは", "やあ"],
  ["Arabic", "أهلين", "أهلا"],
  ["Russian", "Здравствуйте", "Привет"],
  ["Spanish", "Hola", "¿Qué tal?"],
];

const tabledata = { 
  headers: ["LANGUAGE", "FORMAL", "INFORMAL"], 
  rows: rows 
};

(async function () {
  const ini = await initLip();
  const lip = new Lipgloss();

  const table = lip.newTable({
    data: tabledata,
    table: { border: "rounded", color: "99", width: 100 },
    header: { color: "212", bold: true },
    rows: { even: { color: "246" } },
  });

  console.log(table);
})();

색상에 16진수 코드를 사용할 수도 있습니다(전체 예제 링크는 본문에서 확인하세요)

결과:

간단하죠? 이제 목록 렌더링으로 넘어가겠습니다.

---

목록 렌더링

현재는 간단한 목록을 렌더링할 수 있습니다. 작동 방식은 다음과 같습니다.

const subtle = { Light: "#D9DCCF", Dark: "#383838" };
const special = { Light: "#43BF6D", Dark: "#73F59F" };

const list = lip.List({
  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
  selected: [],
  listStyle: "alphabet",
  styles: {
    numeratorColor: special.Dark,
    itemColor: subtle.Dark,
    marginRight: 1,
  },
});
const combined = table + "\n\n" + list
console.log(combined);

선택 항목 사용자 정의

선택한 항목에 대해 사용자 정의 열거자 아이콘(예: ✅)을 사용하여 더 멋지게 만들어 보겠습니다.

const customList = lip.List({
  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
  selected: ["Grapefruit", "Yuzu"],
  listStyle: "custom",
  customEnum: "✅",
  styles: {
    numeratorColor: special.Dark,
    itemColor: subtle.Dark,
    marginRight: 1,
  },
});

console.log(customList);

선택한 항목에는 ✅ 아이콘이 표시됩니다.

---

렌더링 마크다운

Charsm은 마크다운 렌더링을 처리하기 위해 Charm의 Glamour 라이브러리를 래핑합니다.

npm install charsm

---

사용자 정의 스타일

charsm의 스타일을 터미널용 CSS로 생각하세요. 자신만의 스타일을 만드는 방법은 다음과 같습니다.

import { initLip, Lipgloss } from "charsm";

(async function () {
  const ini = await initLip();
})();

이 스타일을 텍스트에 적용하려면:

const rows = [
  ["Chinese", "您好", "你好"],
  ["Japanese", "こんにちは", "やあ"],
  ["Arabic", "أهلين", "أهلا"],
  ["Russian", "Здравствуйте", "Привет"],
  ["Spanish", "Hola", "¿Qué tal?"],
];

const tabledata = { 
  headers: ["LANGUAGE", "FORMAL", "INFORMAL"], 
  rows: rows 
};

(async function () {
  const ini = await initLip();
  const lip = new Lipgloss();

  const table = lip.newTable({
    data: tabledata,
    table: { border: "rounded", color: "99", width: 100 },
    header: { color: "212", bold: true },
    rows: { even: { color: "246" } },
  });

  console.log(table);
})();

더 많은 옵션을 보려면 github의 추가 정보를 참조하세요. 여기에 "전체" 예가 있습니다

레이아웃을 원하시나요? Charsm은 간단한 플렉스와 같은 레이아웃을 지원합니다:

const subtle = { Light: "#D9DCCF", Dark: "#383838" };
const special = { Light: "#43BF6D", Dark: "#73F59F" };

const list = lip.List({
  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
  selected: [],
  listStyle: "alphabet",
  styles: {
    numeratorColor: special.Dark,
    itemColor: subtle.Dark,
    marginRight: 1,
  },
});
const combined = table + "\n\n" + list
console.log(combined);

---

마무리

그리고 거기에 있습니다! charsm을 사용하면 테이블, 목록, 마크다운을 렌더링하고 사용자 정의 스타일을 생성할 수도 있습니다. 이 모든 것이 터미널 내에서 텍스트이므로 목록이나 마크다운을 둘러쌀 수 있습니다

const customList = lip.List({
  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
  selected: ["Grapefruit", "Yuzu"],
  listStyle: "custom",
  customEnum: "✅",
  styles: {
    numeratorColor: special.Dark,
    itemColor: subtle.Dark,
    marginRight: 1,
  },
});

console.log(customList);

테이블과 목록은 패딩과 여백을 포함하여 테두리로 둘러싸입니다!

이것은 시작에 불과합니다. 곧 양식과 같은 대화형 구성 요소를 추가할 예정이므로 계속 지켜봐 주시기 바랍니다. JavaScript로 자신만의 아름다운 터미널 UI를 실험하고 구축해 보세요!

건배!

위 내용은 JavaScript로 아름다운 터미널 UI(TUI)를 구축하는 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!