서비스와 Injectable
공유 논리를 위한 주입 가능한 서비스를 만듭니다.
서비스와 Injectable은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
서비스와 Injectable
서비스는 데이터 가져오기나 공유 저장소처럼 재사용 가능한 로직이나 상태를 담는 클래스입니다. Angular는 의존성 주입을 통해 서비스를 생성하고 공유합니다.
서비스를 사용하는 이유
컴포넌트는 뷰에 집중해야 합니다. 비즈니스 로직, API 호출, 공유 상태를 서비스로 옮기면 독립적으로 재사용하고 테스트할 수 있습니다.
Injectable 데코레이터
서비스 클래스에 @Injectable을 표시하면 Angular가 서비스를 생성하여 필요한 곳에 주입할 수 있습니다.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root'는 서비스를 애플리케이션 루트 인젝터에 등록합니다. Angular는 앱 전체에서 사용할 하나의 공유 인스턴스(싱글톤)를 생성합니다.
트리 셰이킹 가능한 프로바이더
프로바이더가 providedIn을 사용하여 클래스에 선언되므로, 사용하지 않는 서비스는 번들에서 자동으로 트리 셰이킹될 수 있습니다.
상태를 가진 서비스
서비스는 상태를 보유하는 경우가 많습니다. signals를 사용하면 서비스에서 반응형 상태를 노출할 수 있습니다.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}메서드를 가진 서비스
컴포넌트가 호출하여 작업을 수행하거나 데이터를 가져올 수 있는 메서드를 추가합니다.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}서비스 생성
CLI는 Injectable 데코레이터가 이미 추가된 서비스의 기본 구조를 생성합니다.
ng g service data싱글톤은 상태를 공유합니다
루트 서비스는 싱글톤이므로 이를 주입하는 모든 컴포넌트가 동일한 인스턴스와 동일한 상태를 확인합니다. 이것이 컴포넌트 간에 데이터를 공유하는 방법입니다.
서비스는 서비스를 주입할 수 있습니다
서비스는 다른 서비스에 의존할 수 있습니다. 예를 들어 데이터 서비스는 HttpClient 서비스를 사용하여 요청을 보낼 수 있습니다.
서비스의 책임을 명확하게 유지하세요
각 서비스에 하나의 명확한 책임을 부여하세요. 작고 집중된 서비스는 여러 작업을 수행하는 큰 서비스보다 테스트하고 재사용하기 쉽습니다.
빠른 확인: Injectable
싱글톤 서비스를 등록합니다.
복습: 서비스
서비스는 재사용 가능한 로직과 상태를 담고, @Injectable로 표시하며, providedIn: root를 사용하여 앱 전체에서 사용할 싱글톤을 등록한다는 것을 배웠습니다. 서비스는 컴포넌트 간에 상태를 공유하고 다른 서비스에 의존할 수 있습니다. 다음으로 inject 함수를 살펴봅니다.
자주 묻는 질문
“서비스와 Injectable” 강의는 무료인가요?
네 — “서비스와 Injectable” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“서비스와 Injectable”에서 뭘 배우나요?
공유 논리를 위한 주입 가능한 서비스를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“서비스와 Injectable” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.