코드의 구조를 깔끔하게 분리 - 전역상태 관리

dev__bokyoung·2022년 9월 6일

해커뉴스 클론코딩

목록 보기

11/12

프롤로그

디렉터리를 만들고 적당하게 분산시키고 적절하게 배치함으로써 코드의 구조를 깔끔하게 개선시켜보자

1. 디렉터리

src : 많이 쓰는 소스코드를 배치하는 용도로 많이 사용한다.
core : 공통 코드들 (구조가 커져도 공통으로 사용될 코드)
page : UI 관련
types : interface

파일

config.ts : 설정파일들

2. modules

파일을 가지고 오기 위해 모듈이라는 스펙을 사용한다. import, export

index.ts

페이지 경로만 기억하고 해당 클래스들을 가지고 오는 방법은 디렉토리 안에 index.ts 파일을 생성 하는 것이다.
index.ts 에서 해당하는 클래스 파일을 import 해주고 바로 export 해주는 것

예를들면 이렇다.

export { default as NewsDetailView } from "./news-detail-view";
export { default as NewsFeedView } from "./news-feed-view";

사용하는 쪽에서는 페이지 하위 디렉토리에 있는 정보에 대해서 기억할 필요가 없음

2. 전역상태 관리

모두가 접근 가능한 전역 공간은 가능하면 쓰지 않는것이 좋다. window 객체는 X

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

export class Store implements NewsStore {
  // 외부에서 노출되지 않도록 방어
  private feeds: NewsFeed[];
  private _currentPage: number;

  // 초기화
  constructor() {
    this.feeds = [];
    // 내부에서만 쓰는 경우 _ 를 붙여 이름을 쓴다. 
    this._currentPage = 1;
  }

  // 외부에서 접근 가능하도록 기능을 제공해주자.
  // 내부에서는 함수로 작동하지만 외부에서는 속성처럼 작동하는 getter, setter
  // 내부에서는 함수기 때문에 다른 잘못된 값으로 세팅하거나 혹은 특정한 범위 내의 값으로만 한정시키거나 하는 코드를 삽입해서 방어코드 작성 가능하다.
  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;
    }
  }
}