끄적끄적

뷰에서 타입스크립트를 쓰다보면 스토어에 대한 타입정의가 애매할경우가 많다.. 오늘은 뷰와 타입스크립트 환경에서 내가 쓰고 있는 아키텍처에 대해 정리해두려고 한다. 아무래도 호불호가 갈리는 스타일일수도 있겠다란 생각을 한다. 개인적으로는 현재 방식이 마음에 든다.. 일단 개인환경은 vue, vuex, vuex-class, vue-property-decorator 를 쓰고있다. 먼저 스토어에 액션쪽에 있는 파일을 하나까보면 이렇게 되어 있다. // HomeAction.ts class HomeAction implements HomeActionImpl { [HomeType.GET_MOCK_LIST] = ({ commit }: { commit: Commit }, payload: MockListRequest): P..

Vuex는 Vue의 상태관리를 도와주는 상태관리 라이브러리입니다. 스토어를 알기 전에 일단 flux에 대해 알고 가도록 합시다. Flux - 사전적 의미로 유동,흐름 등 간단하게 말하면 프로젝트 내에 state의 흐름을 의미합니다. 대규모 자바스크립트 프론트엔드개발을 하다보면 백엔드와 다르게 제한된 데이터를 가지고 개발을 하게 됩니다. 그래서 데이터에 대한 흐름을 제어할 필요가 있고, 또한 이러한 부분을 제어하면서 여러 컴포넌트에 데이터를 공급하면서, 불필요한 통신 횟수를 줄여야 하는 필요가 있겠죠? 그래서 각 컴포넌트의 상태를 스토어라는 Root를 만들어 프로젝트의 모든 상태값을 단방향으로 공급해주어 이 조건을 충족시켜줍니다, 공식 페이지를 보면 복잡하고 장황하게 설명해놨지만 데이터에 흐름을 단방향으로..