Remotion 소스코드에서 "degit"이라는 파일을 발견했습니다.
Remotion을 사용하면 프로그래밍 방식으로 비디오를 만들 수 있습니다.

이 문서에서는 다음 개념을 살펴보겠습니다.

1. 디지트란 무엇인가요?
2. Remotion의 digit 파일에서 영감을 받은 간단한 digit 함수 구축

디지트란 무엇인가요?

오픈소스의 Readme 중 하나에서 "degit"이 언급된 것을 본 기억이 있지만 어느 저장소인지 기억이 나지 않아서 구글에서 degit이 무엇을 의미하는지 검색하다가 이 degit npm 패키지를 찾았습니다.

간단히 말하면, degit을 사용하면 최신 커밋만 다운로드하여 Github 저장소의 복사본을 빠르게 만들 수 있습니다.
전체 자식 기록 대신.

이 패키지에 대해 자세히 알아보려면 degit의 공식 npm 패키지를 방문하세요.

이 degit 패키지를 사용하면 Gitlab 또는 Bitbucket에서도 저장소를 다운로드할 수 있으므로 Github 저장소에만 국한되지 않습니다.

# download from GitLab
degit gitlab:user/repo

# download from BitBucket
degit bitbucket:user/repo

degit user/repo
# these commands are equivalent
degit github:user/repo

다음은 Javascript의 샘플 사용법입니다.

const degit = require('degit');

const emitter = degit('user/repo', {
    cache: true,
    force: true,
    verbose: true,
});

emitter.on('info', info => {
    console.log(info.message);
});

emitter.clone('path/to/dest').then(() => {
    console.log('done');
});

Remotion의 digit 파일에서 영감을 받아 간단한 digit 함수 구축

간단한 degit 함수를 작성하는 방법을 이해하기 위해 Remotion의 degit.ts 파일에서 코드를 분석해 보겠습니다. 이 파일은 degit npm 패키지가 수행하는 작업의 기본 버전을 구현합니다. 즉, 전체 기록을 다운로드하지 않고 GitHub 저장소의 최신 상태를 가져오는 것입니다.

1. 수입품 사용

import https from 'https';
import fs from 'node:fs';
import {tmpdir} from 'node:os';
import path from 'node:path';
import tar from 'tar';
import {mkdirp} from './mkdirp';

• https: 저장소를 가져오기 위해 네트워크 요청을 하는 데 사용됩니다.
• fs: 다운로드한 파일을 쓰는 등 파일 시스템과 상호 작용합니다.
• tmpdir: 시스템의 임시 디렉터리 경로를 제공합니다.
• 경로: 파일 경로를 처리하고 변환합니다.
• tar: tarball(압축 파일)의 내용을 추출합니다.
• mkdirp: 디렉토리를 재귀적으로 생성하는 도우미 함수로, 별도의 파일로 제공됩니다.

2: 저장소 가져오기

export function fetch(url: string, dest: string) {
    return new Promise((resolve, reject) => {
        https.get(url, (response) => {
            const code = response.statusCode as number;
            if (code >= 400) {
                reject(
                    new Error(
                        `Network request to ${url} failed with code ${code} (${response.statusMessage})`,
                    ),
                );
            } else if (code >= 300) {
                fetch(response.headers.location as string, dest)
                    .then(resolve)
                    .catch(reject);
            } else {
                response
                    .pipe(fs.createWriteStream(dest))
                    .on('finish', () => resolve())
                    .on('error', reject);
            }
        }).on('error', reject);
    });
}

• URL 처리: 이 함수는 요청이 성공했는지 확인합니다(상태 코드 300 미만). 리디렉션(300~399 사이의 코드)인 경우 새 URL을 따릅니다. 오류(코드 400)인 경우 Promise를 거부합니다.
• 파일 저장: fs.createWriteStream을 사용하여 저장소를 다운로드하고 대상 경로에 저장합니다.

3: 리포지토리 추출

저장소를 다운로드한 후 타르볼의 내용을 추출해야 합니다:

function untar(file: string, dest: string) {
    return tar.extract(
        {
            file,
            strip: 1,
            C: dest,
        },
        [],
    );
}

• Tar 추출: 이 기능은 .tar.gz 파일의 내용을 지정된 대상 디렉터리로 추출합니다.

4: 모든 것을 하나로 합치기

기본 degit 함수는 디렉토리 생성, 가져오기 및 저장소 추출을 처리하여 모든 것을 하나로 묶습니다.

export const degit = async ({
    repoOrg,
    repoName,
    dest,
}: {
    repoOrg: string;
    repoName: string;
    dest: string;
}) => {
    const base = path.join(tmpdir(), '.degit');
    const dir = path.join(base, repoOrg, repoName);
    const file = `${dir}/HEAD.tar.gz`;
    const url = `https://github.com/${repoOrg}/${repoName}/archive/HEAD.tar.gz`;

    mkdirp(path.dirname(file));
    await fetch(url, file);

    mkdirp(dest);
    await untar(file, dest);
    fs.unlinkSync(file);
};

mkdirp는
를 생성하는 데 사용됩니다. 재귀적으로 디렉토리를 생성합니다.

결론:

Remotion은 설치 명령을 실행할 때 degit을 사용하여 템플릿을 다운로드하는 것으로 나타났습니다.

npx create-video@latest

이 명령은 템플릿을 선택하라는 메시지를 표시하며, 여기에서 degit이 다운로드 작업을 수행합니다.
선택한 템플릿의 최신 커밋

증명을 위해 create-video 패키지에서 이 코드를 확인할 수 있습니다.

오픈소스에서 사용되는 모범 사례에서 영감을 받은 무료 교육 과정을 받으세요.

나에 대해:

웹사이트: https://ramunarasinga.com/

링크드인: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

이메일: [email protected]

오픈소스에서 사용되는 모범 사례를 알아보세요.

참고자료:

1. https://github.com/Rich-Harris/degit
2. https://github.com/remotion-dev/remotion/blob/main/packages/create-video/src/degit.ts
3. https://github.com/remotion-dev/remotion/blob/c535e676badd055187d1ea8007f9ac76ab0ad315/packages/create-video/src/init.ts#L109
4. https://github.com/remotion-dev/remotion/blob/main/packages/create-video/src/mkdirp.ts