//$ ng g service myService 명령어를 입력해 봅시다
my-service.service.spec.ts
my-service.service.ts
1. my-service.service.ts 에 Httpclient
import { HttpClient } from '@angular/common/http';
httpclient 모듈을 common http에서 가져오는 것
-
HttpClient는 Angular에서 제공하는 HTTP 클라이언트 서비스입니다. HTTP 요청을 보내고 응답을 처리하는 데 사용됩니다. -
HttpClient를 사용하여 GET, POST, PUT, DELETE 등의 HTTP 요청을 보낼 수 있습니다. 또한 응답을 처리하고 오류를 처리할 수 있습니다. -
HTTP 요청을 보내려면
HttpClient서비스를 주입하고 요청을 수행하는 메서드(예:get(),post(),put(),delete()등)를 사용해야 합니다.HttpClientModule은HttpClient서비스를 설정하고 애플리케이션 모듈에 등록하는 데 사용되고,HttpClient는 실제 HTTP 요청을 보내고 응답을 처리하는 데 사용됩니다.HttpClient를 사용하려면 먼저HttpClientModule를 애플리케이션 모듈에 추가해야 합니다.
2. my-service.service.ts에 constructor
export class TodoService {
constructor(
private readonly http: HttpClient
) { }
@[Injectable](https://www.angular.kr/api/core/Injectable)() 데코레이터는 서비스를 정의하는 메타데이터 객체를 인자로 받습니다.
ng generate service 명령을 실행하면 이 서비스의 @[Injectable](https://www.angular.kr/api/core/Injectable)() 데코레이터에 providedIn: 'root'를 지정해서 서비스 프로바이더를 최상위 인젝터 에 등록합니다.
content_copy@Injectable({
providedIn: 'root',
})서비스가 최상위 인젝터에 등록되면 Angular는 HeroService의 인스턴스를 하나만 생성하며, 이 클래스가 주입되는 모든 곳에서 같은 인스턴스를 공유합니다. 그리고 @[Injectable](https://www.angular.kr/api/core/Injectable)() 데코레이터는 이 데코레이터가 등록된 클래스가 실제로 사용되지 않으면 이 클래스를 최종 빌드 결과물에서 제거하는 대상으로 등록하는 역할도 합니다.
3. todo. page.ts >> 실제 study.component.ts implements AfterviewInit
Q. implements AfterViewInit 과 implements OnInit의 차이는?
- AfterViewInit:
AfterViewInit인터페이스는 Angular 컴포넌트의 생명주기 훅 중 하나로, 컴포넌트의 뷰와 자식 뷰(만일 존재한다면)가 초기화된 후에 호출됩니다.- 이 인터페이스를 구현하는 경우
ngAfterViewInit()메서드를 구현하여 뷰 초기화 후에 수행되어야 하는 작업을 정의할 수 있습니다. 일반적으로 이 메서드는 DOM 요소를 조작하거나 초기화된 뷰에 접근할 때 사용됩니다.
- OnInit:
OnInit인터페이스는 Angular 컴포넌트의 생명주기 훅 중 하나로, 컴포넌트가 초기화될 때 호출됩니다.- 이 인터페이스를 구현하는 경우
ngOnInit()메서드를 구현하여 컴포넌트 초기화 시에 수행되어야 하는 작업을 정의할 수 있습니다. 일반적으로 이 메서드는 컴포넌트에 필요한 초기 데이터 로드 또는 초기화 작업을 수행할 때 사용됩니다.
결론>> afterviewinit는 뷰 초기화 후에 호출 됨 onint은 컴포넌트 초기화 되고 있을때 호출함
둘다 그럼 어떨때 쓰는게 맞는지?
Q. implements AfterViewInit 과 implements OnInit의 사용은 서로 어떨때가 적절한지?
- implements AfterViewInit:
- DOM 요소를 조작하거나 초기화된 뷰에 액세스해야 하는 경우에 적합합니다.
- 뷰와 자식 뷰가 초기화된 후에 호출되므로, 컴포넌트가 렌더링된 후 DOM 조작을 수행해야 할 때 사용됩니다.
- 예를 들어, 특정 DOM 요소의 크기를 측정하거나 조작하여 레이아웃을 조정해야 하는 경우에 이 인터페이스를 구현하여
ngAfterViewInit()메서드를 사용할 수 있습니다.
- implements OnInit:
- 컴포넌트의 초기화 작업이 필요하거나 초기 데이터 로드가 필요한 경우에 적합합니다.
- 컴포넌트가 초기화될 때 호출되므로, 컴포넌트가 초기화되는 시점에 필요한 모든 작업을 수행할 수 있습니다.
- 예를 들어, 초기 데이터를 가져오거나 컴포넌트의 초기 상태를 설정하는 등의 작업을 수행할 때 사용됩니다.
따라서, DOM 조작 또는 뷰와 관련된 작업이 필요한 경우에는 implements AfterViewInit를 사용하고, 초기화 작업이 필요한 경우에는 implements OnInit를 사용합니다. 두 인터페이스를 조합하여 컴포넌트의 초기화 및 뷰 렌더링 후 작업을 효율적으로 수행할 수 있습니다.
4. todo. page.ts >> 실제 study.component.ts constructor(private readonly todoService: Todoservice){}
5. >> study.component.ts
// 화면에 투두 입력한 것을 랜더링 할 수 있도록 보관하는 배열 하나를 생성
todos$: BehaviorSubject<ITodo[]> = new BehaviorSubject<ITodo[]>([]);
❓❓❓❓❓
