[과제] 웹 트랙 1주차) 개발 환경 설정하기 이승원

[nowgnuesLeee]

thorvg.web 설치

thorvg.web은 모노리포며 lottie-player, webcanvas 패키지를 포함하고 있다. 설치는 thorvg.web wiki를 참고했다. 설치를 위해서는 다음과 같은 설정이 필요하다. 필자는 mac 환경이다.

• Node.js 20+ and pnpm 10+
• Emscripten SDK - For WASM compilation
• Meson & Ninja - Build system for ThorVG core

대부분 이전에 설치해놨기 때문에 별도로 설치 및 설정할 필요는 없었다. 하지만 nodejs, pnpm 버전이 특정 버전 이상으로 필요하다면 왜 레포 레벨에서 .npmrc, .nvmrc파일이 없을까 고민이 있었다. 혹시나 환경설정이 필요하다면 위키 글 참고.

패키지외에는 다양한 예제 및 테스트가 있다. 일단 lottie-player, webcanvas 전부 프레임워크를 가리는 패키지는 아니지만 다양한 프론트 프레임워크(react, next, svelt)에서 잘 동작하는지 확인할 수 있는 예제 코드가 있다.

thorvg.web 빌드

각각 패키지별로 이동해서 빌드할 수 있지만 package.json을 참고하면 build 스크립트가 pnpm -r build로 동작하기 때문에 재귀적으로 빌드할 수 있다. 즉 pnpm build로 빌드했다.

눈여겨 볼만한 점은 각 패키지의 dist/에 thorvg.wasm 파일을 포함하고 있다는 점이다. 기본으로 thorvg 코어를 사용하고 있기 때문에 wasm과 glue 파일을 결과 폴더에서 확인할 수 있다. 그래서 두 패키지 모두 당연하게도 thorvg를 로드해야 사용할 수 있다.

결과

pnpm build && npx http-server . -p 3000

example/lottie

example/live-editor