Under the Sign of Saturn

시작하며 1편에서 다루었던 글에서는 redux-actions를 사용하는데, redux와 react-redux 모듈로도 충분하지 않을까 싶었다. 패턴 역시 좀 더 직관적으로 이해할 수 있으면 좋을 것 같아서 즐겨보는 유튜버의 Redux 강의를 한 번 들어봤다. 디렉토리 구성 store └modules └ index.js └ test.js └config.js └index.js 기존에는 위 같은 구성이었다. 이를 간단하게 actions와 reducers로 구분했다. 기본 설정 1 step reducer 생성 reducers 폴더 내에 counter와 로그인 여부를 확인하는 isLoggedIn reducer를 만들어보기로 한다. // src/reducers/counter.js const counterReduce..

이전 프로젝트에서 Vue.js에서 컴포넌트 간의 데이터 변경을 다룰 때 event bus 등으로만 관리했을 때 컴포넌트끼리의 관계성을 파악하기 어려웠다. 사이즈가 큰 앱을 다룰 때는 그래서 Vuex를 많이 쓰는데, 처음 Vuex를 접했을 때 많이 헷갈렸어서, 한 번 정리를 쭉 해봤다. Vuex는 핵심인 state, mutations, actions를 이해하는 게 중요한데, state는 vuex라는 공통 중앙 저장소가 가지는, 모든 컴포넌트가 공유하는 data다. 이 state라는 data는 모든 컴포넌트 간에 공유되는 속성이기 때문에 this.$store.state.sampleState 식으로 접근이 가능하다. 하지만, 컴포넌트끼리 모두 공유가 된다는 속성 때문에, 직접적으로 이렇게 접근해 상태를 바꾸는..