우아한 데이터 표시를 위해 Angular에서 사용자 정의 파이프를 만드는 방법

Angular를 이용해 사용자 인터페이스를 구성할 때, 파이프라는 개념은 매우 자주 등장합니다. 그렇다면 파이프는 무엇이며, 어떤 방식으로 작동하는 걸까요?

Angular는 웹 프레임워크 분야에서 가장 선호도가 높은 기술 중 하나로 손꼽히며, StackOverflow 설문조사 결과에서도 그 인기를 확인할 수 있습니다.

모듈식 구조를 기반으로 하는 Angular는 개발자들에게 사랑받는 프레임워크입니다. 컴포넌트들을 작고 재사용 가능한 단위로 분할하여 개발 효율성을 높일 수 있습니다. 이런 모듈화된 코드베이스는 유지보수를 용이하게 할 뿐만 아니라 팀 협업을 증진시키는 데에도 기여합니다. 더불어 양방향 데이터 바인딩, 크로스 브라우징 지원, 방대한 생태계 및 커뮤니티는 Angular가 최고의 프런트엔드 프레임워크 중 하나로 자리매김하는 이유입니다.

본 문서에서는 Angular 파이프의 정의, 활용 사례, 다양한 내장 파이프 유형, 그리고 Angular에서 사용자 정의 파이프를 생성하는 방법에 대해 자세히 알아보겠습니다.

Angular 파이프란 무엇인가?

파이프는 Angular 애플리케이션 내에서 데이터를 변환하고 형식화하는 핵심 기능입니다. 파이프는 입력값을 받아, 정의된 변환 과정을 거친 후 변환된 결과를 출력합니다. 이러한 변환은 통화나 날짜 형식 변경처럼 단순할 수도 있고, 목록 항목을 정렬하거나 필터링하는 것과 같이 복잡할 수도 있습니다.

파이프의 주된 목적은 사용자에게 친숙하고 상호작용하기 쉬운 형태로 데이터를 변환하여 사용자 경험을 향상시키는 데 있습니다. Angular 파이프는 내장 파이프와 사용자 정의 파이프 두 가지 유형으로 나눌 수 있습니다. Angular에서 파이프를 사용해야 하는 주요 이유는 다음과 같습니다.

데이터 변환: 파이프의 가장 핵심적인 기능은 사용자에게 보여지는 데이터를 가독성 있게 변환하는 것입니다.
코드 가독성 및 유지보수성 향상: 협업 개발 환경에서 다른 팀 구성원이 코드를 이해하기 쉽도록 코드를 간결하게 유지하고, 유지보수를 용이하게 합니다.
현지화 지원: 다양한 날짜 형식을 포함하여, 목표 시장에 맞게 데이터를 현지화할 수 있습니다. 예를 들어, `DatePipe`를 사용하면 사용자 로케일에 맞춰 날짜 형식을 조정할 수 있습니다.
데이터 정렬 및 필터링: `OrderPipe` 또는 `FilterPipe`를 이용하여 데이터를 정렬하거나 필터링하는 작업을 간편하게 처리할 수 있습니다.

Angular 내장 파이프의 종류

Angular는 다양한 목적에 맞게 설계된 여러 내장 파이프를 제공합니다. 개발 과정에서 자주 사용되는 몇 가지 예를 소개합니다.

`PercentPipe`: 숫자를 백분율 문자열로 변환할 때 사용합니다.
`DatePipe`: 로케일 규칙에 따라 날짜 값의 형식을 지정하는 데 활용합니다.
`LowerCasePipe`: 문자열을 모두 소문자로 변환합니다.
`UpperCasePipe`: 문자열을 모두 대문자로 변환합니다.
`CurrencyPipe`: 로케일 규칙에 따라 숫자를 통화 문자열로 변환합니다.
`DecimalPipe`: 로케일 규칙을 기반으로 숫자를 소수점 형식의 문자열로 변환합니다.

Angular에서 사용자 정의 파이프 만들기

지금까지 내장 파이프와 그 활용법을 살펴봤습니다. Angular는 또한 개발자가 필요에 따라 직접 사용자 정의 파이프를 만들 수 있도록 지원합니다. 사용자 정의 파이프는 내장 파이프만으로는 구현하기 어려운 특별한 변환을 수행할 때 매우 유용하며, 애플리케이션의 기능을 확장하는 데 기여합니다.

사전 준비 사항

Angular에서 사용자 정의 파이프를 구축하기 전에 다음 사항들이 준비되어 있어야 합니다.

Angular 애플리케이션을 실행하기 위한 Node.js 런타임 환경. 아직 설치하지 않았다면 Node.js 다운로드 페이지에서 다운로드할 수 있습니다.
Angular 프레임워크의 기본적인 작동 방식에 대한 이해가 필요합니다.
Angular CLI: 애플리케이션 생성 및 다양한 명령 실행에 사용됩니다. 다음 명령을 사용하여 설치할 수 있습니다.

npm install -g @angular/cli

Angular에서 사용자 정의 파이프를 만드는 단계는 다음과 같습니다.

#1. 새로운 Angular 프로젝트를 생성합니다. 다음 명령어를 사용하여 프로젝트를 시작할 수 있습니다.

ng new pipes

#2. 생성된 애플리케이션 디렉토리로 이동한 후, 원하는 코드 편집기(예: VsCode)로 프로젝트를 엽니다. VsCode를 사용 중이라면 다음 명령어를 실행할 수 있습니다.

cd pipes && code .

프로젝트 폴더 구조는 다음과 유사합니다.

#3. 사용자 정의 파이프를 생성합니다. 다음 명령어를 사용하여 새로운 사용자 정의 파이프를 생성할 수 있습니다.

ng generate pipe customPipe

프로젝트 폴더를 확인하면 다음 두 파일이 생성된 것을 확인할 수 있습니다.

src/app/custom-pipe.pipe.spec.ts

src/app/custom-pipe.pipe.ts

#4. 파이프의 로직을 정의합니다.

`custom-pipe.pipe.ts` 파일을 열어보면 다음과 같은 코드가 있습니다.

이제 간단하게 문자열을 배열로 분할하는 로직을 추가해보겠습니다.

파일 내용을 아래와 같이 변경할 수 있습니다.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
    transform(value: string): string[] {
        return value.split('');
    }
}

#5. 사용자 정의 파이프를 등록합니다. `app.module.ts` 파일을 열고 `@NgModule` 데코레이터가 있는지 확인합니다.

이 파일에 다음과 같은 코드가 포함되어 있는지 확인합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPipePipe } from './custom-pipe.pipe';

@NgModule({
    declarations: [
        AppComponent,
        CustomPipePipe
    ],

    imports: [
        BrowserModule,
        AppRoutingModule
    ],

    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

#6. `app.component.html` 파일을 열고 모든 내용을 삭제한 후 다음 코드를 추가합니다.

<header>{{ '12345' | customPipe }}</header>

다음 명령어를 사용하여 서버를 실행합니다.

ng serve

브라우저에 다음과 같이 표시됩니다.

Angular에서 파이프 체이닝하는 방법

파이프 체이닝을 사용하면 하나의 표현식 내에서 여러 변환 작업을 수행할 수 있습니다. Angular에서 파이프를 연결하려면 파이프 연산자(`|`)를 사용합니다.

파이프를 체이닝하는 주요 이유는 다음과 같습니다.

코드 재사용성 및 모듈성 향상: 각 파이프를 특정 변환 작업에 집중시킴으로써, 애플리케이션 전체에서 재사용 가능한 코드를 작성할 수 있습니다.
코드 유지보수 용이: 템플릿 내에서 파이프를 연결하면 코드가 더욱 간결해지고, 유지보수가 쉬워집니다.
사용자 정의 확장성: 사용자 정의 파이프와 내장 파이프를 결합하여, 요구사항에 맞는 특별한 변환을 만들 수 있습니다.
복잡한 변환 처리: 복잡한 변환 로직을 여러 단계로 분리하여, 각 파이프가 한 가지 변환을 담당하도록 할 수 있습니다.

사용자 정의 파이프는 다른 사용자 정의 파이프나 내장 파이프와 함께 체인으로 연결할 수 있습니다. 이전에 생성한 `customPipe` 파이프와 내장된 `lowercase` 파이프를 함께 체인으로 연결하는 방법을 살펴봅시다.

<p>{{ dataValue | customPipe | lowercase }}</p>

순수 파이프 vs 불순 파이프

Angular에는 순수 파이프와 불순 파이프 두 가지 종류의 파이프가 존재합니다.

순수 파이프

Angular의 파이프는 기본적으로 순수 파이프로 간주됩니다. 순수 파이프는 동일한 입력에 대해 항상 동일한 출력을 반환해야 합니다. 이는 결정적이며 상태를 저장하지 않는 파이프를 의미합니다.

Angular의 변경 감지 메커니즘은 순수 파이프를 자동으로 최적화합니다. Angular는 순수 파이프에 전달된 입력값이 변경되지 않으면 파이프 변환을 다시 실행하지 않습니다.

다음은 파이프를 순수 파이프로 선언하는 방법입니다.

@Pipe({
    name: 'uppercase',
    pure: true
})

export class UppercasePipe {
    transform(value: string): string {
        return value.toUpperCase();
    }
}

보시다시피, `@Pipe` 데코레이터의 `pure` 속성을 `true`로 설정하여 해당 파이프가 순수 파이프임을 명시했습니다.

불순 파이프

불순 파이프는 Angular가 변경사항을 감지할 때마다 실행됩니다. 여기서 변경사항은 입력값에 대한 변경이 아닐 수도 있습니다. 불순 파이프는 애플리케이션의 현재 상태에 접근해야 하는 경우에 적합합니다. 예를 들어 데이터베이스에 접속하거나 HTTP 요청을 보내는 상황에서 불순 파이프를 사용할 수 있습니다.

다음은 불순 파이프의 예시입니다.

@Pipe({
    name: 'sort',
    pure: false
})

export class SortPipe {
    transform(array: any[]): any[] {
        return array.sort();
    }
}

위 코드에서 `@Pipe` 데코레이터의 `pure` 속성을 `false`로 설정하여 해당 파이프가 불순 파이프임을 선언했습니다.

Angular 파이프 생성: 모범 사례

파이프 이름은 `camelCase` 표기법을 따릅니다. 위에서 `customPipe`처럼 두 단어 이상으로 이루어진 파이프 이름은 항상 이 표기법을 따릅니다.
파이프 테스트: 파이프를 만들었다고 해서 정상적으로 작동한다는 보장은 없습니다. 항상 파이프가 의도대로 동작하는지 테스트해야 합니다. 다양한 테스트 라이브러리를 사용하여 이 과정을 자동화할 수 있습니다.
복잡한 파이프 지양: 하나의 파이프가 여러 작업을 처리하도록 만들 수 있지만, 좋은 방법은 아닙니다. 여러 작업을 처리해야 한다면 각 작업을 분리하여 여러 파이프를 만드는 것이 좋습니다.
순수 파이프 사용 권장: 순수 파이프는 항상 같은 입력에 대해 같은 출력을 반환하므로, Angular는 순수 파이프의 결과를 캐싱하여 성능 및 응답 시간을 향상시킬 수 있습니다.

자주 묻는 질문

Angular에서 파이프가 필요한 이유는 무엇인가요?

파이프는 애플리케이션 내 데이터를 변환하고 형식화하는 데 사용됩니다. 파이프는 값을 입력으로 받아, 지정된 변환 과정을 거쳐 변환된 값을 출력합니다. 파이프는 통화나 날짜 형식 변환부터 목록 항목 정렬이나 필터링과 같이 다양한 변환을 수행할 수 있습니다.

사용자 정의 파이프란 무엇인가요?

사용자 정의 파이프는 개발자가 직접 작성하여 고유한 변환 로직을 수행하는 파이프입니다. 사용자 정의 파이프는 파이프 체이닝을 통해 내장 파이프와 함께 사용할 수 있습니다.

Angular에서 제공하는 내장 파이프의 예시를 몇 가지 들어주세요.

대표적인 예시로 `DatePipe`, `UpperCasePipe`, `LowerCasePipe`, `CurrencyPipe`, `DecimalPipe`, `PercentPipe` 등이 있습니다.

파이프 체이닝이란 무엇인가요?

파이프 체이닝은 여러 파이프를 연결하여 하나의 표현식 내에서 연속적으로 변환 작업을 수행하는 방식입니다. Angular에서는 파이프 연산자(`|`)를 사용하여 여러 파이프를 연결합니다. 사용자 정의 파이프는 내장 파이프뿐 아니라 다른 사용자 정의 파이프와도 함께 체인으로 연결할 수 있습니다.

결론

이제 인터뷰에서 Angular 파이프에 대해 자신 있게 설명할 수 있을 것입니다. 파이프는 Angular 인터뷰에서 자주 등장하는 질문 중 하나이기 때문입니다. 또한, 이 문서에서는 다양한 내장 파이프와 사용자 정의 파이프를 생성하는 방법을 다루었습니다.

사용자 정의 파이프는 특정한 요구 사항을 해결하거나, 애플리케이션을 더욱 동적으로 만들고자 할 때 유용합니다. 그러나 사용자 정의 파이프를 생성하고 사용하기 위해서는 Angular가 내부적으로 어떻게 작동하는지에 대한 이해가 필요합니다.

세계 수준의 사용자 경험을 제공하기 위해 다양한 Angular UI 라이브러리들을 살펴보는 것도 좋은 방법입니다.