패스트캠퍼스 환급챌린지 23일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

 

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스

https://fastcampus.info/4n8ztzq

 

업무로 피곤해도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

23일차 공부 시작!

오늘 공부 시작 시간 (07.23 23:07)

 

오늘의 강의 주제는 '안전한 전역 상태 관리'이다.

 

학습 인증샷 - 1

 

(오늘도 마찬가지로 모자이크 처리..)

 

오늘의 학습 내용

- 안전한 전역 상태 관리 -

 

전역 상태관리는 자바스크립트 애플리케이션을 개발할 때 매우 중요한 주제다. 전역 공간에 공통 데이터를 두면 여러 클래스와 함수에서 쉽게 접근할 수 있다는 장점이 있지만 그만큼 위험성도 크다. 전역 상태를 무분별하게 사용하면 데이터가 예상치 못하게 변경되거나 덮어써질 수 있으며, 규모가 커질수록 문제의 원인을 추적하기 어려워진다.

따라서 전역 상태는 가급적이면 최소화하고 상태를 관리하는 별도의 클래스를 만들어 캡슐화하는 것이 바람직하다. 이 방식은 상태를 한곳에서 집중적으로 관리하면서도 외부에서는 필요한 경우에만 접근하도록 제어할 수 있다. 결과적으로 코드의 안정성과 유지보수성을 높이는 효과를 기대할 수 있다.

 

* 상태관리 클래스 구조 및 역할

import { NewsStore, NewsFeed } from './types';

export class Store implements NewsStore {
  private feeds: NewsFeed[];
  private _currentPage: number;

  constructor() {
    this.feeds = [];
    this._currentPage = 1;
  }

  get currentPage() {
    return this._currentPage;
  }

  set currentPage(page: number) {
    this._currentPage = page;
  }

  get nextPage(): number {
    return this._currentPage + 1;
  }

  get prevPage(): number {
    return this._currentPage > 1 ? this._currentPage - 1 : 1;
  }
  
  get numberOfFeed(): number {
    return this.feeds.length;
  }

  get hasFeeds(): boolean {
    return this.feeds.length > 0;
  }

  getFeed(position: number): NewsFeed {
    return this.feeds[position];
  }

  getAllFeeds(): NewsFeed[] {
    return this.feeds;
  }

  setFeeds(feeds: NewsFeed[]): void {
    this.feeds = feeds.map(feed => ({
      ...feed, 
      read: false
    }));
  }

  makeRead(id: number): void {
    const feed = this.feeds.find((feed: NewsFeed) => feed.id === id);

    if (feed) {
      feed.read = true;
    }
  }
}

예제로 제공된 상태관리 클래스를 보면 class 내부에 feeds 배열과 현재 페이지 정보를 private 멤버로 두어 외부에서 직접 수정하지 못하게 막았다. 대신 getter와 setter를 통해 접근하도록 설계하여 데이터 변조를 통제하고 있다. 캡슐화 원칙을 잘 반영한 것으로 클래스 내부 상태를 보호하는 역할을 한다.

getter 메서드는 현재 페이지, 다음 페이지, 이전 페이지 등의 정보뿐 아니라 피드 수나 피드 목록 존재 여부를 제공한다. setter 메서드는 새로운 feeds 배열로 상태를 갱신하는 역할을 하며 각 피드 객체에 기본값으로 read를 false로 설정한다. 별도의 메서드 makeRead는 특정 id를 가진 피드를 찾아 읽음 상태로 변경하는 책임을 맡고 있다.

 

이처럼 상태를 한곳에서 관리하기 때문에 상태 변경 로직이 집중되고, 상태 변경이 어떻게 이뤄지는지 추적하기 쉽다. 필요한 경우 추가 메서드를 구현하여 상태 변경 규칙을 명확하게 할 수도 있다.

사용된 클래스 구조는 전역 상태관리를 직접 전역 변수로 다루지 않고 인스턴스 단위로 관리하는 방향성을 보여준다. 만약 앱 전역에서 하나의 인스턴스로 상태를 공유할 경우 전역 변수를 사용하는 것과 유사해질 수 있으나 그 접근 자체가 제한되므로 직접적인 데이터 충돌 위험을 줄일 수 있다.

또한 상태관리 클래스를 사용할 때는 불변성(immutability)을 고려하는 것도 좋다. 상태를 직접 수정하는 대신 새로운 상태 객체를 만들어 교체하는 방식을 통해, 상태변경 시점 이동이나 변경 이력을 관리하기 용이하게 할 수 있다. 

전역 상태 관리는 간편함과 위험성 사이에서 균형을 맞추는 일이며, 체계적이고 안전한 상태관리 방식을 구현하는 것이 매우 중요하다..

 

25강 수강 완료

 

오늘 공부 종료 시간 (07.23 23:21)

25강 강의 내용 정리 필기

 

학습 인증샷 - 2

 

마치며

 

오늘도 환급 챌린지 25강 공부 완료!!

 

이번 강의에서는 전역 상태에서 데이터를 관리하는 것에서 벗어나 상태관리 클래스를 사용하는 방법에 대한 내용이었다. 전역 상태관리에 대한 위험성과 더불어 클래스를 통해 데이터를 관리하는 방법에 대해 강사님이 상세하게 알려주셔서 좋았다.