공부/Angular

이 문서는 개발을 하면서 차차 채워나갈 예정입니다. 회사에서 Tailwind CSS를 도입하게 되면서, Tailwind CSS에 대해서 알아보기로 하였다. Angular 프로젝트에 Tailwind CSS 도입하기 너무 감사하게도 ng eject로 Webpack 설정을 바꾸지 않고, Angular 프로젝트에 Tailwind CSS를 도입할 수 있는 ng-tailwindcss라는 좋은 CLI가 있다. 설치 방법 npm i ng-tailwindcss -g : 글로벌에 Angular 프로젝트에 Tailwind CSS를 도입할 수 있도록 도와주는 ng-tailwindcss를 설치한다. npm i tailwindcss -D : 해당 프로젝트에 tailwindcss 라이브러리를 추가한다. npx tailwind in..

선택적 의존성 주입 @Optional 데코레이터를 사용하여 의존성 주입이 필수가 아님을 Angular에 명시한다. 이를 사용하면 의존성이 없더라고 앱이 중단되지 않는다. export class TheComponent { constructor(**@Optional** private apiUrl: TheService) { ... } }

인젝션 토큰 앞서 알아본 값 프로바이더에서 문자열이나 숫자 등을 토큰으로 문자열을 사용하거나, 클래스를 사용하여야 했다. 값 프로바이더에서 문자열을 토큰으로 사용할 경우 중복될 위험이 있고, 클래스를 토큰으로 사용할 경우 로직이 이상해졌다. 인젝션 토큰은 클래스가 아닌 객체, 문자열, 함수 등을 위한 토큰을 주입받기 위해 사용한다. export const GET_API_URL: string = 'https://api.myapp.com/api/get'; export const API_URL = new InjectionToken('api-url'); export const ApiUrlProvider = { provider: API_URL, useValue: GET_API_URL ..

프로바이더 (Provider) Angular는 서비스의 인스턴스 생성과 구성요소에 그 서비스를 주입하는 권한을 위임 받았다. 그러나, Angular는 인스턴스를 어떻게 생성하는지 모르므로 이를 알려줘야 한다. 그 역할을 프로바이더가 한다. 따라서 프로바이더는 Angular에 의존성 인스턴스의 생성 정보를 알린다. 프로바이더 사용 방법 @Injectable의 provideIn 프로퍼티 // 루트 인젝터에 제공 @Injectable({ providedIn: 'root', }) // 특정 모듈에 등록 // 그 모듈의 **모든 구성요소에서 주입할 수 있음.** @Injectable({ providedIn: YourModule, }) @Component 메타데이터의 providers 프로퍼티 // ..

서비스 (Service) 사용하는 이유 컴포넌트의 독립성을 보장하여 재사용성을 높이기 위해 프로젝트의 복잡성을 낮추기 위해 특정 기능을 어플리케이션 전역으로 분리하여 사용하기 위해 코드 서비스를 처음 생성하면 아래와 같은 기본 코드가 생성된다. import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class TempService { constructor() { } } @Injectable 데코레이터 서비스를 정의하는 클래스 위에 @Injectable이라는 데코레이터가 있다. 이 데코레이터는 Angular가 서비스를 정의하는 이 클래스를 서비스로서 인식하고 Dependency..