TuneFlow DevKit

여기는 TuneFlow DevKit입니다 -- TuneFlow 플러그인 개발 도구입니다.

TuneFlow DevKit을 사용하면 TuneFlow 데스크톱 버전에서 개발 중인 TuneFlow 플러그인을 실행하고, 로컬에 실행되는 디버그 서버를 통해 디버깅할 수 있습니다.

준비 작업

NodeJS 설치

먼저 nodejs>=16이 설치되어 있는지 확인해야 합니다. 명령줄에서 다음 명령어를 실행하여 NodeJS 버전을 확인할 수 있습니다:

node -v

만약 오류가 발생하거나 버전이 16 미만이라면, 최신 버전의 nodejs를 수동으로 설치해야 하며, 여기에서 NodeJS 공식 설명 문서를 확인할 수 있습니다.

tuneflow-devkit 클론하기

TuneFlow DevKit을 로컬에 클론합니다:

git clone --recurse-submodules https://github.com/andantei/tuneflow-devkit.git

여기서 --recurse-submodules를 추가해야 한다는 점에 유의하세요. 이렇게 해야 tuneflow-devkit 아래의 하위 코드 저장소들이 로컬에 클론되는 것을 보장할 수 있습니다.

nodejs 의존성 설치

tuneflow-devkit 디렉토리에서 다음 명령어를 실행하여 프로젝트가 필요로 하는 nodejs 의존성 라이브러리를 설치합니다:

npm install

실행 예시 플러그인

먼저 tuneflow-devkit에 기본으로 포함된 tuneflow-helloworld-plugin을 사용하여 DevKit과 TuneFlow 데스크톱 버전 간의 연동 테스트 방법을 시연해 보겠습니다.

DevKit 로컬 디버깅 도구 실행

tuneflow-devkit 디렉토리에서 다음 명령어를 실행합니다:

npm run dev

nodejs와 node_modules가 올바르게 설치되었다면, 다음과 유사한 출력을 볼 수 있습니다:

$ npm run dev

> [email protected] dev
...

여기서 http://localhost:8899가 우리의 디버깅 도구 주소입니다.

다음으로 브라우저에서 이 주소를 엽니다.

DevKit

Hello World 플러그인이 디버깅 코드에 로드된 것을 볼 수 있습니다.

TuneFlow 데스크톱 버전에서 예시 플러그인 실행

다음으로 TuneFlow 데스크톱 버전을 열고, 곡을 생성하거나 열고,

import { YourPlugin } from './path_to_your_plugin_class';
import bundle from './path_to_your_bundle.json';

...

DevKit 실행하기

다음으로 DevKit을 실행합니다. tuneflow-devkit 디렉터리로 이동하여 다음 명령어를 실행하세요:

npm run dev

앞서 설명했듯이, 모든 설정이 올바르다면 인터페이스에서 개발 중인 플러그인이 우리가 커스터마이징한 플러그인으로 전환되는 것을 볼 수 있습니다.

切换至自定义插件

앞서 설명된 단계에 따라 TuneFlow 데스크톱 버전을 실행한 후, '플러그인 개발' 플러그인을 통해 우리의 사용자 정의 플러그인을 실행할 수 있습니다.

코드 디버깅하기

대규모 프로젝트를 디버깅할 때는 종종 중단점(breakpoint)을 설정하여 코드의 실행 흐름과 변수의 값을 확인해야 합니다. DevKit에서는 브라우저에 내장된 개발 도구를 활용하여 이 작업을 수행할 수 있습니다.

먼저 Chrome으로 npm run dev 실행 후 출력되는 주소, 보통 http://localhost:8899를 엽니다. TuneFlow 데스크톱 버전도 동시에 열어 테스트용 트랙을 로드했는지 확인하세요.

이후 Chrome 개발자 도구를 엽니다. 단축키 Ctrl+Shift+I (Windows) 또는 Command+Option+I (macOS)를 사용하거나, 페이지에서 마우스 오른쪽 버튼을 클릭하고 '검사(Inspect)'를 선택합니다.

개발자 도구에서 소스 코드(Sources) 탭으로 전환합니다.

调试工具

파일 트리에서 디버깅해야 할 코드를 찾습니다. 보통 src/plugin/<your_repo>/<your_plugin_file>.ts이며, 디버깅할 코드의 왼쪽 줄 번호를 클릭하여 중단점을 설정합니다.

중단점 설정을 완료한 후, TuneFlow 데스크톱 버전으로 전환하여 '플러그인 개발' 플러그인을 실행하고, 이때 다시 DevKit으로 돌아오면 우리의 코드가 중단점에서 멈춘 것을 확인할 수 있습니다.