Visitor Pattern 베스트 프랙티스

Visitor Pattern은 객체 구조를 변경하지 않고 새로운 동작을 추가할 수 있는 행동 디자인 패턴입니다. 객체의 구조와 수행할 동작을 분리하여 개방-폐쇄 원칙을 준수하며, 타입별로 다른 처리가 필요한 복잡한 객체 구조에서 특히 유용합니다.

---

---

들어가며

이 글에서는 Visitor Pattern 베스트 프랙티스에 대해 상세히 알아보겠습니다. 총 8가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Visitor_Pattern_기본_구조
2. 면적_계산_Visitor_구현
3. Export_기능을_위한_다중_Visitor
4. Visitor_Pattern_with_Composite_구조
5. 비동기_작업을_위한_Async_Visitor
6. 타입_안전한_Visitor_with_제네릭
7. Visitor_Pattern_성능_최적화
8. Visitor_Pattern_에러_처리_전략

---

1. Visitor Pattern 기본 구조

개요

Visitor Pattern의 핵심은 Element와 Visitor라는 두 개의 인터페이스입니다. Element는 accept 메서드를 통해 Visitor를 받아들이고, Visitor는 각 Element 타입별로 visit 메서드를 구현합니다. 이를 통해 더블 디스패치(Double Dispatch)를 구현하여 타입에 따른 동작을 분리합니다.

코드 예제

// Element 인터페이스
interface ShapeElement {
  accept(visitor: ShapeVisitor): void;
}

// Visitor 인터페이스
interface ShapeVisitor {
  visitCircle(circle: Circle): void;
  visitRectangle(rectangle: Rectangle): void;
  visitTriangle(triangle: Triangle): void;
}

// 구체적인 Element 구현
class Circle implements ShapeElement {
  constructor(public radius: number) {}

  accept(visitor: ShapeVisitor): void {
    visitor.visitCircle(this);
  }
}

class Rectangle implements ShapeElement {
  constructor(public width: number, public height: number) {}

  accept(visitor: ShapeVisitor): void {
    visitor.visitRectangle(this);
  }
}

class Triangle implements ShapeElement {
  constructor(public base: number, public height: number) {}

  accept(visitor: ShapeVisitor): void {
    visitor.visitTriangle(this);
  }
}

설명

이 코드는 Visitor Pattern의 기본 구조를 보여줍니다. ShapeElement 인터페이스는 모든 도형이 구현해야 하는 accept 메서드를 정의하고, ShapeVisitor 인터페이스는 각 도형 타입별로 처리할 visit 메서드를 정의합니다. 먼저 ShapeElement의 accept 메서드는 ShapeVisitor를 매개변수로 받습니다. 이는 Visitor를 객체 구조 내부로 받아들이는 통로 역할을 합니다. 각 구체 클래스(Circle, Rectangle, Triangle)는 이 accept 메서드를 구현하는데, 여기서 중요한 점은 자기 자신(this)을 visitor의 특정 메서드에 전달한다는 것입니다. Circle 클래스의 accept 메서드를 보면, visitor.visitCircle(this)를 호출합니다. 이때 this의 타입은 컴파일 타임에 Circle로 확정되어 있습니다. 이것이 바로 더블 디스패치의 핵심입니다. 첫 번째 디스패치는 accept 메서드 호출 시 발생하고(어떤 Element인지 결정), 두 번째 디스패치는 visitCircle 호출 시 발생합니다(어떤 동작을 수행할지 결정). ShapeVisitor 인터페이스는 각 도형 타입마다 별도의 visit 메서드를 정의합니다. visitCircle은 Circle 객체를, visitRectangle은 Rectangle 객체를 매개변수로 받습니다. 이렇게 하면 각 메서드 내에서 해당 타입의 고유한 속성(radius, width, height 등)에 안전하게 접근할 수 있습니다. 이 구조의 가장 큰 장점은 새로운 동작을 추가할 때 Element 클래스들을 수정할 필요가 없다는 것입니다. 새로운 Visitor 구현체만 추가하면 됩니다. 실제 프로젝트에서는 도형의 면적 계산, 렌더링, JSON 직렬화, 검증 등 다양한 동작을 각각의 Visitor로 구현하여 관심사를 명확하게 분리할 수 있습니다. 이는 코드의 유지보수성을 크게 향상시키고, 단일 책임 원칙(SRP)을 준수하는 깔끔한 아키텍처를 만들어줍니다.

---

2. 면적 계산 Visitor 구현

개요

실제로 동작하는 Visitor를 구현하여 각 도형의 면적을 계산합니다. AreaCalculatorVisitor는 ShapeVisitor 인터페이스를 구현하며, 각 visit 메서드에서 해당 도형의 면적 계산 로직을 수행합니다. 계산된 면적은 내부 상태로 저장되어 외부에서 조회할 수 있습니다.

코드 예제

class AreaCalculatorVisitor implements ShapeVisitor {
  private totalArea: number = 0;

  visitCircle(circle: Circle): void {
    const area = Math.PI * circle.radius ** 2;
    this.totalArea += area;
    console.log(`Circle area: ${area.toFixed(2)}`);
  }

  visitRectangle(rectangle: Rectangle): void {
    const area = rectangle.width * rectangle.height;
    this.totalArea += area;
    console.log(`Rectangle area: ${area.toFixed(2)}`);
  }

  visitTriangle(triangle: Triangle): void {
    const area = (triangle.base * triangle.height) / 2;
    this.totalArea += area;
    console.log(`Triangle area: ${area.toFixed(2)}`);
  }

  getTotalArea(): number {
    return this.totalArea;
  }

  reset(): void {
    this.totalArea = 0;
  }
}

// 사용 예시
const shapes: ShapeElement[] = [
  new Circle(5),
  new Rectangle(4, 6),
  new Triangle(3, 8)
];

const areaCalculator = new AreaCalculatorVisitor();
shapes.forEach(shape => shape.accept(areaCalculator));
console.log(`Total area: ${areaCalculator.getTotalArea().toFixed(2)}`);

설명

이 코드는 Visitor Pattern을 실제로 활용하여 여러 도형의 면적을 계산하는 구체적인 예제입니다. AreaCalculatorVisitor 클래스는 ShapeVisitor 인터페이스를 구현하여 각 도형 타입별로 특화된 면적 계산 로직을 제공합니다. AreaCalculatorVisitor는 내부에 totalArea라는 상태를 가지고 있습니다. 이는 방문한 모든 도형의 면적을 누적하는 용도로 사용됩니다. 각 visit 메서드는 해당 도형의 면적을 계산한 후 이 totalArea에 더합니다. visitCircle에서는 원의 면적 공식(π × r²)을, visitRectangle에서는 사각형의 면적 공식(가로 × 세로)을, visitTriangle에서는 삼각형의 면적 공식(밑변 × 높이 ÷ 2)을 각각 적용합니다. 중요한 점은 각 visit 메서드가 해당 타입의 구체적인 속성에 직접 접근할 수 있다는 것입니다. visitCircle은 Circle의 radius에, visitRectangle은 Rectangle의 width와 height에 타입 안전하게 접근합니다. 만약 if-else나 switch 문으로 타입을 체크했다면 타입 캐스팅이 필요했겠지만, Visitor Pattern을 사용하면 컴파일러가 타입을 보장해줍니다. 사용 예시를 보면, shapes 배열에 서로 다른 타입의 도형들을 담아둡니다. 그리고 forEach를 사용하여 각 도형의 accept 메서드를 호출하면서 areaCalculator를 전달합니다. 각 도형은 자신의 타입에 맞는 visit 메서드를 호출하게 되고, areaCalculator는 모든 도형의 면적을 누적합니다. getTotalArea 메서드는 누적된 총 면적을 반환하고, reset 메서드는 totalArea를 0으로 초기화하여 Visitor를 재사용할 수 있게 합니다. 이는 Visitor 인스턴스를 여러 번 사용할 때 유용합니다. 실무에서는 이런 패턴을 복잡한 객체 트리를 순회하면서 데이터를 수집하거나 변환할 때 많이 사용합니다. 예를 들어 AST(Abstract Syntax Tree)를 순회하며 코드를 분석하거나, UI 컴포넌트 트리를 순회하며 렌더링 정보를 수집하거나, 비즈니스 객체들을 순회하며 리포트를 생성하는 등의 작업에 활용할 수 있습니다. 이 패턴을 사용하면 동작 로직이 깔끔하게 분리되어 테스트하기 쉽고, 새로운 계산 방식을 추가할 때도 기존 코드를 수정하지 않아도 됩니다.

---

3. Export 기능을 위한 다중 Visitor

개요

같은 객체 구조에 여러 Visitor를 적용하여 다양한 출력 형식을 지원합니다. JSONExportVisitor와 XMLExportVisitor는 동일한 도형 객체들을 각각 JSON과 XML 형식으로 변환합니다. 이는 Visitor Pattern의 확장성을 잘 보여주는 예제입니다.

코드 예제

class JSONExportVisitor implements ShapeVisitor {
  private shapes: any[] = [];

  visitCircle(circle: Circle): void {
    this.shapes.push({ type: 'circle', radius: circle.radius });
  }

  visitRectangle(rectangle: Rectangle): void {
    this.shapes.push({
      type: 'rectangle',
      width: rectangle.width,
      height: rectangle.height
    });
  }

  visitTriangle(triangle: Triangle): void {
    this.shapes.push({
      type: 'triangle',
      base: triangle.base,
      height: triangle.height
    });
  }

  export(): string {
    return JSON.stringify(this.shapes, null, 2);
  }
}

class XMLExportVisitor implements ShapeVisitor {
  private xml: string = '<shapes>\n';

  visitCircle(circle: Circle): void {
    this.xml += `  <circle radius="${circle.radius}"/>\n`;
  }

  visitRectangle(rectangle: Rectangle): void {
    this.xml += `  <rectangle width="${rectangle.width}" height="${rectangle.height}"/>\n`;
  }

  visitTriangle(triangle: Triangle): void {
    this.xml += `  <triangle base="${triangle.base}" height="${triangle.height}"/>\n`;
  }

  export(): string {
    return this.xml + '</shapes>';
  }
}

// 사용 예시
const shapes2: ShapeElement[] = [
  new Circle(10),
  new Rectangle(5, 8)
];

const jsonExporter = new JSONExportVisitor();
shapes2.forEach(shape => shape.accept(jsonExporter));
console.log('JSON Export:\n', jsonExporter.export());

const xmlExporter = new XMLExportVisitor();
shapes2.forEach(shape => shape.accept(xmlExporter));
console.log('XML Export:\n', xmlExporter.export());

설명

이 코드는 Visitor Pattern의 강력한 확장성을 보여줍니다. 동일한 객체 구조(도형들)에 대해 완전히 다른 두 가지 동작(JSON 변환, XML 변환)을 각각의 Visitor로 구현했습니다. 이는 개방-폐쇄 원칙(OCP)의 완벽한 실현입니다. JSONExportVisitor는 shapes라는 배열에 각 도형의 정보를 JavaScript 객체 형태로 저장합니다. visitCircle 메서드는 { type: 'circle', radius: ... } 형태의 객체를 생성하고, visitRectangle과 visitTriangle도 비슷하게 각 도형의 타입과 속성을 담은 객체를 만듭니다. 모든 도형을 방문한 후 export 메서드를 호출하면 JSON.stringify를 사용하여 배열을 보기 좋게 포맷된 JSON 문자열로 변환합니다. XMLExportVisitor는 다른 접근 방식을 사용합니다. xml이라는 문자열 변수에 XML 태그를 직접 구성해나갑니다. 생성자에서 <shapes> 루트 태그로 시작하고, 각 visit 메서드에서 해당 도형의 XML 요소를 추가합니다. visitCircle은 <circle radius="..."/> 형태의 자기 닫힘 태그를 만들고, 다른 메서드들도 마찬가지입니다. export 메서드는 </shapes> 닫힘 태그를 추가하여 완전한 XML 문서를 만듭니다. 두 Visitor의 핵심 차이는 내부 데이터 구조와 변환 방식입니다. JSON 버전은 객체 배열을 만든 후 한 번에 직렬화하고, XML 버전은 문자열을 점진적으로 구성합니다. 하지만 두 Visitor 모두 동일한 ShapeVisitor 인터페이스를 구현하므로, 같은 방식으로 사용할 수 있습니다. 사용 예시를 보면, shapes2 배열을 한 번은 jsonExporter에, 한 번은 xmlExporter에 전달합니다. 동일한 객체 구조에서 완전히 다른 두 가지 출력을 얻을 수 있습니다. 이것이 Visitor Pattern의 핵심 가치입니다. 실무에서는 이런 패턴을 API 응답 포맷 변환, 데이터 백업, 마이그레이션 스크립트, 리포팅 시스템 등에 활용할 수 있습니다. 예를 들어 동일한 주문 데이터를 고객에게는 JSON으로, 레거시 시스템에는 XML로, 회계 시스템에는 CSV로 변환해야 한다면, 각각의 Visitor를 만들어 깔끔하게 처리할 수 있습니다. 새로운 출력 포맷이 필요하면 새 Visitor만 추가하면 되고, 기존 도형 클래스나 다른 Visitor는 전혀 수정할 필요가 없습니다. 이는 대규모 시스템에서 유지보수성과 확장성을 크게 향상시킵니다.

---

4. Visitor Pattern with Composite 구조

개요

Visitor Pattern은 Composite Pattern과 함께 사용될 때 더욱 강력해집니다. 복잡한 트리 구조를 가진 객체 계층에서 Visitor를 사용하면 전체 트리를 순회하며 작업을 수행할 수 있습니다. 이는 AST, UI 컴포넌트 트리, 파일 시스템 등 계층적 구조에서 특히 유용합니다.

코드 예제

// Composite 패턴과 결합
class ShapeGroup implements ShapeElement {
  private shapes: ShapeElement[] = [];

  constructor(public name: string) {}

  add(shape: ShapeElement): void {
    this.shapes.push(shape);
  }

  accept(visitor: ShapeVisitor): void {
    // ShapeGroup 자체는 방문하지 않고, 자식 요소들만 방문
    this.shapes.forEach(shape => shape.accept(visitor));
  }
}

// 계층 구조를 지원하는 개선된 Visitor
interface EnhancedShapeVisitor extends ShapeVisitor {
  visitGroup?(group: ShapeGroup): void;
}

class HierarchyPrinterVisitor implements EnhancedShapeVisitor {
  private indent: number = 0;

  visitCircle(circle: Circle): void {
    console.log(`${'  '.repeat(this.indent)}Circle(r=${circle.radius})`);
  }

  visitRectangle(rectangle: Rectangle): void {
    console.log(`${'  '.repeat(this.indent)}Rectangle(${rectangle.width}x${rectangle.height})`);
  }

  visitTriangle(triangle: Triangle): void {
    console.log(`${'  '.repeat(this.indent)}Triangle(b=${triangle.base}, h=${triangle.height})`);
  }

  visitGroup(group: ShapeGroup): void {
    console.log(`${'  '.repeat(this.indent)}Group: ${group.name}`);
    this.indent++;
    group['shapes'].forEach((shape: ShapeElement) => shape.accept(this));
    this.indent--;
  }
}

// 사용 예시
const mainGroup = new ShapeGroup('Main');
mainGroup.add(new Circle(3));

const subGroup = new ShapeGroup('Sub');
subGroup.add(new Rectangle(2, 4));
subGroup.add(new Triangle(3, 5));

mainGroup.add(subGroup);
mainGroup.add(new Circle(7));

const printer = new HierarchyPrinterVisitor();
printer.visitGroup(mainGroup);

설명

이 코드는 Visitor Pattern과 Composite Pattern을 결합하여 계층적 구조를 처리하는 방법을 보여줍니다. 실제 소프트웨어에서는 단순한 플랫 구조보다 트리 형태의 복잡한 객체 구조를 다루는 경우가 훨씬 많기 때문에, 이 조합은 매우 실용적입니다. ShapeGroup 클래스는 Composite Pattern의 핵심으로, 여러 ShapeElement를 담을 수 있는 컨테이너 역할을 합니다. add 메서드로 자식 요소를 추가하고, accept 메서드에서는 자신이 가진 모든 자식 요소의 accept를 재귀적으로 호출합니다. 이렇게 하면 Visitor가 트리 전체를 자동으로 순회할 수 있습니다. EnhancedShapeVisitor 인터페이스는 기존 ShapeVisitor를 확장하여 visitGroup 메서드를 추가합니다. 물음표(?)는 TypeScript의 optional 속성으로, 이 메서드를 구현하지 않아도 되도록 합니다. 이렇게 하면 기존 Visitor들과의 호환성을 유지하면서 새로운 기능을 추가할 수 있습니다. HierarchyPrinterVisitor는 트리 구조를 시각적으로 출력하는 Visitor입니다. indent라는 상태 변수로 현재 깊이를 추적합니다. visitCircle, visitRectangle, visitTriangle 메서드는 indent 값에 따라 들여쓰기를 적용하여 출력하므로, 트리의 깊이가 시각적으로 표현됩니다. visitGroup 메서드가 핵심입니다. 먼저 그룹 이름을 출력한 후 indent를 증가시킵니다. 그런 다음 그룹 내의 모든 자식 요소를 순회하며 각각의 accept를 호출합니다. 이때 자식이 또 다른 ShapeGroup이면 재귀적으로 visitGroup이 호출되고, 일반 도형이면 해당 visit 메서드가 호출됩니다. 모든 자식을 처리한 후에는 indent를 감소시켜 원래 깊이로 돌아갑니다. 사용 예시를 보면, mainGroup 안에 Circle, subGroup, 또 다른 Circle이 들어있고, subGroup 안에는 Rectangle과 Triangle이 들어있습니다. 이런 중첩 구조를 printer.visitGroup(mainGroup)으로 한 번 호출하면 전체 트리가 계층적으로 출력됩니다. 실무에서는 이 패턴을 React 컴포넌트 트리 분석, HTML DOM 순회, 파일 시스템 탐색, 데이터베이스 계층 쿼리, 조직도 처리 등에 활용할 수 있습니다. 예를 들어 대규모 React 앱에서 특정 조건을 만족하는 컴포넌트를 찾거나, 전체 컴포넌트의 prop 타입을 검증하거나, 성능 메트릭을 수집할 때 Visitor를 사용하면 깔끔하게 처리할 수 있습니다. 또한 새로운 분석 기능이 필요할 때마다 새 Visitor만 추가하면 되므로, 기존 컴포넌트 코드는 전혀 수정하지 않아도 됩니다.

---

5. 비동기 작업을 위한 Async Visitor

개요

실제 애플리케이션에서는 데이터베이스 조회, API 호출, 파일 I/O 등 비동기 작업이 필요한 경우가 많습니다. Async Visitor Pattern은 각 visit 메서드를 비동기로 만들어 Promise 기반 작업을 처리할 수 있게 합니다. 이를 통해 외부 리소스와 상호작용하면서도 깔끔한 코드 구조를 유지할 수 있습니다.

코드 예제

// 비동기 Visitor 인터페이스
interface AsyncShapeVisitor {
  visitCircle(circle: Circle): Promise<void>;
  visitRectangle(rectangle: Rectangle): Promise<void>;
  visitTriangle(triangle: Triangle): Promise<void>;
}

// 비동기 Element 인터페이스
interface AsyncShapeElement {
  accept(visitor: AsyncShapeVisitor): Promise<void>;
}

// 비동기 지원 Circle
class AsyncCircle extends Circle implements AsyncShapeElement {
  async accept(visitor: AsyncShapeVisitor): Promise<void> {
    await visitor.visitCircle(this);
  }
}

// 데이터베이스 저장 Visitor
class DatabaseSaveVisitor implements AsyncShapeVisitor {
  async visitCircle(circle: Circle): Promise<void> {
    // 실제로는 DB 저장 로직
    await this.saveToDatabase('circles', { radius: circle.radius });
    console.log(`Circle saved to database`);
  }

  async visitRectangle(rectangle: Rectangle): Promise<void> {
    await this.saveToDatabase('rectangles', {
      width: rectangle.width,
      height: rectangle.height
    });
    console.log(`Rectangle saved to database`);
  }

  async visitTriangle(triangle: Triangle): Promise<void> {
    await this.saveToDatabase('triangles', {
      base: triangle.base,
      height: triangle.height
    });
    console.log(`Triangle saved to database`);
  }

  private async saveToDatabase(table: string, data: any): Promise<void> {
    // DB 저장을 시뮬레이션
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Saving to ${table}:`, data);
  }
}

// 사용 예시
async function processShapes() {
  const shapes: AsyncShapeElement[] = [
    new AsyncCircle(5),
    // AsyncRectangle, AsyncTriangle도 비슷하게 구현
  ];

  const dbSaver = new DatabaseSaveVisitor();

  // 순차 처리
  for (const shape of shapes) {
    await shape.accept(dbSaver);
  }

  // 또는 병렬 처리
  await Promise.all(shapes.map(shape => shape.accept(dbSaver)));
}

processShapes();

설명

이 코드는 Visitor Pattern을 비동기 환경에 적용하는 방법을 보여줍니다. 현대 웹 애플리케이션에서는 거의 모든 외부 작업이 비동기로 이루어지므로, 이는 매우 실용적인 패턴입니다. AsyncShapeVisitor 인터페이스는 기존 ShapeVisitor와 유사하지만, 모든 visit 메서드가 Promise<void>를 반환합니다. 이는 각 메서드가 비동기 작업을 수행할 수 있음을 의미합니다. AsyncShapeElement 인터페이스도 마찬가지로 accept 메서드가 Promise를 반환하도록 정의되어 있습니다. AsyncCircle 클래스는 기존 Circle을 상속받으면서 AsyncShapeElement를 구현합니다. accept 메서드는 async로 선언되어 있고, await visitor.visitCircle(this)를 호출합니다. 이렇게 하면 visitor의 비동기 작업이 완료될 때까지 대기할 수 있습니다. Rectangle과 Triangle에 대해서도 동일한 방식으로 AsyncRectangle, AsyncTriangle 클래스를 만들 수 있습니다. DatabaseSaveVisitor는 실제로 비동기 작업을 수행하는 Visitor입니다. 각 visit 메서드는 async로 선언되어 있고, saveToDatabase라는 private 메서드를 호출하여 데이터를 저장합니다. 이 예제에서는 setTimeout으로 네트워크 지연을 시뮬레이션했지만, 실제 프로젝트에서는 여기에 진짜 데이터베이스 쿼리나 API 호출을 넣을 수 있습니다. visitCircle 메서드를 보면, await this.saveToDatabase(...)를 호출한 후 콘솔에 메시지를 출력합니다. await 키워드 덕분에 데이터베이스 저장이 완료된 후에만 다음 줄이 실행됩니다. 이는 작업의 순서를 보장하면서도 비동기의 이점을 누릴 수 있게 해줍니다. processShapes 함수는 두 가지 처리 방식을 보여줍니다. 첫 번째는 for...of 루프를 사용한 순차 처리입니다. 각 도형을 하나씩 처리하며, 하나가 완전히 끝나야 다음이 시작됩니다. 이는 순서가 중요하거나 동시 실행 수를 제한해야 할 때 유용합니다. 두 번째는 Promise.all을 사용한 병렬 처리입니다. 모든 도형을 동시에 처리하여 전체 실행 시간을 크게 단축할 수 있습니다. 실무에서는 이 패턴을 대량의 데이터를 처리할 때 많이 사용합니다. 예를 들어 수천 개의 사용자 프로필을 검증하고 데이터베이스에 저장하거나, 여러 외부 API에서 데이터를 가져와 병합하거나, 대용량 파일을 청크 단위로 업로드하는 등의 작업에 활용할 수 있습니다. ValidationVisitor로 데이터를 검증한 후 SaveVisitor로 저장하고, NotificationVisitor로 알림을 보내는 식으로 여러 Visitor를 체인으로 연결할 수도 있습니다. 에러 처리도 각 visit 메서드에서 try-catch를 사용하여 깔끔하게 처리할 수 있으며, 실패한 항목만 재시도하는 로직도 쉽게 구현할 수 있습니다.

---

6. 타입 안전한 Visitor with 제네릭

개요

TypeScript의 제네릭을 활용하면 Visitor Pattern을 더욱 타입 안전하게 만들 수 있습니다. 각 Visitor가 처리 결과로 특정 타입을 반환하도록 하여 컴파일 타임에 타입 오류를 잡을 수 있습니다. 이는 대규모 프로젝트에서 리팩토링 시 매우 유용합니다.

코드 예제

// 제네릭 Visitor 인터페이스 - 반환 타입을 지정할 수 있음
interface TypedShapeVisitor<T> {
  visitCircle(circle: Circle): T;
  visitRectangle(rectangle: Rectangle): T;
  visitTriangle(triangle: Triangle): T;
}

// 제네릭 Element 인터페이스
interface TypedShapeElement {
  accept<T>(visitor: TypedShapeVisitor<T>): T;
}

// 타입 안전한 Circle 구현
class TypedCircle extends Circle implements TypedShapeElement {
  accept<T>(visitor: TypedShapeVisitor<T>): T {
    return visitor.visitCircle(this);
  }
}

class TypedRectangle extends Rectangle implements TypedShapeElement {
  accept<T>(visitor: TypedShapeVisitor<T>): T {
    return visitor.visitRectangle(this);
  }
}

// 숫자를 반환하는 Visitor
class AreaVisitor implements TypedShapeVisitor<number> {
  visitCircle(circle: Circle): number {
    return Math.PI * circle.radius ** 2;
  }

  visitRectangle(rectangle: Rectangle): number {
    return rectangle.width * rectangle.height;
  }

  visitTriangle(triangle: Triangle): number {
    return (triangle.base * triangle.height) / 2;
  }
}

// 문자열을 반환하는 Visitor
class DescriptionVisitor implements TypedShapeVisitor<string> {
  visitCircle(circle: Circle): string {
    return `원 (반지름: ${circle.radius})`;
  }

  visitRectangle(rectangle: Rectangle): string {
    return `사각형 (${rectangle.width} x ${rectangle.height})`;
  }

  visitTriangle(triangle: Triangle): string {
    return `삼각형 (밑변: ${triangle.base}, 높이: ${triangle.height})`;
  }
}

// 사용 예시 - 타입 추론이 자동으로 됨
const circle = new TypedCircle(5);
const area: number = circle.accept(new AreaVisitor()); // 타입: number
const desc: string = circle.accept(new DescriptionVisitor()); // 타입: string

console.log(`${desc}의 넓이는 ${area.toFixed(2)}입니다.`);

설명

이 코드는 TypeScript의 제네릭 시스템을 활용하여 Visitor Pattern을 타입 안전하게 만드는 고급 기법을 보여줍니다. 이는 대규모 프로젝트에서 컴파일 타임에 더 많은 오류를 잡을 수 있게 해주어 런타임 버그를 크게 줄여줍니다. TypedShapeVisitor<T> 인터페이스는 제네릭 타입 매개변수 T를 받습니다. 이 T는 visit 메서드들이 반환할 타입을 나타냅니다. 예를 들어 TypedShapeVisitor<number>는 모든 visit 메서드가 number를 반환해야 하고, TypedShapeVisitor<string>은 string을 반환해야 합니다. 이렇게 하면 Visitor 구현 시 실수로 다른 타입을 반환하면 컴파일 에러가 발생합니다. TypedShapeElement 인터페이스의 accept 메서드도 제네릭으로 선언되어 있습니다. accept<T>(visitor: TypedShapeVisitor<T>): T라는 시그니처는 "T 타입을 반환하는 Visitor를 받아서 T 타입을 반환한다"는 의미입니다. 이는 TypeScript 컴파일러가 accept 호출의 반환 타입을 자동으로 추론할 수 있게 해줍니다. TypedCircle과 TypedRectangle 클래스를 보면, accept 메서드에서 visitor.visitCircle(this) 또는 visitor.visitRectangle(this)의 반환값을 그대로 return합니다. 제네릭 덕분에 이 반환값의 타입이 자동으로 T로 추론되고, 이는 곧 accept 메서드의 반환 타입이 됩니다. AreaVisitor는 TypedShapeVisitor<number>를 구현합니다. 따라서 모든 visit 메서드가 number를 반환해야 하며, 실제로 각 메서드는 해당 도형의 면적을 계산하여 숫자로 반환합니다. 만약 실수로 문자열을 반환하려고 하면 TypeScript 컴파일러가 즉시 오류를 표시합니다. DescriptionVisitor는 TypedShapeVisitor<string>을 구현합니다. 모든 visit 메서드가 string을 반환하며, 각 도형을 한국어로 설명하는 문자열을 만듭니다. 이렇게 하면 같은 Element 구조에 대해 완전히 다른 반환 타입을 가진 여러 Visitor를 안전하게 사용할 수 있습니다. 사용 예시의 핵심은 타입 추론입니다. circle.accept(new AreaVisitor())를 호출하면 TypeScript는 AreaVisitor가 TypedShapeVisitor<number>를 구현한다는 것을 알고, 따라서 accept의 반환 타입이 number임을 자동으로 추론합니다. area 변수에는 명시적으로 : number 타입 어노테이션을 붙였지만, 사실 생략해도 타입이 자동으로 추론됩니다. 마찬가지로 desc 변수도 자동으로 string 타입으로 추론됩니다. 실무에서는 이 패턴을 복잡한 데이터 변환 파이프라인에서 사용합니다. 예를 들어 ValidatorVisitor<ValidationResult>로 유효성 검사를 하고, TransformerVisitor<DTO>로 데이터 전송 객체로 변환하고, SerializerVisitor<string>으로 직렬화하는 식으로 각 단계마다 명확한 반환 타입을 가진 Visitor를 체인으로 연결할 수 있습니다. 이렇게 하면 각 단계의 입출력 타입이 컴파일 타임에 검증되어, 리팩토링 시 변경 사항이 전체 파이프라인에 어떤 영향을 미치는지 즉시 알 수 있습니다. 또한 IDE의 자동완성과 타입 힌트가 정확하게 작동하여 개발 생산성이 크게 향상됩니다.

---

7. Visitor Pattern 성능 최적화

개요

대규모 객체 구조를 처리할 때는 성능이 중요합니다. Visitor 인스턴스를 재사용하고, 방문 결과를 캐싱하며, 불필요한 방문을 건너뛰는 등의 최적화 기법을 적용할 수 있습니다. 이는 수천, 수만 개의 객체를 처리하는 엔터프라이즈 애플리케이션에서 특히 중요합니다.

코드 예제

// 캐싱과 최적화를 지원하는 Visitor
class OptimizedAreaVisitor implements TypedShapeVisitor<number> {
  private cache = new Map<ShapeElement, number>();
  private visitCount = 0;

  visitCircle(circle: Circle): number {
    this.visitCount++;

    // 캐시 확인
    if (this.cache.has(circle)) {
      console.log(`Cache hit for circle ${circle.radius}`);
      return this.cache.get(circle)!;
    }

    // 계산
    const area = Math.PI * circle.radius ** 2;
    this.cache.set(circle, area);
    return area;
  }

  visitRectangle(rectangle: Rectangle): number {
    this.visitCount++;

    if (this.cache.has(rectangle)) {
      return this.cache.get(rectangle)!;
    }

    const area = rectangle.width * rectangle.height;
    this.cache.set(rectangle, area);
    return area;
  }

  visitTriangle(triangle: Triangle): number {
    this.visitCount++;

    if (this.cache.has(triangle)) {
      return this.cache.get(triangle)!;
    }

    const area = (triangle.base * triangle.height) / 2;
    this.cache.set(triangle, area);
    return area;
  }

  getStats() {
    return {
      visitCount: this.visitCount,
      cacheSize: this.cache.size,
      hitRate: (this.visitCount - this.cache.size) / this.visitCount
    };
  }

  clearCache(): void {
    this.cache.clear();
  }
}

// 조건부 방문을 지원하는 Visitor
class SelectiveVisitor implements ShapeVisitor {
  constructor(
    private predicate: (shape: ShapeElement) => boolean,
    private action: (shape: ShapeElement) => void
  ) {}

  private visit(shape: ShapeElement): void {
    if (this.predicate(shape)) {
      this.action(shape);
    }
  }

  visitCircle(circle: Circle): void { this.visit(circle); }
  visitRectangle(rectangle: Rectangle): void { this.visit(rectangle); }
  visitTriangle(triangle: Triangle): void { this.visit(triangle); }
}

// 사용 예시
const shapes3 = [
  new TypedCircle(5),
  new TypedRectangle(4, 6),
  new TypedCircle(5) // 동일한 객체
];

const optimizedVisitor = new OptimizedAreaVisitor();

// 첫 번째 순회
shapes3.forEach(s => s.accept(optimizedVisitor));

// 두 번째 순회 - 캐시 히트
shapes3.forEach(s => s.accept(optimizedVisitor));

console.log('Stats:', optimizedVisitor.getStats());

// 큰 원만 처리
const selectiveVisitor = new SelectiveVisitor(
  (shape) => shape instanceof Circle && shape.radius > 3,
  (shape) => console.log('Large circle found:', shape)
);

설명

이 코드는 Visitor Pattern을 실제 프로덕션 환경에서 사용할 때 필요한 성능 최적화 기법들을 보여줍니다. 대규모 데이터를 처리하거나 같은 객체를 반복적으로 방문할 때 이런 최적화는 필수적입니다. OptimizedAreaVisitor는 내부에 Map 기반 캐시를 가지고 있습니다. 각 visit 메서드는 먼저 cache.has(shape)로 해당 도형을 이전에 방문했는지 확인합니다. 만약 캐시에 있다면(cache hit) 계산을 건너뛰고 저장된 값을 즉시 반환합니다. 이는 복잡한 계산이나 외부 API 호출이 필요한 경우 엄청난 성능 향상을 가져옵니다. visitCount 변수는 visit 메서드가 호출된 총 횟수를 추적합니다. 이는 성능 모니터링과 디버깅에 유용합니다. getStats 메서드는 총 방문 횟수, 캐시 크기, 캐시 히트율을 계산하여 반환합니다. 히트율은 (총 방문 - 캐시 크기) / 총 방문으로 계산되며, 같은 객체를 여러 번 방문할수록 높아집니다. 캐시의 키는 ShapeElement 객체 자체입니다. JavaScript의 Map은 객체를 키로 사용할 수 있으며, 레퍼런스 동일성(===)으로 비교합니다. 따라서 정확히 같은 객체 인스턴스에 대해서만 캐시가 작동합니다. 만약 값 기반 캐싱이 필요하다면 도형의 속성들을 조합한 문자열 키를 사용할 수도 있습니다. SelectiveVisitor는 다른 종류의 최적화를 보여줍니다. 생성자에서 predicate(조건 함수)와 action(실행 함수)을 받아서, predicate가 true를 반환하는 객체에 대해서만 action을 실행합니다. 이는 전체 객체 구조를 순회하되 특정 조건을 만족하는 객체만 처리하고 싶을 때 유용합니다. 예를 들어 "반지름이 10 이상인 원만 처리" 같은 필터링이 가능합니다. 사용 예시를 보면, shapes3 배열에 동일한 원 객체가 두 번 들어있습니다. 첫 번째 순회에서는 각 객체에 대해 계산을 수행하고 캐시에 저장합니다. 두 번째 순회에서는 모든 객체가 이미 캐시에 있으므로 계산을 건너뛰고 캐시된 값을 반환합니다. getStats를 호출하면 visitCount는 6(3개 객체 × 2회 순회)이지만 cacheSize는 3이므로, 히트율은 50%가 됩니다. SelectiveVisitor 예제는 반지름이 3보다 큰 원만 찾아서 출력합니다. predicate 함수에서 instanceof로 타입을 체크하고 radius 속성을 비교합니다. 조건을 만족하지 않는 도형들은 action이 실행되지 않으므로 불필요한 작업을 피할 수 있습니다. 실무에서는 이런 최적화를 복잡한 비즈니스 로직에 적용합니다. 예를 들어 수천 개의 주문을 처리하는 OrderProcessingVisitor에서 외부 결제 API를 호출해야 한다면, 같은 주문을 반복 처리할 때 캐시를 사용하여 API 호출을 줄일 수 있습니다. 또는 대용량 로그 파일을 분석할 때 특정 에러 레벨만 처리하도록 SelectiveVisitor를 사용하면 처리 시간을 크게 단축할 수 있습니다. clearCache 메서드를 제공하면 메모리 관리도 쉬워지며, 필요할 때 캐시를 초기화하여 최신 데이터를 강제로 다시 계산할 수 있습니다. 이런 패턴들은 엔터프라이즈 애플리케이션에서 확장성과 성능을 동시에 달성하는 핵심 기법입니다.

---

8. Visitor Pattern 에러 처리 전략

개요

실제 프로덕션 환경에서는 Visitor 실행 중 에러가 발생할 수 있습니다. 타입 안전한 에러 처리, 부분 실패 허용, 에러 수집 등의 전략을 통해 견고한 Visitor를 구현할 수 있습니다. 이는 신뢰성 있는 시스템을 만드는 데 필수적입니다.

코드 예제

// 에러를 포함한 결과 타입
type VisitorResult<T> =
  | { success: true; value: T }
  | { success: false; error: Error };

// 안전한 Visitor 인터페이스
interface SafeShapeVisitor<T> {
  visitCircle(circle: Circle): VisitorResult<T>;
  visitRectangle(rectangle: Rectangle): VisitorResult<T>;
  visitTriangle(triangle: Triangle): VisitorResult<T>;
}

// 검증 로직을 포함한 Visitor
class ValidationVisitor implements SafeShapeVisitor<boolean> {
  visitCircle(circle: Circle): VisitorResult<boolean> {
    try {
      if (circle.radius <= 0) {
        return {
          success: false,
          error: new Error(`Invalid radius: ${circle.radius}`)
        };
      }
      return { success: true, value: true };
    } catch (error) {
      return {
        success: false,
        error: error instanceof Error ? error : new Error(String(error))
      };
    }
  }

  visitRectangle(rectangle: Rectangle): VisitorResult<boolean> {
    try {
      if (rectangle.width <= 0 || rectangle.height <= 0) {
        return {
          success: false,
          error: new Error(`Invalid dimensions: ${rectangle.width}x${rectangle.height}`)
        };
      }
      return { success: true, value: true };
    } catch (error) {
      return {
        success: false,
        error: error instanceof Error ? error : new Error(String(error))
      };
    }
  }

  visitTriangle(triangle: Triangle): VisitorResult<boolean> {
    try {
      if (triangle.base <= 0 || triangle.height <= 0) {
        return {
          success: false,
          error: new Error(`Invalid triangle: base=${triangle.base}, height=${triangle.height}`)
        };
      }
      return { success: true, value: true };
    } catch (error) {
      return {
        success: false,
        error: error instanceof Error ? error : new Error(String(error))
      };
    }
  }
}

// 에러를 수집하는 배치 프로세서
class BatchProcessor<T> {
  private errors: Array<{ shape: ShapeElement; error: Error }> = [];
  private results: T[] = [];

  process(shapes: ShapeElement[], visitor: SafeShapeVisitor<T>): void {
    for (const shape of shapes) {
      let result: VisitorResult<T>;

      if (shape instanceof Circle) {
        result = visitor.visitCircle(shape);
      } else if (shape instanceof Rectangle) {
        result = visitor.visitRectangle(shape);
      } else if (shape instanceof Triangle) {
        result = visitor.visitTriangle(shape);
      } else {
        continue;
      }

      if (result.success) {
        this.results.push(result.value);
      } else {
        this.errors.push({ shape, error: result.error });
      }
    }
  }

  getResults(): T[] { return this.results; }
  getErrors() { return this.errors; }
  hasErrors(): boolean { return this.errors.length > 0; }
}

// 사용 예시
const shapes4 = [
  new Circle(5),
  new Circle(-3), // 잘못된 데이터
  new Rectangle(4, 6),
  new Rectangle(0, 5), // 잘못된 데이터
];

const processor = new BatchProcessor<boolean>();
processor.process(shapes4, new ValidationVisitor());

console.log('Valid shapes:', processor.getResults().length);
console.log('Errors:', processor.getErrors().length);
processor.getErrors().forEach(({ shape, error }) => {
  console.log(`Error in ${shape.constructor.name}:`, error.message);
});

설명

이 코드는 Visitor Pattern에서 에러를 안전하게 처리하는 프로덕션 레벨의 전략을 보여줍니다. 실제 애플리케이션에서는 잘못된 데이터, 네트워크 오류, 예상치 못한 상태 등으로 인해 에러가 발생할 수 있으므로, 이를 우아하게 처리하는 것이 매우 중요합니다. VisitorResult<T> 타입은 함수형 프로그래밍의 Result/Either 패턴을 구현한 것입니다. 성공 케이스는 { success: true, value: T } 형태이고, 실패 케이스는 { success: false, error: Error } 형태입니다. 이는 TypeScript의 discriminated union 타입으로, success 필드를 체크하면 컴파일러가 자동으로 value 또는 error 필드의 존재를 추론합니다. SafeShapeVisitor<T> 인터페이스는 모든 visit 메서드가 VisitorResult<T>를 반환하도록 강제합니다. 이는 기존의 void나 T를 직접 반환하는 방식과 달리, 에러 가능성을 타입 시스템에 명시적으로 표현한 것입니다. 이렇게 하면 Visitor를 사용하는 쪽에서 에러 처리를 잊어버릴 수 없습니다. ValidationVisitor는 각 도형의 유효성을 검증하는 Visitor입니다. visitCircle 메서드를 보면, try-catch 블록으로 감싸져 있고, 먼저 비즈니스 로직 검증(radius <= 0)을 수행합니다. 검증 실패 시 success: false와 함께 구체적인 에러 메시지를 담은 Error 객체를 반환합니다. 검증 통과 시에는 success: true와 value: true를 반환합니다. catch 블록에서는 예상치 못한 모든 에러를 잡습니다. error instanceof Error로 Error 타입인지 확인하고, 아니면 String(error)로 변환하여 새로운 Error 객체를 만듭니다. 이는 JavaScript에서 throw 문이 아무 값이나 던질 수 있기 때문에 필요한 방어 코드입니다. BatchProcessor 클래스는 여러 도형을 한 번에 처리하면서 에러를 수집하는 유틸리티입니다. errors 배열에는 실패한 도형과 에러 정보를 함께 저장하고, results 배열에는 성공한 결과만 저장합니다. 이런 패턴을 "에러 누적(error accumulation)" 또는 "부분 실패 허용(partial failure tolerance)"이라고 합니다. process 메서드는 각 도형의 타입을 instanceof로 확인하고 적절한 visit 메서드를 호출합니다. 반환된 result의 success 필드를 체크하여 성공이면 results에, 실패면 errors에 추가합니다. 이렇게 하면 일부 도형이 실패하더라도 나머지 도형들은 계속 처리할 수 있습니다. getResults, getErrors, hasErrors 메서드는 처리 결과를 조회하는 API를 제공합니다. hasErrors로 에러 발생 여부를 빠르게 확인할 수 있고, getErrors로 구체적인 에러 목록을 얻어 로깅하거나 사용자에게 표시할 수 있습니다. 사용 예시를 보면, shapes4 배열에 의도적으로 잘못된 데이터(음수 반지름, 0 너비)를 포함시켰습니다. processor.process를 호출하면 4개 도형 중 2개는 성공하고 2개는 실패합니다. 결과를 조회하면 성공한 도형 수와 에러 수를 확인할 수 있고, 각 에러의 구체적인 메시지도 볼 수 있습니다. 실무에서는 이 패턴을 대량 데이터 처리, 배치 작업, API 요청 처리 등에 활용합니다. 예를 들어 수천 개의 사용자 데이터를 import할 때 일부가 실패해도 나머지는 성공적으로 처리하고, 실패한 항목들은 별도로 로깅하여 나중에 재처리할 수 있습니다. 또한 VisitorResult를 async와 함께 사용하면 비동기 작업의 에러도 안전하게 처리할 수 있습니다. 이런 견고한 에러 처리는 사용자 경험을 크게 향상시키고, 시스템의 신뢰성을 보장하는 핵심 요소입니다.

---

마치며

이번 글에서는 Visitor Pattern 베스트 프랙티스에 대해 알아보았습니다. 총 8가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#TypeScript #DesignPatterns #VisitorPattern #ObjectOriented #SOLID