Angular 애플리케이션을 개발하다보면 클라이언트 측에서 데이터를 임시로 저장해야 하는 경우가 종종 발생합니다. 이러한 경우 데이터를 메모리에 저장하거나 웹 브라우저의 로컬 스토리지에 저장하는 방법을 고려할 수 있습니다.

1. 메모리에 데이터 저장하기

Angular에서는 서비스를 사용하여 데이터를 메모리에 저장할 수 있습니다. 서비스는 애플리케이션 전역에서 공유되는 인스턴스로, 컴포넌트가 서비스를 사용하여 데이터를 저장하고 꺼내올 수 있습니다. 이는 Angular에서 매우 일반적인 방식입니다.

예를 들어, 다음은 데이터를 저장하고 반환하는 간단한 서비스의 예입니다.

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  setData(newData: any) {
    this.data = newData;
  }

  getData() {
    return this.data;
  }
}

2. 로컬 스토리지 사용하기

클라이언트 측에서 영구적으로 데이터를 유지하고 싶을 때는 로컬 스토리지가 유용합니다. Angular에서는 localStorage 객체를 사용하여 로컬 스토리지에 데이터를 저장하고 검색할 수 있습니다.

예를 들어, 다음은 로컬 스토리지를 사용하여 데이터를 저장하고 반환하는 간단한 예제입니다.

export class LocalStorageService {
  setData(key: string, value: any) {
    localStorage.setItem(key, JSON.stringify(value));
  }

  getData(key: string) {
    const data = localStorage.getItem(key);
    return JSON.parse(data);
  }
}

결론

Angular 애플리케이션에서 데이터를 저장하는 방법에는 메모리에 데이터를 저장하거나 로컬 스토리지를 사용하는 방법이 있습니다. 어떤 방법을 선택할지는 상황에 따라 다르며, 각각의 장단점을 고려하여 결정해야 합니다.