Discord Components v2를 활용한 Discord.js 구현 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• Discord.js 및 JavaScript 기초 지식 보유자
• Discord 봇 개발자 (초급~중급)
• Components v2 기능을 활용한 인터랙티브 UI 구현에 관심 있는 개발자

핵심 요약

• Discord Components v2는 2025년 3월에 출시된 새로운 모듈형 메시지 구성 시스템으로, MessageFlags.IsComponentsV2 플래그를 사용해 기존의 embed 및 text 방식을 대체
• Discraft CLI를 활용한 봇 프레임워크 초기화를 통해 TextDisplayBuilder, StringSelectMenuBuilder 등 컴포넌트를 쉽게 생성 가능
• Component 배열을 interaction.reply()에 전달하여 다양한 UI 요소(텍스트, 버튼, 선택 메뉴 등)를 동적 구성 가능

섹션별 세부 요약

1. 환경 설정 및 초기화

• npm install -g discraft 명령어로 Discraft CLI 설치
• discraft init 명령어로 JavaScript 기반 봇 프로젝트 생성 (예: components-v2-bot 디렉토리)
• .env 파일에 DISCORD_TOKEN 및 DISCORD_APP_ID 설정
• npm run dev 명령어로 개발 서버 실행

2. Components v2 기능 적용

• ping.js 명령어 파일에서 MessageFlags.IsComponentsV2 플래그를 사용해 Components v2 활성화
• components 배열에 TextDisplayBuilder, ContainerBuilder, SeparatorBuilder 등을 결합하여 메시지 구성
• 예:

const components = [
  new TextDisplayBuilder().setContent("Pinging..."),
  new ContainerBuilder().addTextDisplayComponents(...),
  new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small),
  new TextDisplayBuilder().setContent("Pong!")
];

3. 선택 메뉴 컴포넌트 구현

• select-food.js 파일 생성 후 StringSelectMenuBuilder 활용
• StringSelectMenuOptionBuilder를 사용해 옵션(예: 타코, 피자, 버거) 추가
• setEmoji, setDescription 등 메서드로 UI 요소 세부 설정
• 예:

new StringSelectMenuOptionBuilder()
  .setLabel("Taco")
  .setValue("dsaf-taco")
  .setDescription("(best option)")
  .setEmoji({ name: "🌮" })

결론

• Components v2는 메시지 레이아웃의 유연성과 상호작용 기능을 강화해 사용자 경험을 개선
• Discraft 프레임워크와 discord.builders 도구를 활용해 빠르게 프로토타입 개발 가능
• Discord.js 14.19.3 이상 버전에서만 지원되며, MessageFlags.IsComponentsV2 플래그는 필수 설정
• 버튼, 선택 메뉴 등 다양한 컴포넌트를 배열로 조합해 복잡한 UI 구현 가능