주간 회고 [220328 ~ 220403]

예은·2022년 4월 4일

회고

📓 기초부터 완성까지, 프런트엔드

11장 프런트엔드 개발 도구

12장 디버깅

🏨 테마호텔게임

리팩토링 - 상태관리와 컴포넌트

Vanilla Javascript로 상태관리 시스템 만들기

지난주에 참고한 블로그의 코드를 토대로 리팩토링을 하였다. 기능을 모두 구현한 후에 진행할까 싶었지만 배운 내용을 복습한다는 생각으로 정리하였다.

하나의 상태 관리 객체를 중앙에 두고 모든 컴포넌트에서 사용할 수 있도록 변경하였다.

현재까지 구현한 기능에 필요한 상태는 크게 hotel과 build로 구분하였다.

const state = {
  hotel : {
    //호텔 건물의 층의 높이와 넓이
    //각 칸에 추가된 build 정보 (2차원 배열)
    // ...
  },
  build : {
    //buildCategory의 정보
    //display 여부
    //선택된 build option
    // ...
  }
}

그러고 이벤트가 발생하면 state를 변경할 수 있는 함수를 호출시켰다. state는 반드시 dispatch라는 메서드로만 변경할 수 있어야 한다.

///[BuildCategory.js]
setEvent() {
    this.$target.querySelectorAll(".category-button").forEach((item) => {
      item.addEventListener("click", (e) => {
        const { id } = e.target;
        //👇 dispatch 메서드에 상태 변경을 위한 타입과 변경할 상태를 파라미터로 전달한다.
        store.dispatch({ type: "BUILD_CATEGORY", payload: { id } });
      });
    });
}

///[Store.js]
//1. dispatch에서는 action이라는 객체를 인자로 받아서 
//2. reducer로 새로운 state를 계산하고 반복문을 통해 state를 업데이트한다.
//3. 업데이트하면서 setter 함수가 호출되고 다시 렌더링이 발생한다.
export const CreateStore = (reducer) => {
  const state = Observable(reducer());
  const dispatch = (action) => {
    const newState = reducer(state, action);
    for (const [key, value] of Object.entries(newState)) {
      if (!state[key]) continue;
      state[key] = value;
    }
  };
  
  return { getState, dispatch };
};


///[store.js]
//CreateStore로 저장소를 생성할 때 전달한 인자인 함수가 reducer가 되고
> //상태를 변경하려고 dispatch를 호출할 때마다 이 reducer가 호출되면서 새로운 state가 계산된다.
export const store = CreateStore((state = initState, action = {}) => {
  switch (action.type) {
    case "BUILD_CATEGORY":
      const newBuild = { ...state.build };
      newBuild.selectedCategory = action.payload.id;

      return { ...state, build: newBuild };
    default:
      return state;
  }
});

📚 책

1. 공정하다는 착각

책을 사두고 서론만 세번을 읽고 포기했었다. 이번에도 1장을 읽다가 책을 내려놨다. 어후.. 너무 어렵다..🤯

일단 1장에서는 포퓰리즘에 대한 내용이 주를 이룬다. 이 포퓰리즘이라는 단어의 의미가 나한테는 애매하다. 포퓰리즘은 대중의 인기를 얻기 위해 공약을 내세우는 정치를 의미한다고 하는데 책에서 언급하는 포퓰리즘적 반항, 포퓰리즘의 어쩌구는 이해하기가 어려웠다. 어찌저찌 넘어가면 테크노크라시, 공공선, 다시 포퓰리즘..

다음에 다시.. 도전해야겠다..