Webpack Deep Dive Part 1: The Hook

🔎 Webpack Deep Dive Part 1: The Hook (요약)

이 글은 Webpack의 소스 코드 이해를 어렵게 만드는 주요 원인으로 Hook 시스템을 꼽고 있으며, Webpack이 Tapable 라이브러리를 통해 Hook을 활용하는 방식과 그로 인해 발생하는 문제점 두 가지를 다룹니다.

---

📌 1. Hook이란?

• Hook은 특정 이벤트나 함수 호출 시, 미리 정의된 다른 함수들을 실행하는 코드 조각을 의미합니다.
• 쉽게 말해, 하나의 함수가 호출될 때 다른 함수들도 연결되어 실행되도록 만드는 기법입니다.
• Webpack은 자체적으로 Tapable이라는 Hook 라이브러리를 사용하여 플러그인 시스템을 구축했습니다.

---

📌 2. Webpack의 Hook 사용 방식과 문제점

🔴 문제점 1: 불명확한 의존성 (Dependencies)

• Webpack의 목표는 명확한 의존성 관리를 통해 코드 종속성을 해결하는 것이었습니다.
• 그러나 Webpack 내부에서 Hook을 통해 핵심 기능을 구현하다 보니, 함수 간의 의존성을 파악하기 어려워지는 문제가 발생했습니다.
• Hook으로 연결된 함수가 서로 숨겨진 의존성을 갖기 때문에, 특정 Hook이 제거되면 예상치 못한 동작을 초래할 수 있습니다.
• 👉 개선 제안: 핵심 기능은 Hook으로 구현하지 말고, Hook은 사용자 정의 함수에만 적용해야 더 나은 코드베이스가 될 것.

class Hook {
    constructor(){
        this.hookedFunctions = [];
    }

    hookFunction(functionToHook){
        this.hookedFunctions.push(functionToHook);
    }

    callHook(){
        this.hookedFunctions.forEach(hookedFunction => hookedFunction());
    }
}

var hook = new Hook();
hook.hookFunction(() => console.log("hello"))
hook.hookFunction(() => console.log("world"))
hook.callHook();

---

🔴 문제점 2: 수직 거리와 Span 문제 (Vertical Distance & Span)

• Robert Martin의 **“Clean Code”**에서 언급된 수직 거리(Vertical Distance) 개념은, 변수나 함수 정의가 최초 사용 지점과 얼마나 가까운가를 나타냅니다.
• Tapable의 Hook 시스템에서는 함수가 정의된 위치와 호출되는 위치가 멀리 떨어지는 경우가 많아, 코드를 이해하기 어렵게 만듭니다.
  • 예: 함수가 한 곳에서 Hook에 연결되고, 나중에 전혀 다른 곳에서 호출될 때 그 사이 거리를 파악해야 함.
• 이런 "Span" 문제는 코드 흐름을 따라가기 어렵게 하고, 디버깅과 유지보수를 복잡하게 만듭니다.

---

📌 결론: Webpack의 Hook 설계에 대한 비판과 교훈

• Webpack의 소스 코드가 잘 작성되었지만, 핵심 기능에 Hook을 사용하는 설계는 문제가 있다고 지적합니다.
• Hook은 플러그인과 사용자 정의 기능에만 사용하는 것이 더 바람직합니다.
• 또한, Tapable의 Hook 시스템은 함수 호출의 흐름을 파악하기 어렵게 만들기 때문에, 수직 거리와 Span을 줄이는 코드 설계가 필요하다는 점을 강조합니다.

---

📌 핵심 요약

문제점설명

불명확한 의존성	Hook으로 연결된 함수들의 의존성을 파악하기 어렵고, 제거 시 예기치 못한 동작 발생
수직 거리와 Span 문제	Hook 시스템이 함수 정의와 호출 간 거리를 멀어지게 하여 코드 흐름을 이해하기 어려움

👉 교훈: Webpack처럼 큰 프로젝트에서 Hook 시스템을 도입할 때는, 핵심 기능 대신 사용자 정의 함수에만 적용하고, 코드의 가독성과 흐름을 고려한 설계가 필요합니다.