Angular가 없는 Angular 서비스? 감사합니다

관련이 없습니다. 바로 지금 엄마가 제 옆에서 감자튀김을 요리하고 계세요 — 님의 사진 Louis Hansel on Unsplash

우리 모두가 동의할 수 있는 한 가지는 Angular services을 사용하는 것이 매우 쉽다는 사실입니다. 특정 기능의 범위를 좁힐 수 있는 좋은 방법이며 이해하기 쉽습니다.

기본적으로 각 서비스는 앱이 실행될 때 메모리에 한 번만 존재하므로 일반적으로 구성 요소 간에 데이터를 공유할 수 있습니다. 이 개념은 singleton pattern을 따르거나 적어도 내가 항상 이해하는 방식입니다.

간단한 Node.js 프로젝트나 최근에 개발한 Stencil으로 개발한 프로그레시브 웹 앱의 경우 Angular를 사용하지 않았지만 이 특정 개념을 구현해야 했습니다.

다행스럽게도 저는 항상 Typescript을 사용하여 목표를 달성할 수 있었습니다. 이것이 제가 이 짧은 새 블로그 게시물에서 결과를 공유하는 것에 대해 생각한 이유입니다.

Typescript로 싱글톤 서비스 구현

Typescript는 특히 이 특정 솔루션에서 Java에 정말 가깝습니다. 싱글톤을 구현하기 위해 생성자가 "외부"인스턴스화를 허용하지 않도록 비공개로 설정된 클래스를 만듭니다. 이렇게 하면 서비스의 정적 인스턴스 하나만 생성하고 제공하기 위해 정적 메소드(정적은 모든 인스턴스 간에 공유되는 변수 또는 함수)로 선언할 자체 "엔트리 포인트 생성기"를 생성합니다.

export class SingletonService {

    private static instance: SingletonService;

    private constructor() {
    }

    static getInstance() {
        if (!SingletonService.instance) {
            SingletonService.instance = new SingletonService();
        }
        return SingletonService.instance;
    }
}

Typescript로 싱글톤 서비스 사용

생성자를 비공개로 설정했기 때문에 평소처럼 서비스를 인스턴스화할 수 없습니다.

예를 들면 다음과 같습니다.

const myService: SingletonService = new SingletonService();

다음 오류가 발생합니다.

TS2673: Constructor of class ‘SingletonService’ is private and only accessible within the class declaration.

이것이 우리가 자체 "엔트리 포인트 생성기"를 만든 이유이며 이러한 싱글톤 서비스의 올바른 인스턴스화가 다음과 같이 구현되어야 하는 이유입니다.

const myService: SingletonService = SingletonService.getInstance();

그 이상도 그 이하도 아닙니다. 우리는 모든 구성 요소에 사용할 수 있는 단일 서비스를 만들었습니다 🎉

체리 온 더 케이크🍒🎂

서론에서 말했듯이 최근에 이 싱글톤 패턴 개념을 자주 구현했습니다. 특히 RxJs과 함께 잘 작동한다는 것을 알았습니다. 예제를 찾고 있다면 오픈 소스 프로젝트documentation의 DeckDeckGo을 살펴볼 수 있습니다.

구체적으로 싱글톤 서비스 구현은 다음과 같습니다.

https://github.com/deckgo/deckdeckgo/blob/master/docs/src/app/services/menu/menu.service.tsx

다음은 사용법 구현입니다.

https://github.com/deckgo/deckdeckgo/blob/1932ecfae03846f09a642858ba85e2fdccd666b4/docs/src/app/app-root.tsx#L19

개선 사항에 대한 아이디어가 있는 경우 위의 프레젠테이션용 웹 편집기에서 사용할 솔루션이므로 저에게 ping을 보내주십시오.

무한과 그 너머로 🚀

다윗