“앵귤러 파헤치기” 시리즈

이 글은 Angular에서 템플릿에 데이터를 변환하는 파이프에 대한 설명이며, 내장 파이프와 커스텀 파이프의 생성 방법과 옵션에 대해 다룹니다. 내장 파이프로는 AsyncPipe, DatePipe, CurrencyPipe 등이 있으며, 커스텀 파이프는 @Pipe 데코레이터를 사용하여 생성하며, 옵션으로는 name, pure, standalone 등이 있습니다. 코드 예시와 함께 파이프의 활용 방법을 자세히 설명하고 있습니다.

앵귤러에서의 모듈은 어플리케이션 구조를 정의하고 코드 재사용성을 높이는데 도움이 되지만, 종종 복잡성과 오버헤드를 증가시키는 문제가 발생한다. 이에 대한 해결책으로 나온 것이 SCAM 패턴이며, 그에 연장선으로 독립형 컴포넌트가 앵귤러 14부터 실험적으로 도입되었고, 모듈에 대한 이해 없이도 개발이 가능하여 진입 장벽을 낮추었다. 독립형 컴포넌트는 모듈과 공존하며, 레이지 로딩 및 부트스트랩 등 다양한 기능을 활용해 쉽게 앱을 만들 수 있다.

앵귤러 컴포넌트에서 자식 엘리먼트 참조 및 컨텐츠 프로젝션에 대해 알아봅니다. @ViewChild를 사용하여 자식 컴포넌트를 참조하고 <ng-content> 태그를 활용하여 컨텐츠를 전달하는 방법을 다룹니다. 단일 및 다중 슬롯 컨텐츠 프로젝션에 대해 살펴보며 조건부 렌더링 방법도 소개합니다.

Angular 컴포넌트는 화면을 구성하는 기본 단위로 HTML 템플릿과 동작을 포함합니다. 컴포넌트의 라이프사이클 메서드는 초기화 및 상태 변화를 관리합니다. 스타일 캡슐화는 Shadow DOM, Emulated, 또는 캡슐화하지 않는 None 옵션 중에서 선택할 수 있습니다. 데이터 바인딩은 Input을 통해 부모 컴포넌트로 데이터 전송을 하고, Output과 EventEmitter를 통해 이벤트 바인딩을 처리할 수 있습니다.

Angular의 HttpClient 모듈은 서버 통신을 간편하게 처리하는 도구로, Observable을 통해 비동기적으로 데이터를 요청 및 응답 처리합니다. Interceptor를 사용하여 요청 및 응답을 가공하여 데이터 캐싱과 같은 기능도 만들 수 있습니다. 모듈을 임포트하고 서비스에서 HttpClient를 주입하여 사용하며, 다양한 옵션과 Pipe 함수를 통해 요청 및 응답을 다룰 수 있습니다.

Angular에서 의존성 주입은 놀랍게도 자동화되어 있습니다. 컴포넌트 생성자에 매개변수로 서비스를 선언하면 Angular 인젝터가 필요한 서비스를 주입해줍니다. 서비스의 재사용과 관심사 분리를 촉진하며, @Injectable로 등록된 서비스는 providedIn 설정을 통해 최적화된 싱글톤으로 관리됩니다. 또한, @Optional, @Self, @SkipSelf, @Host와 같은 데코레이터를 사용하여 의존성 주입 토큰을 제어할 수 있습니다.

Angular 디렉티브는 HTML 요소 동작 및 모양을 제어하는데 사용됩니다. 기본 어트리뷰트, 구조 디렉티브, 커스텀 디렉티브, 커스텀 구조 디렉티브로 나뉘며, 사용자 정의 디렉티브를 생성하여 HTML 요소에 동작 및 스타일을 추가할 수 있습니다.