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

저는 TUI에 푹 빠져 있습니다. 어쩌면 여러분도 그럴 수도 있습니다! 아직 그렇지 않다면, 그렇게 되기를 바랍니다. 재미있을 뿐만 아니라 믿을 수 없을 정도로 유용하기 때문입니다!

약 두 달 전 립글로스를 Go에서 WebAssembly로 포팅했습니다. 이것이 이 시리즈의 첫 번째 기사였습니다! 다음 계획은 양식을 이식하는 것이었지만 간단히 말해서 일부 기능은 WASM으로 전환할 수 없었습니다. 기본 기능과 런타임 제한으로 인해 장애물이 발생했기 때문에 한 단계 더 낮추었습니다. DLL 및 SO 파일(공유 라이브러리). 드디어 양식이 생겼습니다!

참고: JavaScript에서 공유 라이브러리를 사용하려면 기본 모듈을 지원하는 Node.js와 C 바인딩용 node-gyp가 필요합니다.

가장 간단한 방법은 무엇일까요? Node.js를 다시 설치하고 설정 중에 기본 모듈 옵션을 선택하세요.

수동 설치를 선호하시나요? 이 README를 따르세요.

---

왜 DLL과 SO 파일이 필요한가요?

WASM에 비해 훨씬 작기 때문에 이를 활용하기 위해 모든 것을 다시 작성하게 될 수도 있습니다!

시작할 준비가 되었다면 새 JavaScript 프로젝트를 설정하고 charsm을 설치하세요.

pnpm add charsm

---

CLI의 양식

1. 테마 맞춤 설정

양식의 모양을 맞춤설정하려면 다음 테마를 사용하세요.

import { huh } from "charsm";
huh.SetTheme("dracula");

나중에 정의되는 모든 구성요소는 드라큘라 테마를 사용합니다. 언제든지 테마를 재정의할 수 있습니다.

huh.SetTheme("dracula"); 
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin

// Available themes: default, Charm, Base16, Dracula, Catppuccin

---

2. 확인 대화 상자 만들기

사용자 정의 가능한 예(긍정) 및 아니요(부정) 버튼이 있는 간단한 확인 대화 상자:

const m = huh.Confirm("Do you want to proceed?", "Yes", "No");

실행하면 예인 경우 "1", 아니요인 경우 "0"이 반환됩니다. 공유 라이브러리의 문자열에 대한 포인터는 쉽게 반환됩니다.

if (m.run() === "1") {
  console.log("User chose the affirmative option");
} else {
  console.log("User chose the negative option");
}

---

3. 입력 필드 만들기

예 1: 단일 입력

유효성 검사 및 자리 표시자로 입력 필드 정의:

const i = new huh.NewInput(
  {
    Title: "Username",
    Description: "Enter your name",
    Placeholder: "e.g., John Doe",
    validators: "no_numbers,required", 
  },
  0 // Mode: Single Input
);
i.load();
console.log(i.run());

유효성 검사기는 쉼표로 구분된 문자열로 정의됩니다. 예를 들어 "no_numbers,required"는 계속하기 전에 입력이 모든 조건을 충족하는지 확인합니다.

검증기에는 다음이 포함됩니다.

• 필수의
• 이메일
• 번호 없음
• alpha_only
• no_special_chars

모드:

• 0: 한 줄 입력
• 1: 여러 줄의 텍스트 영역

예 2: 여러 줄 입력

pnpm add charsm

---

4. 선택 구성 요소 만들기

import { huh } from "charsm";
huh.SetTheme("dracula");

---

5. 스피너 추가

huh.SetTheme("dracula"); 
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin

// Available themes: default, Charm, Base16, Dracula, Catppuccin

---

6. 양식 작성

양식에는 여러 그룹이 포함되어 순차적으로 렌더링될 수 있습니다. 예는 다음과 같습니다.

const m = huh.Confirm("Do you want to proceed?", "Yes", "No");

양식의 값은 각 구성 요소의 값 속성에 저장됩니다.

if (m.run() === "1") {
  console.log("User chose the affirmative option");
} else {
  console.log("User chose the negative option");
}

---

유효성 검사기는 Linux에서 양식에 대해 약간 버그가 있을 수 있습니다(업데이트된 .so 파일 작성을 건너뛰었을 수도 있습니다. 이런!). 궁금하거나 도움을 주고 싶다면 이 저장소에서 업데이트를 확인하세요. 아니면 더 나은 방법으로 기여해 보세요!

• Charsm: Good first issue – 입력에서 로드 메소드를 제거하여 huh.NewInput에서 자동으로 호출되도록 합니다.

• 허 공유 라이브러리 코드: 두 가지 좋은 첫 번째 문제 – 잘못된 README 문서를 수정하고 macOS 지원을 위한 빌드 파일을 추가합니다.

이제 그룹별로 이야기해 볼까요? 다음과 같이 여러 그룹을 생성하고 단일 양식으로 전달할 수 있습니다.

const i = new huh.NewInput(
  {
    Title: "Username",
    Description: "Enter your name",
    Placeholder: "e.g., John Doe",
    validators: "no_numbers,required", 
  },
  0 // Mode: Single Input
);
i.load();
console.log(i.run());

이렇게 하면 Huh는 그룹을 엇갈린 순서로 렌더링합니다.

정말 멋지죠? 놀라운 도구를 제공한 Charm에게 큰 박수를 보냅니다! 이것은 빙산의 일각에 불과합니다. 이 도구를 더욱 유용하게 만들기 위해 계속 업데이트하고 개선하겠습니다.

완전한 예를 원하시나요? 터미널 커피숍 구축을 확인하세요.

더 가볍지만 DLL과 동일한 정신을 갖고 싶다면 Node.js에서 Go 프로세스 로드에 대한 내 기사를 읽어보세요.

블로그에 적합하지 않은 심층적인 콘텐츠에 관심이 있다면(개발 기술 수준을 높이기 위해 고안된 긴 시리즈와 다듬어지지 않은 보석을 생각해보세요) Substack에서 저를 팔로우하고 x에서도 저를 찾을 수 있습니다.

SubStack에 대한 향후 기사 및 시리즈:

• P2P 시리즈: 오픈 소스 P2P 글쓰기 앱(데스크톱 및 모바일)인 Livescribe를 Go로 구축합니다.
• 맞춤 템플릿 엔진: 처음부터 새로 제작합니다.
• 저수준 Libuv 서버: 맞춤형 프로토콜 및 서버 구축을 탐색합니다.
• Windows Universal과 WebView의 만남: 세련된 지배력.
• RAG 앱: 검색 증강 생성을 탐구합니다.
• 사용자 정의 Node.js C/C 모듈: Node.js를 한계까지 밀어붙입니다.

읽어주셔서 감사합니다. 환상적인 2025년을 맞이하세요! ?

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