🅰️ Angular의 파이프(Pipe) 문법

## 개요
파이프는 템플릿에서 데이터를 변환하거나 처리하기 위해 사용하는 함수입니다. 데이터를 표시하기 전에 형식을 바꾸거나 필터링할 때 유용하며, Angular의 빌트인 파이프와 커스텀 파이프 모두 사용 가능합니다.

## 주요 특징
- **데이터 변환**: 숫자, 날짜, 문자열 등의 데이터를 지정된 형식으로 변환
- **필터링**: 배열이나 문자열에서 특정 조건에 맞는 항목만 필터링
- **리포트 처리**: 데이터를 가공하여 사용자에게 보여주는 데 적합
- **@Pipe() 데코레이터**: 파이프 생성 시 필수적으로 사용하는 Angular의 데코레이터

## 사용법
```ts
// 커스텀 파이프 예시
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
transform(value: number): string {
return `₩${value.toLocaleString()}`;
}
}
```

템플릿에서 다음과 같이 사용:
```html
<p>가격: {{ price | currencyFormat }}</p>
```

**비동기 데이터 처리 예시**: 파이프 내부에서 Observable을 사용할 수 있지만, 일반적으로 서비스로 관리하는 것이 좋습니다.

## 주의사항
- **파이프는 항상 리턴값을 반환해야 합니다**. null 또는 undefined를 반환하면 렌더링 오류 발생
- **@Pipe() 데코레이터가 누락되면 파이프가 작동하지 않습니다**
- **성능 최적화**: 복잡한 로직은 서비스로 분리하고, 파이프는 단순 변환에 집중해야 합니다.
- **비동기 처리 시 Pure Pipe 사용 제한**: Observable이나 Promise를 직접 사용하면 테스트가 어려움

## 관련 문법
- [Angular 데이터 바인딩 문법](angular-data-binding-syntax): 파이프는 템플래트 바인딩에서 자주 사용되는 기능입니다.
- [Angular 디렉티브 문법](angular-directive-syntax): 파이프와 유사하지만, DOM 요소에 직접적인 영향을 주는 기능 제공
- [Angular 서비스 문법](angular-service-syntax): 복잡한 데이터 처리 로직은 서비스로 분리하는 것이 좋습니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 10): string {
    if (value.length > limit) {
      return `${value.substring(0, limit)}...`;
    }
    return value;
  }
}

<!-- 템플릿 사용 예시 -->
<p>{{ longText | truncate:20 }}</p>