Hookable 패키지를 활용한 효율적인 코드 관리 노하우

Hookable 패키지와 Unbuild 코드베이스의 효율성

JavaScript와 TypeScript로 프로젝트를 진행하다보면 코드의 재사용성과 관리의 효율성이 중요한 화두로 떠오릅니다. 이번 글에서는 Unjs에서 만든 'Hookable' 패키지를 통해 이러한 문제를 어떻게 해결할 수 있는지를 알아보겠습니다. 특히, Unjs의 Unbuild 소스 코드에서 Hookable이 어떻게 활용되는지를 중점적으로 살펴보고자 합니다.

Hookable: 무엇인가?

Hookable은 Unjs에서 제공하는 패키지로, 'Awaitable Hooks'라는 개념을 중심으로 개발되었습니다. 이 패키지는 비동기적인 방식으로 후크를 생성하고 호출할 수 있는 기능을 제공합니다. 이를 통해 복잡한 코드 흐름을 단순화하고, 코드의 구조를 더욱 명료하게 할 수 있습니다.

Hookable 패키지 설치 방법

npm install hookable

Hookable 기본 사용법

아래와 같이 Hookable 패키지를 프로젝트에 적용할 수 있습니다:

import { createHooks } from 'hookable';

// Hookable 인스턴스 생성
const hooks = createHooks();

// 'hello'라는 후크를 생성하고, 콜백 지정
hooks.hook('hello', () => {
  console.log('Hello World');
});

// 'hello' 후크 호출
hooks.callHook('hello');

Unbuild에서의 Hookable 활용 사례

Unbuild의 코드를 분석하면서 Hookable이 어떻게 효율적으로 사용되는지를 보여주는 코드 예제가 눈길을 끌었습니다.

Hookable 초기화

Unbuild의 build.ts에서 Hookable은 다음과 같이 초기화됩니다:

const ctx: BuildContext = {
  options,
  jiti,
  warnings: new Set(),
  pkg,
  buildEntries: [],
  usedImports: new Set(),
  hooks: createHooks(),
};

이 코드에서는 BuildContext 객체에 Hookable 인스턴스를 "hooks"라는 프로퍼티로 추가하면서, 다양한 빌드 관련 기능을 추가하기 위한 준비를 합니다.

Hook 등록

다양한 설정을 통해 등록된 후크는 다음과 같이 추가됩니다:

if (preset.hooks) {
  ctx.hooks.addHooks(preset.hooks);
}
if (inputConfig.hooks) {
  ctx.hooks.addHooks(inputConfig.hooks);
}
if (buildConfig.hooks) {
  ctx.hooks.addHooks(buildConfig.hooks);
}

여기에서는 preset, inputConfig, buildConfig에서 제공하는 후크가 추가되고, 이러한 후크는 빌드 프로세스 중 다양한 시점에 호출되도록 설정됩니다. 이는 프로젝트 구조의 확장성과 유지보수성을 크게 향상시킵니다.

후크 호출

등록된 후크는 풀이된 다양한 사건 시점에서 다음과 같이 호출됩니다:

await ctx.hooks.callHook("build:prepare", ctx);
await ctx.hooks.callHook("build:before", ctx);

if (options.stub || options.watch) {
  await ctx.hooks.callHook("build:done", ctx);
  return;
}

await ctx.hooks.callHook("build:done", ctx);

여기서 build:prepare, build:before, build:done 등으로 불리는 후크는 빌드의 각 단계에서 실행되며, 이를 통해 체계적으로 코드의 흐름을 제어할 수 있습니다.

결론

Hookable 패키지는 다양한 후크를 통해 코드의 확장성을 높이고, 복잡한 논리를 효율적으로 분리할 수 있는 강력한 도구입니다. 특히 Unbuild와 같은 대규모 오픈소스 프로젝트에서는 이러한 패턴을 통해 개발자가 코드를 더욱 쉽게 이해하고 관리할 수 있도록 돕습니다. 새로운 프로젝트나 기존 프로젝트의 구조 개선을 고려하고 있다면 Hookable과 같은 패턴을 적극적으로 검토해보는 것을 추천드립니다.

추가 참고 자료

• Unbuild GitHub Repository
• Hookable on npm
• Unjs Official Website

이 자료들은 Hookable 구현 사례와 보완 학습을 위해 유용한 자원이 될 것입니다.